# 盒模型

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

# 1、块级盒子（Block box）

一个被定义成块级的（block）盒子会表现出以下行为:

除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

对于块级格式环境，规范内规定：

在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。

一个盒子对外显示为 inline，那么他的行为如下:

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

对于内联格式区域中的元素：

在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

盒模型的各个部分：

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。

IE 盒模型又称怪异盒模型

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

/* 当设置为 box-sizing:content-box 时，将采用标准模式解析计算，也是默认模式；
当设置为 box-sizing:border-box 时，将采用怪异模式解析计算； */
.box {
  box-sizing: border-box;
}

1
2
3
4
5

只要在文档首部加了 doctype 申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式

如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性，正如下面的例子。

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

1
2
3
4
5
6

.box {
  /* 外边距 */
  margin: 3px 4px;
  /* 内边距 */
  padding: 6px 8px;
  /* 边框 */
  border: 1px solid #000;
}

1
2
3
4
5
6
7
8

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

https://www.cnblogs.com/sun-web/p/10694697.html