CSS盒模型

盒子模型

所有HTML元素都可以被看作盒子，便于布局，它主要由四个部分组成，从外到内分别是 外边距(margin)、边框(border)、内边距(padding)、内容(content)

在浏览器中审查元素即可看到模型，其中最外层橘黄色的部分就是外边距(margin)，第二层浅黄色的即为边框(border)，第三层绿色的部分是内边距(padding)，而最中间的蓝色就是实际的内容区域(content)

（该图来自于Google浏览器审查）

而在一般情况下，通常css中设置元素的width和height属性就是设置了内容区域(content)的大小，而实际的盒子大小则是由四个部分相加而成的，这也是标准盒模型的规定，但既然有标准的，那一定有不标准的，也就是怪异盒模型

标准盒模型

标准盒模型是由W3C规范的盒子模型，这种情况下元素的内容大小是由width和height决定的，而盒子的实际宽度=margin-left + border-left +padding-left +width +padding-right +border-right +margin-right ，高同理

这种盒模型也是大部分浏览器通用的

怪异盒模型(IE盒模型)

在该模式下，width是包含内容，内边距，边框的总和，即 width = border + padding +content， 而盒子的实际宽度 = margin-left + width + margin-right，高同理

这种盒模型只有在IE中存在