1. html渲染过程

按照文档目录的树形结构进行，从根结点开始，从父元素到子元素，然后再到下一个父元素到子元素

2. CSS属性值的计算过程

属性值从无到有的计算过程。说明：每一个html元素渲染的前提条件是，该元素的所有css样式都是有值的。（不是我们设置了才存在，一般不设置的时候，浏览器会给默认值）

a. 首先确定声明值：参考样式表（CSS样式，包括默认值等）中没有冲的属性声明，作为css的属性值。

b. 层叠冲突：有冲突的使用层叠规则（后面会说）确定声明值。
例如：下面两个就是层叠冲突

h1{
    
     color: red }
.head h1{
    
     color: red }

c. 使用继承：通过a和b设置CSS属性值后，剩余属性没有值，如果该属性可以继承，则继承父元素的值。

d. 使用默认值：通过a、b、c后，再次剩余的值使用浏览器默认样式。

3. 层叠规则

a. 重要性
!important > 作者样式(我们自己写的样式) > 浏览器默认样式

b. 特殊性（CSS选择器的优先级）
CSS选择器的计算方式是比较一个四位数
千位：判断是否有内联样式，有则为1，否则为0。
百位：CSS选择器中，所有ID选择器的数量。
十位：CSS选择器中，类选择器、属性选择器、伪类选择器的总数量。
个位：CSS选择器中，元素选择器、伪元素选择器的总数量。
注意：进位制不是10进制，是225进位。

c. 源次序
代码书写靠后的优先级更高

4. CSS继承

主要是子元素继承父元素的大部分文字内容属性

5. 盒子组成

内容，padding，border，margin

6. 行盒特点

a. 沿着内容延伸，如果内容换行，行盒会截断到下一行，行盒不能设置宽高。（块盒则是包裹整个内容，不受换行影响）

b. 行盒调整宽高用字体大小，字体类型和行高

c. 行盒padding border margin水平方向有效，不会实际占据空间。

d. 行盒内部 或 行盒之间，会发生空白折叠。

e. 行盒在排列的时候会避开浮动盒子

特殊：
大部分元素，页面上显示的结果取决于元素内容，称为 “非可换元素”。少部分元素，页面上显示结果取决于元素属性，称为 “可换元素”，如img，video等。绝大部分可替换元素均为行盒，但是类似于行块盒，盒模型中尺寸都有效。

7. 行快盒特点

行块盒 display inline-block 不独占一行 所有尺寸都有效
行块盒内部 或 行块盒之间，会发生空白折叠。

8. 块盒特点

a. 水平方向
块盒的总宽度等于包含块（父元素内容盒）的宽度。
auto值是将剩余空间吸收，width吸收能力大于margin。若width，border，padding，margin都计算过，仍有剩余空间，则该空间被margin-right吸收。
margin：0 auto; 居中

b. 垂直方向
每个块盒垂直方向 height：auto 适应内容的高度。margin：auto 代表0

c. 两个常规流（无浮动和定位等）块盒的上下外边距相邻会进行合并，两个外边距取最大值，兄弟元素和父子元素都适用，除非外边距之间相隔，比如border等。

9. 百分比取值

padding、margin、width的百分比取值，以父元素的宽为基础，注意父元素必须设置值，否则百分比无效。

10. 元素浮动

a. 元素浮动后，必定为块盒

b. 浮动后，宽度和高度：auto；适应内容宽高。margin：auto；值为0。border，padding，百分比取值与常规流一样（第8条）。

c. 浮动盒子在包含块中会避开常规流的盒子，常规流块盒排列的时候无视浮动盒。例如：常规流盒子在浮动盒前，浮动盒会在常规流下一行排列。常规流盒在浮动盒之后，浮动盒会遮挡在常规流盒之上。

d. 如果文字内容没有被包裹到行盒里，那么浏览器会默认生成一个行盒包裹文字内容，相当于p元素包裹文字内容，浏览器会在p元素内生成一个span（注意只是相当于，但不是增加了个span）

e. 高度坍塌：常规流盒子的自动高度，在计算时，不会考虑浮动盒子，所以会产生父元素高度没包裹浮动盒子的情况。
解决方案：用clear（创建div，或者直接after）

11. 定位

a. 定位元素会脱离文档流（相对定位除外）。
b. 定位时，如果左右发生冲突以左为准，上下冲突以上为准。
c. 绝对定位的包含块（区域），从内到外找祖先元素中第一个设置定位的元素，该元素的填充盒为包含块（区域），如果找不到，整个网页为包含块。
d. 固定定位的包含块为整个浏览器视图窗口。
e. 绝对定位和相对定位，宽高auto，为适应内容。
f. 定位状态的居中：

1. 定宽高
2. 将左右（上下）距离设为0
3. 将左右（上下）margin设为auto。

注意：在绝对定位和固定定位状态下，margin：auto会自动吸收剩空间。一般居中的广告就是这么显示

g. 绝对定位和固定定位：一定是块盒，一定不是浮动，没有外边距合并。