CSS的设置优先级
·CSS选择器的特异度 #id 为1 .伪类为2 E标签为2 ，然后通过特异度来进行
·CSS后指定的样式会覆盖之前指定的样式，在想要覆盖的样式的class名后面再加上新的命名，可以对原本的样式进行覆盖以达到复用的目的。
继承
·某些属性会自动继承父元素的计算值，除非显式指定一个值
·显式继承：通过通配符 * 里对属性设置inherit，就可以让该属性(不可继承)可以被继承
初始值
· CSS中，每个属性都有一个初始值
· background-color 的初始值为 transparent
· margin-left 的初始值为 0
· 可以使用initial关键字显式重置为初始值
·background-color：initial
CSS的计算过程
-
将样式规则拿到之后，对规则进行条件筛选：选择器匹配、属性有效、符合当前media等
-
获取声明值 一个元素的某个属性可以有0到多个声明值 例如 p{ font-size: 16px } 和 p.text { font-size: 1.2em }
-
按照来源、选择器特异性、书写顺序等选择出优先级最高的一个属性值
-
在层叠过程中，获取优先级最高的那个值
-
当层叠值为空时，会使用继承或者获取初始值
-
经过cascading和defaulting之后，保证指定值一定部位空
-
将一些相对值或者关键字转化成绝对值，例如em转为px，例如一些图片的相对路径转为绝对路径
-
获得计算值
-
将计算值进一步转换，例如关键词、百分比等转为绝对值
-
接着使用值： 进行实际布局时使用的值
-
将小数像素值转为整数
-
渲染时实际生效的值 例如400px
布局(Layout)是什么
· 确定内容的大小和位置的算法
· 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
· 常规流：
行级、块级、表格布局、FlexBox、Grid布局
· 浮动：
· 绝对定位
width
· 指定content box高度
· 取值为长度、百分数、auto
· auto取值由内容计算得来
· 百分数相对于容器的content box高度
· 容器有指定的高度时，百分数才生效
padding
· 指定元素四个方向的内边距
· 百分数相对于容器宽度
border
· 指定容器边框样式、粗细和颜色
块级：Block Level Box 不和其他盒子并列摆放 适用所有的盒模型属性
行级：Inline Level Box 和其他行级盒子一起放在一行或拆开成多行 盒模型中的width、height不适用
· display属性：
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略
Flex Box
· 一种新的排版上下文
· 它可以控制子级盒子的：
摆放流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许拆行
display：grid
· 使元素生成一个块级的Grid容器
· 使用grid-template相关属性将容器划分为网格
· 设置每一个子项占哪些行/列
position属性
static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位
总结
Css的样式繁多，如果需要查阅需要充分利用MDN和W3C CSS规范。想要学好CSS，需要保持好奇心，善用浏览器的开发者工具。
