前端基础之CSS盒子模型

1.引言

理解盒子模型是css布局的重要内容，对于日常布局工作中的bug也能快速地查找理解。只有理解之后才会有创新，做个总结，构建自己的知识体系！

2.盒模型

element.style {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 20px;
}

w3c标准盒模型

content宽度=width
盒子宽度=content宽度+2padding-left+2border-left+2*margin-left

IE盒模型

content宽度=width+2padding-left+2border-left
盒子宽度=content宽度+2*margin-left

3.box-sizing

标准盒模型是w3c规定的，所以IE再怎么样，我们也得按着规矩来。
**兼容性问题：**一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

box-sizing属性：border-box ; content-box ; inherit

• border-box : 采用IE盒子模型渲染页面
• content-box：采用w3c标准盒模型渲染页面

兼容性：可见IE6、7不支持这个属性

兼容性写法：

Element {
     -moz-box-sizing: content-box;  
     -webkit-box-sizing: content-box; 
     -o-box-sizing: content-box; 
     -ms-box-sizing: content-box; 
     box-sizing: content-box; 
  }
Element {
     -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
  }

3.结束语

盒子模型，以后有重要的再补充