CSS盒子模型

属性box-sizing可取值

1. border-box
2. content-box

标准盒子模型（content-box）

    
    
    
复制代码

运行代码，打开chrome，就很明了

看图说话总结计算公式：

标准盒子模型的大小 = content+padding+border

怪异盒模型(border-box)

取消box-sizing: border-box;注释再运行。就也很明了

看图说话总结计算公式：

怪异盒子模型的大小： width和height设置为多大就多大。

总结

两种盒子模型：标准盒模型、怪异盒模型。

1. 区别在于width和height。标准盒模型width和height指的是content的宽度和高度，怪异盒模型width和height指的是content+padding+border。
2. 可通过box-sizing 设置。content-box(设置为标准盒模型)、border-box(设置为怪异盒模型)

ok 就很明了！！！还不理解找我

position定位

四个取值：

1. static(默认值)
2. relative
3. absolute
4. fixed

废话少说上代码：

    
    
    
复制代码

一个一个来:

1. static 默认值运行代码，就是static的效果了

2. relative

.hello {        position:relative;        width:200px;        height:200px;        left:100px;        top:100px;        background-color:red;    }复制代码

设置position:relative;效果：

解释一波： 红框top、left移动了100px。蓝框不动，这儿不动说明一个问题，红框的位置还在它没有脱离文档流，脱离了蓝框就该往上跑了，知识点理解一下。还有就是红框的移动是相对于它移动之前的位置就行移动的。

3. absolute

.hello {    position:absolute;    width:200px;    height:200px;    left:100px;    top:100px;    background-color:red;}复制代码

看图说话：

很直观是蓝框往上跑了，说明红框那个位置已经不在了。

再举个栗子,修改代码

    
    
    
     
    
复制代码

看图说话

总结一波：

一个元素position设置absolute时，这个元素的位置就是以他父代元素position不为static的元素作为参考，如果他的祖先元素position都是static那就以html元素作为参考。刚刚红色方块的情况就是他父代元素没有position不为static的元素，就以html元素为参考

4. fixed

    
    
    
     
    
复制代码

看图说话：

运行代码可以随便滚动一下，如果说absolute还受到relative的限制，那么fixed就是无法无天，脱离文档流，就不动。

总结撒花