问：为什么学习css？
答：为了将内容更好的展现出来
1.层叠，优先级
层叠三大规则（优先程度递减）
1.样式表来源 --> 2.选择器优先级 --> 3源码位置
样式表来源重要排序（重要程度递增）
用户代理样式 --> 用户样式表 --> 作者样式表 --> 作者样式表中的！important --> 用户样式表中的！important --> 用户代理样式表中的！important
这里先忽视了transition和animation，原因是不同浏览器和css规范规定的表现不一致
选择器优先级
内联>id>class = attribute =pseudo-class >type =pseudo-element
*内联样式不属于选择器，为了方便比较记忆，放在这里做对比
2.继承
graph TD
html --> body
body --> content
body --> menu
menu --> span
content --> div
content --> ...
css的值和单位
盒模型
浏览器根据视觉格式化模式(visual formatting model),将所有元素表示为盒子模型，css通过盒模型做layout
控制盒子类型
display：block,inline,inline-block,flex
控制盒子大小 &计算方式
width,height...
box-sizing:content-box,border-box
控制盒中内容流
overflow:auto,scroll,hidden,...
控制定位
position:static,relative,absolute,fixed,sticky
是否可见
visibility:visible,hidden
层叠上下文
编写z-index的建议： 1.使用css变量 或者 预处理语言的变量，管理z-index的值 2.将预设间隔设置10或100，方便后续的插入
transform变形
transform 变形
2D相关属性：
transform：translate（移动），rotate（旋转），sale（放缩，matrix（变形矩形）等
transform-origin：right top，center等表示变形时依据的原句
