一、历史
CSS1: 1996年12月
CSS2: 1998年5月
CSS3: 2001年5月
CSS是 Cascading Style Sheets 的简称，中文"层叠样式表"，文件后缀.css。
CSS是用来表现HTML或XML等文件内容的样式的语言，它用来解决HTML的内容和展现分离的问题。
CSS的核心内容是: 盒子模型、CSS属性、CSS选择器。
浏览器对于CSS的支持不一样，即使相同地的属性，显示的效果也有差异。
层叠表示CSS规则应用于HTML元素的方式: 多个样式定义可层叠为一个。对一个元素多次设置同一个样式的值，将使用最后一次设置的属性值。
二、使用方式
优先级: 内联样式 > 内部样式表 > 外部样式表
1、内联样式(Inline style)
通过在HTML元素内部使用标签属性style来指定。
2、内部样式表(Internal style sheet)
通过使用<style>标签来定义，一般放在<head>标签内。
3、外部样式表(External style sheet)
通过<link>标签来链接，比如<link rel="stylesheet" type="text/css" href="mystyle.css">。
三、盒子模型
CSS的布局主要是基于盒子模型，每个HTML块级元素都像是一个盒子，从外到内包括: margin、border、padding、content。
HTML元素分为块级元素(block)和内联元素(inline)，内联元素只能在块级元素内部存在，并且不包含width和height属性。
元素的显示可以通过CSS来控制，display: block、display: inline、display: inline-block。
通常所说的元素的with和height，通常指的是content的宽度和高度。
在盒子模型中，会涉及到溢出(元素的尺寸无法容纳它的内容和子元素)，可以通过overflow来控制。(溢出的时候，根据内容绘制的顺序叠加。)
参考: https://www.cnblogs.com/polk6/p/3185692.html
https://www.cnblogs.com/polk6/p/css-boxModel.html
四、定位机制
从下图看出，Z轴的值越大，就会离用户越近，相应的元素就会在它的位置覆盖离用户更远的同位置元素，与图片层叠类似。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
(1) 标准文档流
从上到下，从左到右，遇块(块级元素)换行。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
(2) 浮动
使用float属性，最初设计初衷是文字环绕效果。
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；内联元素则是有空隙就插入。
参考: https://www.cnblogs.com/polk6/p/3142187.html
(3) 定位
使用position属性，其中值为absolute或fixed时，元素会脱离文档流。
参考: https://www.cnblogs.com/polk6/p/3214847.html
定位元素可以通过设置z-index属性来控制元素的堆叠顺序，数值越大越靠近用户。(默认z-index的值是0)
五、 浏览器的渲染顺序
1、获得HTML内容
2、将HTML的标签转换为DOM树(DOM Tree)
3、根据CSS样式表构建CSS规则树(CSS Rule Tree)
4、遇到JavaScript则通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree
5、通过DOM Tree和CSS Rule Tree构造渲染树(Rendering Tree)
6、布局: 确定每个节点在屏幕上显示的确切位置
7、绘制: 遍历Rendering Tree并使用后台UI接口将每个节点绘制出来
