关于css:玩转CSS基础CSS盒模型

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 的值。