CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
（1）CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
（2）CSS盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒模型：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
（3）CSS布局
-
CSS3 之前 | Normal Flow 常规流 | Float 浮动流 | Positioning 定位流 | | --- | --- | --- | | 默认的布局方式，有块级格式化上下文和内联，格式化上下文 | 用float属性控制，脱流做横向布局 | 用position属性控制，fixed和absolute脱离文档流，可以自动定位、覆盖等 |
-
CSS3 之后 | Flex 弹性盒子布局 | Grid 网格布局 | Multicol 多列布局 | | --- | --- | --- | | 一维空间布局 | 二维空间布局 | 文本、内容的多列展示 |
常规流布局：
<p>开始学习</p>
<ul>
<li>学习中</li>
<li>学习中</li>
<li>学习中</li>
</ul>
<p>结束</p>
弹性盒子布局：
