CSS 盒模型小记

CSS 盒模型

我们可以将网页中所有的 HTML 元素都看作是一个个的“盒子”。

类比现实生活中的盒子，HTML 元素盒子的内容相当于盒子内的物品，内边距相当于盒子内物品和外壳之间的距离，边框就相当于盒子表面，元素和元素之间的外边距就相当于盒子之间的距离，由内及外就是：

• 内容（content）：元素的内容 width/height
• 内边距（padding）：内容和边框之间的距离
• 边框（border）：元素自己的边框
• 外边距（margin）：元素和其他元素之间的距离

width/height

用于设置内容的宽高。相关的属性有：

• width：内容宽度
• max-width：内容最大宽度
• min-width：内容最小宽度
• height：内容高度
• max-height：内容最大高度
• min-height：内容最小高度

padding

padding 属性用于设置元素的内边距, 也就是元素内容和边框之间的距离。

它是一个复合属性，按照上右下左顺时针的顺序设置内边距：

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

padding 属性的写法有多种：

• padding: 10px 相当于同时设置 4 个方向上的内边距；
• padding: 10px 20px 相当于设置上下内边距为 10px，左右内边距为 20 px；
• padding: 10px 20px 30px 相当于设置上内边距为 10px，下内边距为 30px，左右内边距为 20 px；

border

用于设置元素边框的尺寸，样式和颜色。

• border-width：尺寸单位都可以写这里
• border-style：最常用的就是 solid，其他的还有 none(默认值)，dashed(虚线)，dotted(斑点) 等等
• border-color：颜色单位都可以写这里

这三个属性属于复合属性，因为边框是上下左右四条边，在设置时是按照上、右、下、左的顺序去设置。比如：

border-width: 10px;

相当于设置了：

border-top-width: 10px;
border-top-width: 0px;
border-top-width: 10px;
border-top-width: 0px;

border-style 和 border-color 也是如此。

最常用的还是 border 属性，它是上面三个属性的复合属性：

border: border-width border-style border-color;

在书写时顺序任意，没有写的就采用默认值。

如果只想设置某一条边，也可以：

border-top: 5px solid gray;

margin

margin 属性用于设置元素的外边距。

它和 padding 的用法一样，按照上、右、下、左的顺序去设置：

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

在垂直方向上使用 margin 有两个现象需要注意。

margin 折叠

对于垂直排列两个兄弟元素，上面的设置 margin-bottom，下面的设置了 margin-top，则这两个 margin 会发生折叠（collapse ）现象，取值大的一方生效。

解决方法是只在其中一个盒子上设置 margin。

margin 传递

对于父子元素，如果父子元素之间没有使用 padding 隔绝，子元素设置了 margin-top，会传递给父元素。

此时也会发生折叠现象，也就是如果父元素也设置了 margin-top，则会取值大的一方生效。

解决方法就是给父元素设置 border 或者 padding，或者触发 BFC。

元素类型

在 HTML 中，用的最多的两类元素就是块级元素和内联元素，它们对应的盒子就是块级盒子（block box）和内联盒子（inline box）。

块级元素的特性是：

• 可以设置宽高，边框和内外边距

内联元素的特性是：

• 不能设置宽高，大小由内容撑开
• 可以设置水平方向的内外边距，会生效
• 可以设置垂直方向上的内外边距但不会和其他内联元素产生距离

由此可知，只有块级盒子才能完整使用盒模型的特性。内联盒子只使用盒模型的部分特性。

标准盒模型

在标准盒模型中，盒子的实际大小等同于 width + padding + border ，比如：

.box {
  width: 200px;
  height: 150px;
  margin: 20px;
  padding: 10px;
  border: 5px solid black;
}

则这个盒子的实际宽度是 200 + 10 * 2 + 5 * 2 = 230px，实际高度为 150 + 10 * 2 + 5* 2 = 180px。

margin 影响的是盒子外部空间，所以在计算盒子本身大小时不将其计算在内。

使用标准盒模型时，如果修改了 padding 或者 border ，就会造成盒子尺寸发生变化，为了让盒子保持原来的效果不影响其他盒子，就需要去调整内容 width。这会带来一些繁琐。所以还有一种 IE 盒模型供我们使用。

IE 盒模型

IE 盒模型是 IE8以下浏览器所采用的盒模型，它的特点是所设置的 width 就是盒子的尺寸，而内容的宽度等于 width - border - padding。

CSS3 提供了一个box-sizing 属性，默认值是 content-box，也就是设置为标准盒模型。

浏览器默认会使用标准模型。如果需要使用 IE 盒模型，可将属性值设为 border-box：

.box {
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  margin: 20px;
  padding: 10px;
  border: 5px solid black;
}

浏览器就会使用 border-box 来定义区域，从而设定您想要的大小。可以看到，盒子包含了 border 和 padding，动态计算出内容 width 为 170 px。

标准盒模型和 IE 盒模型的对比

标准盒模型：

实际宽度 = width + padding + border

实际宽度 = height+ padding + border

IE 盒模型：

实际宽度 = width

实际宽度 = height

总结

本文介绍了 CSS 盒模型，这是使用 CSS 进行页面布局的基础，主要通过 width ，padding，border 和 margin 合理设置盒子的尺寸，展示内容。

在使用 margin 时，会出现 margin 塌陷的现象，可通过开启 BFC 来解决。

CSS3 提供了 box-sizing 属性，可用于切换标准盒模型和 IE 盒模型，可根据需要进行设置。