盒模型

内部显示（inner display type）和外部显示（outer display type）

外部显示类型

区块盒子 (block)

决定了当前盒子和盒子外其他元素的布局方式

盒子会产生换行。
width 和 height 属性可以发挥作用。
内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。

元素：<h1> 、<p>

行内盒子 (inline)

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

元素：<a>、<span>、<em>、<strong>

行内块 (inline-block)

通过以下属性可以设置行内块盒子，结合了块盒子和行内盒子

css

display: inline-block;

它可以设置高度、宽度、内边距和外边距，但是周围的内容（文字）不会换行

内部显示类型

决定了盒子内元素的布局方式

例如，可以通过设置 display: flex; 来更改内部显示类型。该元素仍将使用外部显示类型 block 但内部显示类型将变为 flex

盒模型

CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的部分行为。

盒模型组成部分：

内容盒子(Content)：显示内容的区域；使用 inline-size 和 block-size 或 width 和 height 等属性确定其大小。
内边距盒子(Padding)：填充位于内容周围的空白处；使用 padding 和相关属性确定其大小。
边框盒子(Border)：边框盒子包住内容和任何填充；使用 border 和相关属性确定其大小。
外边距盒子(Margin)：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和相关属性确定其大小。

标准盒模型

假设一个盒子的 CSS 如下：

css

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

方框实际占用的空间宽为 410px（350 + 25 + 25 + 5 + 5）
高为 210px（150 + 25 + 25 + 5 + 5）
外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间

替代盒模型

要为某个元素使用替代模型，可添加以下属性

css

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

这时，内边距和边框不会计入宽度或高度的计算，刚刚的示例中宽度会变为 350px，高度变为 150px

要在所有元素中使用替代盒模型（这是开发人员的常见选择），请在 <html> 元素上设置 box-sizing 属性，并将所有其他元素设置为继承该值：

css

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

外边距

外边距折叠

两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。
两个负外边距会折叠，并使用最小（离零最远）的值。
如果其中一个外边距为负值，其值将从总值中减去。

边框

border-top，上边框
border-right，右边框
border-bottom，下边框
border-left，左边框
border-width，边框宽度
border-style，边框样式
border-color，边框颜色
border，可同时设置宽度、样式、颜色，例如：1px solid #000
细粒度属性：border-（方位）-（宽度样式或颜色），例如 border-top-width，表示设置上边框的宽度

内边距

内边距的值不能为负数，元素的背景会显示在内边距区域

padding-top，上外边距
padding-right，右外边距
padding-bottom，下外边距
padding-left，左外边距

盒模型 ​

外部显示类型 ​

区块盒子 (block) ​

行内盒子 (inline) ​

行内块 (inline-block) ​

内部显示类型 ​

盒模型 ​

标准盒模型 ​

替代盒模型 ​

外边距 ​

相关属性 ​

外边距折叠 ​

边框 ​

内边距 ​

盒模型