理解CSS｜青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第2天。

主要内容

CSS内容十分零碎，我也记不住啊，我觉得还是用到的时候查一下更方便。

主要难点

- 特异度

内联 ～ 1000
id ～ 100
class、伪类、属性 ～ 10
标签、伪元素 ～ 1
其他可忽略不计

用计算的方法算出权重即可判断优先级

- 继承

关于页面的排版等属性大都是无继承性的，但不可继承的属性可以通过inherit进行显式继承。

有继承性属性有：（参考链接）

1. 字体系列属性
   font-family：字体系列
   font-weight：字体的粗细
   font-size：字体的大小
   font-style：字体的风格
   
2. 文本系列属性
   text-indent：文本缩进
   text-align：文本水平对齐
   line-height：行高
   word-spacing：单词之间的间距
   letter-spacing：中文或者字母之间的间距
   text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
   color：文本颜色
   
3. 元素可见性
   visibility：控制元素显示隐藏
   
4. 列表布局属性
   list-style：列表风格，包括list-style-type、list-style-image等
   
5. 光标属性
   cursor：光标显示为何种形态
   

- 布局
flex单一维度
grid二维
用 grid-template-columns 和 grid-template-rowsgrid 属性进行调节，更加灵活。

**- 百分比换算（一直分不清，看到正好记一下） **

个人总结

1. 我觉得布局是最耗脑的，但效果是能立刻显示的，可以不断去尝试去调整。
   
2. css属性多而杂，需要不断地反复实践才能掌握。