这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
选择器优先级
根据选择器特异度增加优先级：
可以先用简单的标签或类选择器生成一些基础样式，再增加优先级设置特定样式：
继承
某些元素会自动继承父元素的值，一般文字样式是可继承的，盒模型是不继承的，对于某些默认不继承的元素可以设置显性继承inherit
## 初始值
- CSS中每个元素都有一个初始值
background-color初始值为transparentmargin-left初始值为0
- 可以设置
initial属性重置初始值
css求值过程
布局
布局是什么
- 确定内容的大小和位置的算法
- 依据元素，内容，兄弟节点和内容等信息来计算
长宽以及边距设置
当设置box-sizing为border-box时border与padding归为width与height中
margin设置auto时可以实现水平居中
border有多种属性可调式
示例
overflow
visible可见，内容超出展示框hidden隐藏，内容隐藏入展示框auto,scroll给展示框添加滚动条，auto需设置最大宽高
行级与块级
display属性
blockinlineinline-block本身是行级，可以设置宽高，与其他盒子同一行显示，作为一个整体不会被拆散none排版时忽略
排版
常规流
- 根元素，浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内
- 常规流中的盒子。在某种排版上下文中布局
行级排版上下文
块级排版上下文
BFC内的排版规则
- 盒子从上到下摆放
- 垂直
margin合并 - BFC内的
margin不会与外面的合并 - BFC不会和浮动元素重叠
FLEX BOX
flex-direction
justify-content
align-items
align-self
控制单一元素的排列方式
order
控制元素的排列顺序
flexibility （子元素的收缩）
flex-grow剩余空间的伸展能力flex-shrink空间不足的收缩能力flex-basis没有伸展或收缩时的基础长度
总结
Grid Box
几乎从来不用
float浮动
实现文字环绕效果
position属性
static默认非定位元素relative相对自身原本位置偏移，不脱离文档absolute相对非static父级元素绝对定位fiexed相对视口绝对定位
