HTML&CSS基础原理（后续补充中）

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. 绝对定位和固定定位：一定是块盒，一定不是浮动，没有外边距合并。

12. 块级格式化上下文（BFC全称Block Formatting Context）

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。

常规流块盒特点：在水平方向上必须撑满包含块，在包含块的垂直方向上依次摆放，若外边距无缝相邻，则外边距合并。自动高度和摆放位置，无视浮动元素。

HTML标签就是创建了一个BFC区域，这个区域内的元素，不受外面的元素影响

创建一个BFC区域：
float，position的absolute、fixed，overflow不等于visible 的 块盒，table，行块盒等，都会在其元素内部创建BFC区域

BFC的特点：

1. BFC的高度，要计算元素内浮动的元素的高度。例如：overflow：hidden；解决高度坍塌。
2. BFC元素会避开同级的浮动元素，例如：做左边导航的时候，左边导航宽度固定，然后浮动，右边内容区域定为BFC区域，右边区域会在左侧导航旁边，并且自适应宽度。
3. BFC元素不会和他的子元素进行外边距合并。一般常规流的盒子，子元素和父元素相邻，外边距会合并。

13. 搜索引擎认为THML布局，越靠前的元素就越重要。

14. 子元素的高度设置百分比，需要其父元素有高度，且父元素的高度不需要子元素来支持

一般最外层会写个app的class，里面写position：fixed；height：100%，width：100%。这样元素就有高度了，后面元素用百分比就不会有影响

15. 浮动盒子的顶边不能高于上一个盒子的顶边

16. 行高的设置

如果设置文本的行高的话，推荐直接使用数字，不增加单位。
因为这样做的情况下，元素是先继承，再计算，算的是根据当前字体的行高。如果是加单位的话，就是先计算了，这样计算的就是继承下来的行高了，就不准确了。如果单行文本，还是可以直接加单位的。

17. 关于body背景的大坑

首先要明白什么是画布（非canvas）：画布的最小宽度和最小高度都是视口的宽高。

1. html元素的背景覆盖整个画布
2. body元素背景：如果html有设置背景（无论是图片或者颜色），body元素背景正常。如果html元素没有设置背景（无论是图片或者颜色），body元素的背景覆盖画布
3. body或者html或者画布的背景图片的宽度百分比，是相对于视口的，但是对背景颜色没有影响。（其他元素的背景图是相对于元素的）
4. body或者html或者画布的背景图片的高度百分比，是相对于html标签的高度。
5. 横向位置的background-position是相对于视口的。
6. 纵向位置的background-position是相对于html元素的

18. vertical-align 用于行盒的垂直对齐方式

19. 图片的父元素是个块盒，图片的底部和父元素的底边往往会出现白边

1. 设置父元素font-size为0。不推荐，会影响内部字体，哪怕内部设置字体尺寸也不行
2. 将图片设置为块盒。注意，行块盒也不行，必须设置为块盒（display：block）。

20. 堆叠上下文（z-index相关）

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。

堆叠上下文内的元素，每个堆叠上下文独立于其他堆叠上下文，他们之间不能相互穿插，和其他的堆叠上下文内的元素互不影响，类似块级格式化（第12条）。

z-index默认值是auto

创建堆叠上下文的元素

1. html元素（根元素）
2. 设置了z-index（值不能是auto）数值的定位元素（设置position）元素。 注意：是创建堆叠上下文的元素，并不是说z-index是只在position情况下有效。在有position的情况下，该元素会创建堆叠上下文元素，该元素内部的堆叠顺序为独立的，和其他的堆叠上下文互不影响。

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序

1. 创建堆叠上下文的元素的背景和边框（背景和颜色永远在最后）
2. 堆叠级别（z-index）为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别（z-index）为政治的堆叠上下文（值越大越靠前，同一个值，顺序在后的更靠前）

注意：文字里面会自动创建行盒，所以会出现覆盖文字却不能覆盖背景。例如下列情况，div覆盖了p元素的背景，但是没有覆盖里面的文字。

<p style="background-color:red;color:#fff">Lorem ipsum dolor sit amet consectetur</p>
<div style="width:100px;height:100px;background-color:blue;margin-top:-100px"></div>

21. 数据链接（data url）

数据链接：将目标文件的数据直接书写到路径位置
语法：data:MIME; 编码方式, 数据

优点：

1. 减少了浏览器中的请求（减少了请求中浪费的时间）
2. 有利于动态生成数据

缺点：

1. 增加了资源的体积，导致了传输内容的增加，从而增加了单个资源的传输时间。
2. 不利于浏览器的缓存，浏览器通常会缓存图片，css，js文件。
3. 会增加原资源的体积到原来的4/3

应用场景

1. 请求单个图片的体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64
一种编码方式，通常用于将一些二进制数据，用一个可书写的字符串表示。