CSS盒模型

什么是CSS盒模型？

残缺的 CSS 盒模型利用于块级盒子，内联盒子只应用盒模型中定义的局部内容。模型定义了盒的每个局部 —— margin, border, padding, and content ，合在一起就是在页面上看到的内容。为了减少一些额定的复杂性，有一个规范盒模型和代替（IE）盒模型。

组成盒模型须要的内容：

  • content：内容区域，通过width和height设置。
  • padding：内边距，内容区域外的空白区域，通过padding设置。
  • border：边框，包裹内容区域和内边距，通过border设置。
  • margin：外边距，盒子和其余元素间接的空白区域，通过margin设置。
margin不会计入盒子的大小

规范盒模型

浏览器默认应用的是规范盒模型。

给规范盒模型设置width和height，理论设置的是content内容区域，盒子的宽高须要再加上padding和border。

  • 盒子的宽度 = width + (padding 2) + (border 2)
  • 盒子的高度 = height + (padding 2) + (border 2)
  • 设置属性 box-sizing: content-box

规范盒模型示例

div {    width: 200px;    height: 200px;    padding: 10px;    border: 5px solid red;    margin: 10px;}

以后规范盒模型div的宽度为230px = 200 + 10 + 10 + 5 + 5，高度为230px = 200 + 10 + 10 + 5 + 5。

代替（IE）盒模型

IE浏览器默认应用代替盒模型，IE8+反对应用box-sizing进行切换

如果须要应用代替盒模型，设置box-sizing: border-box属性即可。

盒子的宽度和高度和设置的width和height一样，只是内容区域的宽度和高度须要减去边框和内边距。

  • 盒子的宽度 = width
  • 盒子的高度 = height
  • 设置属性 box-sizing: border-box

代替盒模型示例

div {    width: 200px;    height: 200px;    padding: 10px;    border: 5px solid red;    margin: 10px;    box-sizing: border-box;}

以后代替盒模型div的宽度为200px，高度为200px。

补充：margin能够设置负值，padding不能设置负值，必须是>=0的值。