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