这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
学习CSS进阶部分，进行查漏补缺
选择器权重
- 内联 - 1000
- id - 100
- class - 10， 伪类 - 10，属性 - 10
- 标签 - 1， 伪元素 - 1
- 相邻兄弟选择器 - 0，子选择器 - 0，后代选择器 - 0，通配选择器 - 0
选择器特异度
特异度判定标准（按选择器权重理解）
#(id) -------- .(类、伪类) -------- E(元素、伪元素)
- #nav .list li a:link
- .hd ul .links a 1 2 如上述例子
(1)中 => id选择器数量为1，（伪）类选择器数量为2（.link, :link），（伪）元素选择器数量为2（li, a） ===> 特异度为 122
(2)中 => id选择器数量为0，（伪）类选择器数量为2（.hd, .links），（伪）元素选择器数量为2（ul, a） ===> 特异度为 22
END: 所以(1)的优先级高于(2)
CSS中可继承与不可继承属性
一、无继承性的属性
display：规定元素应该生成的框的类型
文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
元素可见性
visibility：控制元素显示隐藏
列表布局属性
list-style：列表风格，包括list-style-type、list-style-image等
光标属性
cursor：光标显示为何种形态
对于不可继承的属性可以通过加入inherit进行显式继承
布局相关技术
布局分为：① 常规流 ② 浮动 ③ 绝对定位
常规流：行级、块级、表格布局、FlexBox、GridBox
一些场景： ① 默认情况下盒子为content-box（即width和height只代表content的高度），通常我们会设置成border-box ② margin使用auto值得时候，浏览器会对剩余部分进行平分 ③ margin collapse 会出现边距合并问题（高度塌陷）
IFC - Inline Formatting Context
只包含行级盒子的容器会创建一个IFC 盒子在一行内水平摆放 一行放不下时，会进行换行显示 text-align会决定一个盒子在行内的垂直对齐 避开浮动元素
BFC - Block Formatting Context
会创建BFC的情况：1. 根元素 2. 浮动、绝对定位、inline-block 3. Flex子项和Grid子项 4. overflow值不是visible的块盒 5. display: flow-root; 盒子从上到下摆放 垂直的margin会被合并 BFC内盒子不会与外面的合并 BFC不会与浮动元素重叠
Flex Box
一种新的排版上下文 可以控制子级盒子的：1. 摆放方向 2. 摆放顺序 3. 盒子宽度高度 4. 水平和垂直方向的对齐 5. 是否运行折行 常见的flex布局场景有：
- 方向：flex-direction: row | row-reverse | column | column-reverse;
- 主轴：justify-content: flex-start | flex-end | center | space-between | space-arount | space-evenly;
- 交叉轴：align-items: flex-start | flex-end | center | stretch（默认就是填充满） | baseline;
- 单个项目：align-self: auto | flex-start | flex-end | center | baseline | stretch;
- 顺序：order: number;（越大越靠后）
- Flexibility：flex-grow:有剩余空间时的伸展能力, flex-shrink:容器空间不足时收缩的能力, flex-basis:没有伸展或收缩时的基础长度;
Grid Box
display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列
float布局
应用场景逐渐变少
position属性
- static 默认值，非定位元素
- relative 相对于原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位，脱离常规流
- fixed 相对于视口绝对定位
- sticky 粘性定位，在视口内时为相对定位，超出视口则为fixed定位
