CSS 盒模型

[Ben-yby]

什么是 CSS 的盒模型

事实上，所有HTML元素可以看作盒子。在 CSS 中，==box model== 这一术语是用来设计和布局时使用。
而这个盒子，由四个部分组成：

属性	内容
margin	外边距，可以当做盒子与盒子之间的距离
border	边框，可以当做是盒子的厚度
padding	内边距，可以当做盒子边框于其中容纳物的距离
content	内容，即盒子中存放文本或图片的区域

W3C标准盒模型

box-sizing: conent-box;
当我们对一个元素设置他的width和height的时候，标准盒模型只是对content(蓝色部分)设置了宽高，那么这个元素真正的宽高就还要加上他的padding(内边距)border（边框）margin（外边距）。
公式：

• width = content(内容的宽度)
• height = content(内容的高度)

IE盒模型（怪异盒模型）

box-sizing: border-box;

widt = content + padding + border

当我们对一个元素设置他的width和height的时候，怪异盒模型把整个盒子看成是一个整体。给整个盒子一个宽高。如果你还给盒子设置了额外的边距和边框。那么中间的content蓝色部分就要受到挤压,变小。
公式：

• width = border + padding + 内容的宽度(内容的宽度)
• height = border + padding + content(内容的高度)

总结

• 标准盒模型：只设置content的大小。 IE盒模型:将整个元素看成整体设置大小。
• css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，而不加上margin。
• 我们在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样可以避免多个浏览器对同一页面的不兼容。
  因为若不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。