前端开发-CSS盒子模型

css盒子模型是css中一个重点也是难点，因为这个盒子模型与定位属性会设计到布局的问题
盒子模型具有
1.边框（border）
2.内边距（padding）
3.外边距（margin）这三个属性

盒子模型一般分为两种：IE盒子模型和标准盒子模型

IE盒子模型
所谓IE盒子模型，就是之前IE浏览器实现的一种怪异的盒子模型，怎么怪异呢？当我们这样设置的时候:

div {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -mox-box-sizing:border-box;
    height: 200px;
    width: 200px;
    background: #242424;
    margin: 10px;
    padding: 10px;
    border: 2px solid #24ce70;
}

理论上我们想要设置的就是content box的宽高嘛，但是IE在解析的时候会按照这个规则解析：

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

通俗讲：IE盒子模型宽高就是内容(content)，内填充(padding)，边框(border)。如果盒子模型设定了固定的width，如果设置border，padding任何一个属性的宽度，将会压缩内容区，让内容区变小

内容1.png
IE盒子模型.png

标准盒子模型
标准的css盒子模型宽高就是内容区宽高；

div {
    box-sizing: centent-box;
    -webkit-box-sizing:centent-box;
    -mox-box-sizing:centent-box;
    height: 200px;
    width: 200px;
    background: #242424;
    margin: 10px;
    padding: 10px;
    border: 2px solid #24ce70;
}

如果盒子模型设定了固定的width，则这个width指的就是内容的width了，如果再添加border，padding的值，这时候总的宽度就会超过设置的宽度，这个需要注意，不然就会影响到了网页布局了

标准盒子模型.png

IE盒子模型和标准盒子模型的设置
CSS3加了个box-sizing属性，变相承认了这两种盒子都对，不过box-sizing默认属性就是content-box，即标准盒子模式，IE盒子模型呢，是属性border-box。

浏览器兼容性
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
}