这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
重点内容
- 特异度
- 布局
- 各种上下文排版方式
- 浮动与定位
详细介绍
选择器的特异度
有时，当我们利用不同的选择器，选中了同一个元素但设置了冲突的样式（比如利用id选择器设置了红色，又利用标签选择器设置了蓝色），哪一个会生效呢？这跟选择器的特异度，也就是优先级有关
举个例子：
1. #nav .list li a:link
2. .hd ul .links a
在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。
在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22。
因为，在 1 中的特异度为 122 大于 在 2 中的特异度为 22 。 所以，在 2 中的选择器的优先级更高。
继承与初始值
css的某些属性会自动继承其父元素的计算值，除非显式指定一个值
css中的每一个属性都有初始值，可以利用initial关键字显式重置为初始值
布局
布局，指的是确定内容大小和位置的算法，主要依据元素，容器，兄弟节点和内容等信息来计算
- 常规流（行级，块级，表格布局，FlexBox，Grid布局)
- 浮动
- 绝对定位
常规流
根元素，浮动和绝对定位会脱离常规流，常规流的盒子，都在某种排版上下文种参与布局
行级排版上下文
只包含行级盒子的容器会创建一个行级排版上下文
规则:
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动元素
块级排版上下文
根元素，浮动，绝对定位，inline-block，flex子项，grid子项，overflow的值不是visible的块盒等等会创建一个块级排版上下文 规则：
- 盒子从上到下摆放
- 垂直margin合并
- 内部的盒子不和外面的合并
- 不会和浮动元素重叠
FlexBox（很重要）
可以控制子级盒子的摆放流向，顺序，盒子的宽高，对齐以及是否允许折行
Grid
生成一个块级的Grid容器，可以将容器划分为网络，从而设置每一个子项占哪些行/列
浮动
脱离常规流，使盒子浮起来
定位
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离常规流
- absolute 相对最近的非static的祖先定位，脱离常规流
- fixed 相对于视口绝对定位
个人总结
学习了许多日常开发必须要会的重点知识，且必须靠自身实践才能慢慢体会，增长经验。
