📄️ 基础

CSS 3 规范新增 UI (User-interface)模块 www.w3.org/TR/css3-ui。该模块改善了传统的盒模型结构，增强了盒子构成要素的功能。

📄️ 显示

display 属性依赖于称为相对定位（ relative positioning ）的概念，它意味着元素将相对于页面上的其它元素进行定位。 CSS 还支持绝对定位（ absolute positioning

📄️ 盒

css 用 margin 定义边界。语法如下：

📄️ 定位

- 默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器而言，而相对定位元素的位置是相对原始位置而言。这里注意一个前提——默认情况下

📄️ 盒模型

现代浏览器都支持两种显示方式：怪异模式和标准模式。在怪异模式下， border 和 padding 都在 width 和 height 之中；在标准模式下， border 、 padding 、 width 和 height 都有自己独立的区域。

📄️ 多列布局

CSS 3 的 Multiple Columns （ http://www.w3.org/TR/css3-multicol）可以设计多列布局，将内容指定为指定的列数排列，适合纯文本版本设计。

📄️ 网格

使用 display:grid 定义为网格布局称之为网格布局。

📄️ 弹性盒

Flex-box 由伸缩盒和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex ，可以得到一个伸缩容器。设置 flex 的容器被渲染成一个块级元素，而设置 inline-flex

📄️ 伸缩项目

一个伸缩项目就是一个伸缩容器的子元素，伸缩容器内的文本也被当作伸缩项目。伸缩项目中的内容和普通的文本流一样。

📄️ BFC

块级格式上下文（ Block Formatting Context ， BFC ）为元素提供了一个独立的布局环境，环境中的内容不会影响到环境外的布局，环境外的布局也不会影响到环境中的内容。 BFC

📄️ 弹性盒(旧)

- 2009 年版本（老版本）： display:box;