网页就是一堆箱子组成的概念：CSS 盒模型

为什么要学习盒模型？

如果你对于网页有这么多间距可以被调整所困惑，或是初入门 CSS 我都非常推荐要先理解 CSS 的盒模型概念，唯有了解盒模型如何运作才能学习更多网页切版布局的技巧。

用很多的盒子来构建网页

网页元素就像很多盒子相互嵌套

举一个简单的例子来说，每个 HTML 元素就像是一个盒子，有开头与结尾。每个 HTML 标签 (或者可以说是 DOM 元素) 都具备与版面布局相关的属性，详细有以下几种，将会以由内到外来说明：

<!--盒子外-->
<div>
  <!--盒子内-->
</div>
<!--盒子外-->

内容 Content

通常是一些文字内容、其他元素或写死的宽高。举例来说撰写宽高各 100px就给该元素创造了内容空间。

div {
  width: 100px;
  height: 100px;
  background-color: #87b2bc;
}

内距 Padding

在内容之外是内距，藉由内距可以在不改变内容的状态下设置内容外要多少留白。藉由注明清楚内容外要预留多少空间，可以帮助我们建立一个内容留白分割的模型，在撰写尺寸浮动的网页的时候也会轻松许多，不用在撰写元素尺寸的时候还要连带考量到留白尺寸。

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  background-color: #87b2bc;
}

边框 Border

为该元素添加边框，要留意边框也是计算在元素的尺寸之内的。

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  background-color: #87b2bc;
  border: 100px solid #e3c381;
}

外距 Margin

向外推挤的留白，与内距非常类似，差别在于外距并不计算在该元素的尺寸之内，

div {
  width: 100px;
  height: 100px;
  padding: 100px;
  margin: 100px;
  background-color: #87b2bc;
  border: 100px solid #e3c381;
}

额外知识

现在你明白何谓 CSS 盒模型了！这里有一些与其相关，额外留意的特性。

外距崩塌 Margin Collapse

在 HTML 中相邻的元素将会导致外距崩塌，意思是指两者的外距会相互抵消，剩下最大的外距为主。

.top-div {
  margin: 30px;
  background-color: orange;
  height: 100px;
  width: 100px;
}

.bottom-div {
  margin: 40px;
  background-color: skyblue;
  height: 100px;
  width: 100px;
}

你会发现在以上的例子中两个相邻的元素之间只有 40px 的外距，这就是所谓的外距崩塌！此外要额外注意的是如果使用像是： flex、 grid……不是在普通的文件流向来布局的方式，此项特性将不会存在。

Box Sizing🔗 属性

.div {
  box-sizing: border-box;
  box-sizing: content-box;
}

box-sizing是一种 CSS 属性，用于改变盒模型的计算方式，具体来说有两种选项：

• context-box- 内容的尺寸相等于宽高属性。默认所有元素都会使用该方式来计算。
• border-box- 内容尺寸相等于宽高属性与内距边界的合。

结论

• 内容 Content - 元素的内容物
• 内距 Padding - 向内推挤的留白
• 外框 Border - 元素的边框
• 外距 Margin - 向外推挤的留白

盒模型是 CSS 中数一数二重要的核心概念之一，通过学习它将会对你布局、计算版面有极大的帮助。如果这篇文章过后还是需要后续回温这段知识你可以打开浏览器的开发工具，都有很方便的视觉引导可供开发时参考。

参考资料

CSS Box Model - Web Dev Simplified Blog🔗