这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今日学习深入理解CSS，我看了字节的三节内部课，受益匪浅
css是什么？
- css的中文全称为层叠样式表
- 样式表，就是网站的衣服
- css其实就是应用到网页上的样式表
- 表中的每一个样式说明，都可以用来描述网页中的一个或多个元素
- 网页元素包括文本、图像、列表、表格、视频等
css有四大选择器：元素选择器、id选择器、类选择器、通配选择器
优先级：ID选择器 > 类选择器 > 标签(元素)选择器。
还有伪类选择器：
比如
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
伪元素选择器：
比如
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
关于页面的渲染机制
- 第一步：html经过HTML parser解析为DOM tree;(浏览器会把HTML结构字符串解析转换DOM树形结构。）
- 第二步：css根据css规则经过css解析器解析为 style Rules（CSSOM tree）
- 第三步：两棵树经过attachment结合Render Tree
- 第四步：render tree （渲染树）经过Layout计算DOM的位置以及样
- 第五步： 将计算好的页面paint画出来
- 第六步：显示到浏览器上
关于css的继承
什么是继承？
当你为HTML中的某个元素赋予CSS样式时，这些样式不仅仅会影响当前元素，有的样式还会影响该元素的子元素。这些下层子元素继承上层祖先元素样式属性的特点，就称为css继承。
默认继承css的属性有哪些呢？
color：颜色，a除外；
direction：方向；
font：字体；
font-family：字体系列；
font-size：字体大小；
font-style：字体样式，如斜体；
font-variant：用于设置小型大写字母；
font-weight：用于设置字体粗体；
letter-spacing：字母间距；
line-height：行高；
text-align：用于设置字体的对其方式；
text-transform：用于修改大小写；
visibility：可见性；
white-space：用于指定如何处理空格；
word-spacing：字间距
当你给父级设置了以上的属性，这个父级和它的子级都具有这个属性
关于文档流
所谓文档流表示所有的元素会基于一个平面世界展现给用户
当你给元素设置float浮动或者position绝对定位时，该div元素就会脱离文档流。相当于脱离了当前的平面世界，在宇宙开创另一个次元空间，表面上从原来的世界消失了，实际上它还存在，在宇宙中和原来的世界并排在一起。
