CSS的盒子模型
由内到外分别由内容（content），内边距，边框（border），外边距（margin）四大部分组成
css的工作机制
-
打开某个页面时，浏览器会先加载页面的HTML
-
然后浏览器会解析HTML,其解析出的结构为一个DOM的树型结构
-
在解析HTML的同时，浏览器也会加载CSS
-
CSS加载完成后，会添加样式到DOM树
-
在对元素属性计算过后产生确定的树，最终去展示页面给用户
选择器
- 通配选择器——*
- 伪类选择器：状态伪类，比如点击时的样式、鼠标选中时的样式等；结构伪类，比如第一行元素
a:link{
color:black;
}
a:hover{
color:orange;
}
li:first-child{
color:coral;
}
</style>
- 元素选择器——div
- 类选择器——.class
- ID选择器——#id
- 属性选择器—— [prop=value]
优先级：!important>行内样式>ID选择器>类选择器、属性选择器、伪类>元素选择器、伪元素
组合方式
常规流
| inline | 行级盒子 |
|---|---|
| block | 块级盒子 |
| inline-block | 行级中有一个块级元素，不可拆分 |
Flexibility
- flex-grow 有剩余空间时伸展能力
- flex-shrink 容器空间不足时收缩能力
垂直水平居中
| 1. 绝对定位：不知道父级的高宽，子绝父相，子元素代码Position: absolute;Top:50%;Margin-top:自身高度一半；Left：50%；Margin-left：自身高度一半；先让盒子的上下边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一般距离 | |
|---|---|
| 2. 绝对定位+margin：auto子级父级的高宽都不知道， 子绝父相。margin：auto写在子级元素。* | |
| 3.flex法，在父级元素中设置 | |
| ` | 4.table-cell使用表格的vertical-align：middle实现盒子的垂直居中Text-align 实现盒子的水平居中Inline-block：结合了块级和行内元素的特性。 |
| 5.margin+transform | |
| 6.inline-block + vertical-align**** | |
| 7.absolute + transform： 子绝父相先让盒子的上下边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一般距离。 | |
| 8.grid方法 |
