[快速入门前端 26] CSS Box Model 盒子模型

Box Model

Box Model 其实就是把元素比喻为我们很常见的盒子，如下图我们可以看到主要分为四个部分：盒子中的内容物 (电脑)、电脑与盒子间的空隙 (内边距)、盒子本身的厚度、以及盒子外与图片边界的距离 (外边距)。在 CSS 中，我们分别称呼他们为：Content (内容)、Padding (内边距)、Border (边框)、及 Margin (外边距)。

如上所说，CSS 会把每个 HTML 元素都看做一个个盒子，由内而外分别是 Content (内容)、Padding (内边距)、Border (边框) 和 Margin (外边距)，CSS 的样式设定也是基于盒子来指定。在开发中，我们可以透过开发者工具来观察该元素的 Box Model。

打开开发者工具后选择指定元素，滑倒最下方就可以看到该元素的 Box Model 分布，且滑鼠移动到盒子内任一项都会在页面上有颜色标示

content 内容

Content 中会包然该元素的原本或其后代元素，当我们设定宽度及高度时，就是基于内容去指定的。

我们在 CSS 中指定的 width 和 height 是指 content 的大小，而整个元素 (盒子) 的大小则是 content + padding + border

padding 内边距

该元素 (盒子) 边框与内容的距离
可以设置元素的内边距，通常使用複合属性 padding 控制，每边内边距不同时也可以单独使用 padding-top、padding-bottom、padding-left 或 padding-right 。

padding 不可为负inline 元素可以使用 padding-top 及 padding-bottom，但不会影响旁边元素的位置，所以可能造成元素覆盖

语法：

padding: 四边内边距;padding: 上下内边距 左右内边距;padding: 上内边距 左右内边距 下内边距;padding: 上内边距 右内边距 下内边距 左内边距; /* 依顺时针方向 */padding-top: 10px; /* 设定上内边距 */

範例：

/* 只写一个值，元素四个内边距都是 20px */padding: 10px;/* 写两个值，分别为上下内边距(10px)和左右内边距(20px) */padding: 10px 20px;/* 写三个值，分别为上内边距(10px)、左右内边距(20px)、和下内边距(30px) */padding: 10px 20px 30px;/* 写四个值，分别为上内边距(10px)、右内边距(20px)、下内边距(30px)、和左内边距(40px) */padding: 10px 20px 30px 40px;

border 边框

border 是指该元素 (盒子) 的边框，我们之前介绍表格时有在这篇文章 中介绍过边框的三个属性 border-width、border-color、border-style 和複合属性 border ，这四种方法主要是指定元素整个边框的样式大小和颜色。当我们需要为每一个边的边框都设定不同样式时，可以将原本的属性细分为 top、right、left、bottom 使用，利如 border 可再细分为 border-top、border-right、border-bottom、border-left，其他的属性也同理。

範例：

/* 以複合属性 border 为例 *//* 所有边框相同样式*/border: 5px dotted yellow;/* 分别设定不同样式 */border-top: 10px dotted yellow;border-right: 8px solid orange;border-bottom: 12px double gray;border-left: 10px groove green;

margin 外边距

margin 是指该元素 (盒子) 与外面其他元素边界的距离，通常若有指定元素的宽高时， margin 不会影响盒子的大小，只会影响盒子在页面中的位置。

语法：

margin: 四边外边距;margin: 上下外边距 左右外边距;margin: 上外边距 左右外边距 下外边距;margin: 上外边距 右外边距 下外边距 左外边距; /* 依顺时针方向 */margin-top: 10px; /* 只设定上外边距 */

因为 margin 通常用于指定元素间的位置和排版，所以用法上比 padding 複杂，以下整理几个重点：

inline 元素设定 margin-top 和 margin-bottom (上下外边距) 会失效margin auto (自动) 有 最远距离 的意思，当我们对元素设定 margin-left: auto 时，元素会靠右 (左外边距越远越好)。依 margin auto 的特性，我们经常使用 margin: 0 auto; 将元素水平置中margin 可以为负

範例：
将元素设定为 margin-left: auto;、margin-right: auto;、margin: 0 auto; 会呈现水平置右、置左、置中的效果。

margin 延伸出的问题

margin 合併现象

当上下相邻的两元素分别设定下外边距 (margin-bottom) 及上外边距 (margin-top) 时，会出现合併现象，两者的外边距会重叠。
如下图，左边两个橘色和绿色的方框分别有 50px 下边距和 50px 上边距，照理来说两者间应该总共要距离 100px 才对，可页面上却合併成为间距 50px；右边同理，在上下边距分别为 50px、70px 的状况下，两者的间距同样合併为 70px (较大者)。

margin 塌陷问题

塌陷问题是指当我们对父元素中第一个子元素设定 margon-top，这个样式的设定会跑到父元素上，对父元素进行作用。
範例：
右边指定子元素 1 的上外边距为 100px 时，会作用于父元素，造成整个蓝色正方向往下移

解决方法：

将父元素加入 border 和 padding (不可为 0)将父元素设定为 overflow: hidden (推荐)

---

＊ overflow 不只可以解决塌陷问题，也经常被用来处理内容溢出元素时的处理，这部分我们后面会讲到

内容盒子和边框盒子

前面有说到当我们指定元素的 height 和 width 时，指的是 box model 中的内容区域，而这会产生一个状况，就是当我们需要对该元素设定 padding 或 border 时，元素会变得比我们预想的要大 (因为元素整体的实际大小为 content 区 + padding + border)。

如下图所见，蓝色和绿色都是宽高 200px 的正方形，但绿色的面积却比蓝色的大很多，这是因为绿色正方形多了 25px 的 padding。

那要怎么解决这个问题呢，有两种方法：

将宽高设定为减去 padding 的长度，也就是 150px (高度-上padding-下padding、宽度-左padding-右padding)，当然如果还有 border 的话也要减去 border 的宽度将元素设定为 box-sizing: Border-box，让宽高作用于元素边框外缘的範围内

box sizing

属性名：box sizing
属性值有两种：

content-box：预设，宽高作用在 content (内容) 範围border-box：宽高作用在边框外缘的範围内，也就是 content+padding+border 的大小

範例：
设定 box-sizing: border-box; 后，padding 和 border 不会影响元素整体的大小，而是以宽高减边框再减内边距来计算内容区的大小。

---

上一篇：[快速入门前端 25] HTML 元素的 Display 方式
下一篇：[快速入门前端 27] Overflow 和 Visibility
系列文章列表：[快速入门前端] 系列文章索引列表