共计 1796 个字符，预计需要花费 5 分钟才能阅读完成。
浏览工夫：6min
指标：学习盒模型的根本实践，理解盒装模型的工作原理，理解盒模型与代替模型的区别以及如何进行切换。
前置条件：HTML 和 CSS 基础知识。
在 CSS 中，所有的元素都被一个个的“盒子（box）”突围着，了解这些“盒子”的基本原理，是咱们应用 CSS 实现精确布局、解决元素排列的要害。
什么是 CSS 盒模型?
残缺的 CSS 盒模型利用于块级盒子，内联盒子只应用盒模型中定义的局部内容。模型定义了盒的每个局部 —— margin, border, padding, and content —— 合在一起就能够创立咱们在页面上看到的内容。
盒模型的各个局部
CSS 中组成一个块级盒子须要:
- Content box
这个区域是用来显示内容，大小能够通过设置width和height。 - Padding box
突围在内容区域内部的空白区域；大小通过padding相干属性设置。 - Border box
边框盒包裹内容和内边距。大小通过border相干属性设置。 - Margin box
这是最里面的区域，是盒子和其余元素之间的空白区域。大小通过margin相干属性设置。
如下图：
规范盒模型
在规范模型中，如果你给盒设置 width 和 height，理论设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。
假如定义了 width, height, margin, border, and padding:
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}如果应用规范模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
注: margin 不计入理论大小 —— 当然，它会影响盒子在页面所占空间，然而影响的是盒子内部空间。盒子的范畴到边框为止 —— 不会延长到 margin。
块级盒子 和 内联盒子
在 CSS 中咱们宽泛地应用两种“盒子”—— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在 页面流 （page flow）和 元素之间的关系 方面体现出不同的行为:
块级盒子的个性
- 盒子会在内联的方向上扩大并占据父容器在该方向上的所有可用空间，在绝大数状况下意味着盒子会和父容器一样宽。
- 每个盒子都会换行。
width和height属性能够发挥作用。- 内边距（padding）, 外边距（margin）和 边框（border）会将其余元素从以后盒子四周“推开”。
除非非凡指定，诸如题目 (
<h1>等)和段落 (<p>) 默认状况下都是块级的盒子。
内联盒子的个性
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被利用然而不会把其余处于
inline状态的盒子推开。 - 程度方向的内边距、外边距以及边框会被利用且会把其余处于
inline状态的盒子推开。
用做链接的
<a>元素、<span>、<em>以及<strong>都是默认处于inline状态的。
咱们通过对盒子 display 属性的设置，比方 inline 或者 block，来管制盒子的内部显示类型。
补充: 外部和内部显示类型
在这里最好也解释下 外部 和 内部 显示类型。如上所述，css 的 box 模型有一个内部显示类型，来决定盒子是块级还是内联。
同样盒模型还有外部显示类型，它决定了盒子外部元素是如何布局的。默认状况下是依照 失常文档流 布局，也意味着它们和其余块元素以及内联元素一样(如上所述).
然而，咱们能够通过应用相似 flex 的 display 属性值来更改外部显示类型。如果设置 display: flex，在一个元素上，内部显示类型是 block，然而外部显示类型批改为 flex。该盒子的所有间接子元素都会成为 flex 元素，会依据 弹性盒子 （Flexbox] 规定进行布局。
应用浏览器开发工具查案盒模型
您的 浏览器开发者工具能够使您更容易地了解 box 模型。如果您在 Firefox 的 DevTools 中查看一个元素，您能够看到元素的大小以及它的外边距、内边距和边框。这是一个很好的查看元素大小的形式，能够便捷的判断您的盒子大小是否合乎预期 !
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！