理解css
这是我参与「第四届青训营 」笔记创作活动的的第2天
css优先级(特异度)
我们可以css选择器地优先级分别4个等级，对应的权值相加结果越大优先级越高。
Lv1：内联样式，如style=""，权值为 1000
lv2：id选择器，如#app，权值为100
lv3：类、伪类和属性选择器，如.class，权值为10
lv4：代表标签选择器和伪元素选择器，如div，权值为1
其他：*通用选择器（），子选择器（>），相邻同胞选择器（+）不配，所以他们的权值为0
通过计算权值，并根样式在文档出现的顺序（同等级越晚出现优先级越高）确定优先级，但这并不绝对，css的优先级其实可以看成他对元素的描述地精确性，不同等级间的优先级是不可跨越的鸿沟，例如
尽管11个标签选择器叠加的优先级达到了11但是还是不如等级为3的类选择器
css属性继承
部分属性默认值即为inherit如color，line-height等与文字相关的属性会自动继承父级标签的属性值，也可以显式地给属性指定为inherit即可实现继承
css求值过程
- filtering：css样式与Dom匹配，筛选出有效的css属性即属性值
- cascading：通过优先级计算，计算属性出最终的属性值获取层叠样式
- defaulting：层叠样式没有声明的属性值，赋予默认值，获得最终的层递样式表
- resolving：单位转换，将相对值转化为绝对值
- formating：计算值转换，将上一步没有转化的相对值入百分比值进一步计算为绝对值
- constraining：将小数值取整，因为没有半个像素
- ending：最终渲染出实际生效的样式
css布局
常规流：
- 块级
- 行级
- 表格布局
- flexbox
- grid布局
盒模型
重点：
- border三角形地技巧
- padding四个方向地百分比都是相对于宽度计算
- border无法设为百分比值
- margin的居中技巧
- margin坍塌
- BFC&IFC
浮动：float
在有了flex，grid这些强大的布局，我们完全可以解放float让他回归档文本的布局的最原始的作用上
绝对定位：position
position：absolute相对于最近的position不为static的祖先元素定位，若不存在则相对于根元素定位
总结
这节课视频有两个半个钟头，真是幸苦老师录制了，尽管时间很长但其实讲的都是非常基础的内容，关于css的学习远远还没有结束，笔记内容我只记录了一些我认为比较重要的内容和一些自己的想法，对于css学习可以充分的利用MDN和W3C的官方文档，另外我十分推荐张鑫旭大佬的css世界三部曲，在入门以后非常适合快速提升。
