这是我参与「第五届青训营 」伴学笔记创作活动的第3天
本节课介绍了css样式中的优先级、原则起的特异度、继承、初始值以及网页布局相关的内容。
-
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
-
继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。
-
初始值 CSS 中，每个属性都有一个初始值 background-color 的初始值为 transparent margin-left 的初始值为0 可以使用 initial 关键字显式重置为初始值 background-color: initial。
-
CSS 求值过程
-
布局 确定内容的大小和位置的算法 依据元素、容器、兄弟节点和内容等信息来计算
-
布局相关技术：常规流（行级、常规流、块级、表格布局、FlexBox、Grid 布局）、浮动、绝对定位。
-
width：指定content box 宽度，取值为长度、百分数、auto （由浏览器根据其它属性确定）百分数相对于容器的 content box 宽度。
-
height：指定 content box 高度，取值为长度、百分数、auto （取值由内容计算得来）百分数相对于容器的 content box 高度容器有指定的高度时，百分数才生效。
-
padding：指定元素四个方向的内边距，百分数相对于容器宽度，可指定一个两个或四个数值。
-
border：指定容器边框样式粗细和颜色 三种属性：border、border-width、border-style、border-color 四个方向：border-top、boder-right、border-bottom、border-left -
margin：指定元素四个方向的外边距，取值可以是长度、百分数、auto，百分数相对于容器宽度。
display 属性block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none 排版时完全被忽略
行级排版上下文
Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素
块级排版上下文
Block Formatting Context (BFC)
某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow 值不是 visible 的块盒
display: flow-root;
BFC内的排版规则
盒子从上到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠
Flexibility
可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flexbasis 没有伸展或收缩时的基础长度
display: grid 使元素生成一个块级的 Grid 容器
使用 grid-template 相关属性将容器划分为网格
设置每一个子项占哪些行/列
