CSS盒子模型概念及讲解

在 CSS 布局中 CSS 盒子模型是其中的一项基础且重要的概念。CSS 盒子模型描述了网页元素在页面上所占空间的计算方式，小到元素定位和排列，大到网页整体布局设计，CSS 盒子模型都会参与其中，是前端开发者必须掌握的概念。

CSS盒子模型组成

CSS中会把所有的HTML元素都看作是一个 "盒子"，所有的样式也都是基于这个盒子。

margin（外边距）：盒子与其他相邻元素的空白区域。
border（边框）：盒子中围绕内容和内边距的线条。
padding（内边距）：内容与边框之间的空白区域。
content（内容）：元素中的文本或后代元素都是其内容

在盒子模型中可以将它们的组成理解为： 盒子的大小 = content + padding + border。

Note：外边距margin不会影响盒子的大小，但会影响盒子的位置。

开发者工具查看盒模型

在开发中，我们通过打开开发者工具查看元素的盒模型：

在开发者工具中点击选择元素。
鼠标点击要查看的元素。
在 Elements - Styles 中最底部即可查看元素盒模型。

CSS盒子模型样式

��们通过一个简单的 CSS 盒子模型样式直观感受盒子模型的呈现效果。

html 复制代码

<div id="app">hello world</div>

css 复制代码

div {
  /* content 内容区 */
  width: 300px;
  height: 300px;

  /* padding 内边距 */
  padding: 20px;

  /* border 边框 */
  border: black dotted 10px;

  /* margin 外边距 */
  margin: 50px;
  
  background-color: gray;
}

我们依次解析 CSS 样式：

内容区为宽和高相同的300px，并且它背景颜色为灰色。
内边距为20px，这里体现在虚线边框和内容hello world之间的距离。
边框为黑色、点状、10px粗的线条。
外边距为50px，可以看到整个灰色区域的盒子与浏览器视窗之间的留白。
盒子的背景颜色为灰色，它默认地就是覆盖整个盒子模型的面积大小。

CSS内容区样式

CSS盒子模型中内容区的样式示例：

width：元素的 CSS 像素宽度。
min-width：元素的最小 CSS 像素宽度。
max-width：元素的最大 CSS 像素宽度。
height：元素的 CSS 像素高度。
min-height：元素的最小 CSS 像素高度。
max-height：元素的最大 CSS 像素高度。

css 复制代码

div {
  width: 500px;
  min-width: 100px;
  max-width: 800px;

  height: 50px;
  min-height: 20px;
  max-height: 100px;
}

CSS内边距样式

CSS盒子模型中内边距的样式示例：

padding-left：元素的左内边距。
padding-right：元素的右内边距。
padding-top：元素的上内边距。
padding-bottom：元素的下内边距。
padding：可以通过组合分别实现不同的内边距样式。

css 复制代码

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

  /* 同时影响：上下左右 */
  padding: 10px;

  /* 影响：上下 左右 */
  padding: 10px 20px;

  /* 影响：上 左右 下 */
  padding: 10px 20px 30px;

  /* 影响：上 右 下 左 */
  padding: 10px 20px 10px 30px;
}

注意：当给行内元素设置的上下内边距太大时，可能会覆盖到其他元素：

CSS盒子边框样式

CSS盒子模型中边框的样式示例：

border-width：边框的宽度。
border-style：边框的样式，如实线solid，点线dotted，虚线dashed，双线double，无none。
border-color：边框的颜色。
border：可以通过组合简写的形式实现边框样式。

css 复制代码

div {
  /* 宽度 */
  border-width: 1px;
  border-left-width: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  
  /* 样式 */
  border-style: solid;
  border-left-style: solid;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;

  /* 颜色 */
  border-color: black;
  border-left-color: black;
  border-top-color: black;
  border-right-color: black;
  border-bottom-color: black;

  /* 组合样式 */
  border: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

CSS盒子外边距

CSS盒子模型中外边距的样式示例：

margin-left：元素的左外边距
margin-right：元素的右外边距
margin-top：元素的上外边距
margin-bottom：元素的下外边距
margin：可以通过组合简写的形式实现元素外边距样式。

css 复制代码

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

注意：margin样式使用时的一些特点：

子元素的margin相对于父元素的content。
行内元素的左右margin会生效，上下margin不会产生效果。
块级元素的左右margin为auto，可以呈现水平居中（行内元素无效）。
margin的值可以是负数。

CSS样式继承

需要注意的是在盒子模型相关的一些样式是不可继承的：

子元素可继承父元素的：字体属性、文本属性（除了vertical-align）、文字颜色等
不可继承的：边框、内外边距、背景、宽高、溢出等

box-sizing

前面讲盒子的大小 = content + padding + border，这是我们直观的感受。同时在盒子模型的样式中有一个box-sizing属性容易与之混淆。box-sizing属性主要决定的是元素宽高的计算边界。 box-sizing属性有以下两个主要的值：

content-box：这是默认值。在此模式下，元素的宽度和高度仅指内容区域的宽度和高度，不包括内边距（padding）和边框（border）。
border-box：在这种模式下，元素设定的宽度和高度包括了内容、内边距和边框。也就是说，指定的宽度和高度是元素最终呈现的可见区域的尺寸。

同样是CSS盒子模型样中的例子，另外设置一个box-sizing: border-box的元素。

html 复制代码

<d>
  <div id="app">hello world</div>
  <div id="app2">hello world2</div>
</d>

css 复制代码

div {
  /* content 内容区 */
  width: 300px;
  height: 300px;

  /* padding 内边距 */
  padding: 20px;

  /* border 边框 */
  border: black dotted 10px;

  /* margin 外边距 */
  margin: 50px;
  
  background-color: gray;
}

#app2 {
  box-sizing: border-box;
}

d {
  display: flex;
  align-items: center;
}

如下图，左边的是默认的box-sizing: content-box，右边的则是box-sizing: border-box。可以看到左边的内容区宽度和高度正好容纳了右边的整个盒子大小，也就是说右边盒子的300px宽和高是以边框作为计算边界的。