这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
选择器的特异度与优先级
每一种选择器都有自己的权重，依次是
行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。例如字体相关的属性都是可以继承的，但是盒模型的属性（宽度、高度等）是不可继承的。
显式继承
可以通过给属性设置inherit来强制某个属性继承
初始值
当没有指明样式，也没有样式可以继承时，就会表现为初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为 transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
- background-color:initial
CSS求值过程
布局（Layout）
是什么
- 确定内容的大小和位置的算法
- 就没时间元素、容器、兄弟节点和内容等信息来计算
布局相关技术
盒模型
- content-box
-
width/height
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
-
width/height
- 指定content box高度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box高度
- 容器有指定高度时，百分数才生效
-
padding
- 指定元素四个方向的内边距（border和content之间的距离）
- 百分数相对于容器宽度
-
- 指定容器边框样式、粗细和颜色
-
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
-
使用 margin:auto 水平居中
-
margin collapse，元素之间的边距不会简单相加，而是取最大值
-
overflow 超出部分的显示
- visible
- hidden
- scroll
-
border-box
和content-box不同，border-box的width和height指的是border的宽高
box-sizing
块级 vs 行级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其他盒子并列排放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用于所有盒模型属性 | 盒模型中的width、height不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子；内容分散在多个行盒中 |
| body、article、div、main、section、h1-6、p、ul、li、等 | sapn、em、strong、cite、code等 |
| display:block | display:inline |
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
- none 排版时完全被忽略
常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内(in-low)
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- 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不会和浮动元素重叠
FlexBox
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向（→←↑↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
flex-direction
主轴与侧轴
justify-content
align-items
align-self
order
flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸 展；容器空间不够时，会收缩
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
flex
Grid布局
display:grid
划分网格
浮动
主要做文字环绕图片的效果
浮动
position 属性
-
static 默认值，非定位元素
-
relative 相对自身原本位置偏移，不脱离文档流
-
absolute 绝对定位，相对非static祖先元素定位
-
fixed 相对于视口绝对定位
