Skip to main content

WTF CSS 极简教程: 4. 盒模型

WTF CSS 教程，帮助新人快速入门 CSS。

推特：@WTFAcademy_ ｜ @0xAA_Science

WTF Academy 社群： 官网 wtf.academy | WTF Solidity 教程 | discord | 微信群申请

所有代码和教程开源在 github: github.com/WTFAcademy/WTF-CSS

这一讲，我们来介绍 CSS 盒模型。在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

CSS盒模型​

CSS盒模型是CSS布局的基础，它描述了元素所占空间的方式。一个盒模型包含四个主要部分，从内到外分别是：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

内容 (Content)​

内容区域就是页面上看到的实际内容，包括文本、图片等。我们可以通过 width 和 height 属性来设置内容区域的宽和高。

div {
    width: 200px;
    height: 100px;
}

内边距（Padding）​

内边距是内容区域到边框之间的空间。内边距是透明的，也就是说它不会被背景色或背景图片覆盖。我们可以使用 padding 属性来设置内边距。它的值必须大于等于0。

div {
    padding: 10px; /* 上下左右的内边距都为10px */
}

你还可以分别设置上下左右的内边距：

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

语法​

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;

padding 属性接受 1~4 个值。每个值可以是 <length> 或 <percentage>。取值不能为负。

  • 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
  • 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

可取值​

  • length 以固定值为内边距。
  • percentage 相对于包含块的宽度，以百分比值为内边距。

示例​

HTML

<h4>此元素有合适的内边距。</h4>

<h3>此元素的内边距很 大！</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

边框 (Border)​

边框包裹着内边距和内容区域。边框是可见的，我们可以设置其宽度、样式和颜色。使用 border 属性可以设置边框。

div {
    border-width: 1px; /* 边框宽度 */
    border-style: solid; /* 边框样式 */
    border-color: #000; /* 边框颜色 */
}

也可以将这三个属性合并为一个 border 属性：

div {
    border: 1px solid #000;
}

外边距（margin）​

外边距是边框到其他元素的距离。外边距是透明的。我们可以使用 margin 属性来设置外边距。

div {
    margin: 10px; /* 上下左右的外边距都为10px */
}

你还可以分别设置上下左右的外边距：

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

语法：​

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

margin 属性接受 1~4 个值 。每个值可以是 <length>，<percentage>，或 auto。取值为负时元素会比原来更接近临近元素。

  • 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
  • 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

可取值：

  • length 以固定值为外边距。
  • percentage 相对于包含块的宽度，以百分比值为外边距。
  • auto 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

示例​

HTML

<div class="center">此元素会被居中。</div>

<div class="outside">此元素会显示在包含块之外。</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

外边距折叠问题​

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom 为 50px。第二段的 margin-top 为 30px。因为外边距折叠的概念，所以框之间的实际外边距是 50px，而不是两个外边距的总和。如下图：

有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。相关更多信息，请参阅外边距重叠。现在首先要记住的事情是，外边距会折叠这个事情。如果你用外边距创建空间而没有得到你想要的效果，那这可能就是这个原因。

更多margin用法。

标准盒模型和替代盒模型​

CSS盒模型是网页设计中的基础概念，用于定义和控制元素的大小和空间。然而，早期的Internet Explorer浏览器和现代的标准浏览器对于盒模型有不同的理解，这就导致了标准盒模型和IE盒模型的出现。

标准盒模型​

在标准的CSS盒模型中，元素的width和height属性只包括内容(content)的宽度和高度，不包括边框(border)和内边距(padding)。

举个例子，如果你设置一个元素的width为350px，padding为25px，border为5px，那么这个元素在页面上占据的实际空间宽度为410px（350px的内容宽度 + 2 25px的左右内边距 + 2 5px的左右边框）。

div {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

替代（IE）盒模型​

而在替代盒模型（也被称为IE盒模型或怪异盒模型）中，元素的width和height属性包括内容(content)、边框(border)和内边距(padding)。

继续上面的例子，如果你在IE盒模型中设置一个元素的width为350px，padding为25px，border为5px，那么这个元素在页面上占据的实际空间宽度仍然是350px。这个宽度已经包括了内容、边框和内边距。

改变盒模型​

为了解决这种差异，并允许开发者自由选择使用哪种盒模型，CSS引入了box-sizing属性（默认浏览器会使用标准模型）。

/* 使用标准盒模型 */
box-sizing: content-box;

/* 使用IE盒模型 */
box-sizing: border-box;

总结​

这就是你需要了解的关于盒模型的大部分内容。如果以后你发现对于盒模型的布局仍有困惑，你将会回来温故这些内容。