盒模型
盒模型决定了元素的基本几何信息，CSS 中组成一个块级盒子需要：
- Content box: 这个区域是用来显示内容，大小通过 width 和 height 相关属性设置。
- Padding box: 包裹在内容周围的内边距，大小通过 padding 相关属性设置。
- Border box: 边框用来包裹内容和内边距，大小通过 border 相关属性设置。
- Margin box: 是盒子和其他元素之间的空白区域，大小通过 margin 相关属性设置。
标准盒模型 vs 替代（IE）盒模型
- 在标准盒模型中，如果你给盒子设置 width/height，实际设置的是 content 的 width/height。
- 在替代盒模型中，如果你给盒子设置 width/height，实际设置的是 content + padding + border 的 width/height。
- 可通过设置 box-sizing 的值为 content-box（标准盒模型）或 border-box（替代盒模型）来切换这两种盒模型。
块级盒子 vs 内联盒子 vs 内联块盒子
这是 CSS 中常用的三种盒子，它们会在页面流和元素之间表现出不同的行为。
块级盒子的表现行为：
- 盒子会在内联方向（一般是从左到右）上扩展，并占据父容器在该方向上的所有可用空间，一般代表盒子会和父容器一样宽
- 盒子会产生换行
- width 和 height 属性可以发挥作用
- 其padding、border、margin会将其他元素从当前盒子周围“推开”
- 比如元素 <h1> 、<p> 默认情况下都属于块级盒子
内联盒子的表现行为：
- 盒子不会产生换行
- width 和 height 属性将不起作用
- 垂直方向的padding、border、margin会被应用，但是不会把其他处于 inline 状态的盒子推开
- 水平方向的padding、border、margin会被应用，且会把其他处于 inline 状态的盒子推开
- 比如元素 <span>、 <img> 默认情况下都属于内联盒子
内联块盒子的表现行为：
内联块盒子同时具有内联盒子和块级盒子的一些特点：
- 空间足够时不会自动换行
- 设置的 width、height、padding、border、margin 都会生效，并“推开”周围的元素
参考：Introduction_to_the_CSS_box_model、 CSS_Box_Model、 The_box_model、 Visual_formatting_model
布局
如上图所示，html文档默认是按正常布局流展示信息，现代常用的布局方式有两种：flex 和 grid 布局。 其中 flex 布局更擅长实现 “一维的”、“列表式的” 布局，而 grid 布局则更擅长实现 “二维的”、“网格式的” 布局。 另外 position、float、translate 等属性则适用于微调布局中的局部元素。
如果对flex布局、grid布局感兴趣，可以尝试练习这两个小游戏：
flexboxfroggy.com/ 、cssgridgarden.com/
格式化上下文
概念：块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
作用：格式化上下文会影响布局，通常我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为 BFC 可以：
- 包含内部浮动（避免父元素产生高度塌陷）
- 排除外部浮动（避免与浮动的兄弟元素产生重叠）
- 避免两个相邻元素之间的外边距重叠 。
如何创建：设置 display: flow-root; 将创建一个新的 BFC，且不会产生任何副作用问题。也可以通过设置 overflow: hidden; 等方式创建 BFC。
参考：Intro_to_formatting_contexts、 Block_formatting_context、 Inline_formatting_context、Visual_formatting_model
层叠上下文
CSS 是 Cascading Style Sheets（层叠样式表）的缩写，即文档的样式是可层叠的，是可以一层层相互覆盖的。而层叠上下文的定义则决定了哪一层样式应该显示在屏幕的更上层，最终被用户所看见。
样式优先级
你也许会遇到样式无法生效的情况，这可能是因为你的样式优先级不够高，而元素最终生效样式是由多个条件决定的：
- 相关性(Relevance)：首先找出所有与该元素的选择器匹配的样式声明块。
- 重要性(Importance)：根据样式规则是普通还是重要进行排序。（重要样式是那些设置了 !important 标志的样式）。
- 来源(Origin)：根据作者（开发者）、用户、用户代理（浏览器）三种样式来源对样式规则进行排序。
- 分层(Layers)：在每个样式来源中，按级联层进行排序。普通样式的层级优先级：先创建的层级 < 后创建的层级 < 未分层的样式。这个优先级对重要样式来说是相反的，也就是说，未分层的重要样式的优先级最低。
- 优先级(Specificity)：对于上一步相同层级的竞争样式，则按选择器优先级进行排序比较。
- 接近性(Proximity)：对于上一步具有同样优先级的选择器而言，则最后声明的选择器具有最高优先级。
对于上述的每一步，只有 “仍在比较中”的样式声明才能继续下一步“比较”。如果在“优先级比较”中只剩下一个样式声明，那它就 "赢了"，则停止后续步骤的“比较”。
参考：Cascade、 Cascade_layers、 Cascade_and_inheritance、 Specificity
响应式设计
对于现代的网页，需要支持不同设备的访问（电脑、平板、手机），以满足用户不同的使用场景。
响应式设计希望通过一套代码来实现网页在不同设备上有不同的展示与交互效果。
其中主要用的技术有：flex 和 grid 布局、@media 媒体查询、（% 、rem、vw ）响应式单位等技术。
