前言：
眼前同学们对“css盒子模型的概念和特点”大约比较注重，你们都想要分析一些“css盒子模型的概念和特点”的相关资讯。那么小编在网络上收集了一些关于“css盒子模型的概念和特点””的相关内容，希望看官们能喜欢，各位老铁们快快来了解一下吧！简单点来说就是每个标签是一个方块，这个方块包裹着数个小方块，如同盒子一层层的包裹着，这就是盒模型
盒模型：IE盒模型，W3C标准盒模型。
盒模型构成： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
IE的content部分把 border 和 padding计算了进去,width=content+border+padding;
在ie8+浏览器中盒模型可以由box-sizing控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在IE8以用以一中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。
content-box（标准盒模型）
width = 内容的宽度
height = 内容的高度
border-box（IE盒模型）
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
甩个代码以便演示：）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">.box {width: 300px;height: 300px;background: #a0fff2;}</style></head><body> <div class="box"></div></body></html>css盒子模型示意图
css盒子模型示意图
此时，盒子大小就是content的大小。
.box { margin:20px auto 0; padding:20px; width: 200px; height: 200px; background: #a0fff2;}css盒子模型示意图
css盒子模型示意图
此时，盒子的长宽变成了240x240，显然，padding是能够改变盒子的大小的，这时盒子大小就等于content+padding。
.box { margin:20px auto 0; padding:20px; width: 200px; height: 200px; background: #a0fff2; border:10px solid #ccc6aa;}css盒子模型示意图
css盒子模型示意图
此时，盒子的长宽变成了260x260，所以这时盒子大小就等于content+padding+border。
注意：虽然盒模型由内容(content)、填充(padding)、边界(margin)、 边框(border)构成：但盒子的大小不包括margin,若包括，拿上面的例子来说，我们会发现盒子的大小为长度为260，而不是280。所以盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小
给上图的box设置box-sizing属性为border-box
.box { margin:20px auto 0; padding:20px; width: 200px; height: 200px; background: #a0fff2; border:10px solid #ccc6aa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}css盒子模型示意图
css盒子模型示意图
发现无论我们怎么改border和padding盒子大小始终是定义的width和height
编写页面代码时应尽量使用标准的W3C模型(需在页面中声明!DOCTYPE)，避免多个浏览器对同一页面的不兼容。因为若不声明!DOCTYPE，IE浏览器会将盒子模型解析为IE盒子模型，FireFox解析为W3C盒子模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
标签： #css盒子模型的概念和特点
