1. 居中

方法一
父盒子： position：relative；
子盒子： position：absolute；top：0；right：0；bottom：0；left：0；margin：auto；
方法二
父盒子：position：relative；
子盒子：position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）；
方法三
父盒子给 display: flex；align-items: center；justify-content: center;
注：align-items：定义属性定义项目在交叉轴（纵轴）上如何对齐
justify-content：属性定义了项目在主轴（横轴）上的对齐方式。
方法四
父盒子：display: table-cell；vertical-align: middle；text-align: center;
子盒子：display: inline-block；

2. 清除浮动

父元素不设置高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2.父元素添加overflow:hidden (触发BFC)
3.使用after伪元素清除浮动（推荐使用）
4.使用before和after双伪元素清除浮动
详情：https://blog.csdn.net/h_qingyi/article/details/81269667

3. BFC

BFC（块格式化上下文）特性
1.使 BFC 内部浮动元素不会到处乱跑
2.和浮动元素产生边界。
https://www.jianshu.com/p/0d713b32cd0d

4. 盒模型哪两种模式？什么区别？

1.标准模式: box-sizing: content-box; 宽高不包括内边距和边框
2.怪异模式: box-sizing: border-box
https://www.jianshu.com/p/84107d5c5989

5. 栅格布局

一个栅格布局主要有四部分组成：
· a container
· rows 一行
· columns 一列
· gutters (the space between columns) 两个column中间的间隙
elementUI 中的 row 和 col ，将一行分为24等分，col是几就占几份, 底层按百分比实现；
结合媒体查询, 可以实现响应式

6. 关于vh, vw

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

7. css单位

https://www.jianshu.com/p/f16db5b09a1e

8. 选择器

https://juejin.im/post/6844904047825125390

9. css3 新特性

1. 过渡：transition
2. 动画：animation
3. 形状转换： transform:适用于2D或3D转换的元素
4. 选择器
5. 阴影：box-shadow
6. 边框：border-image
7. 背景: background-clip
8. 反射(倒影)： -webkit-box-reflect:
9. 文字：word-break: normal|break-all|keep-all
10. 颜色：rgba(rgb为颜色值，a为透明度);
    hsla（h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”）
11. 渐变
12. Filter（滤镜）
13. 弹性布局：flex
14. 多列布局
15. 盒模型定义：
    box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！
    box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！
16. 媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！[https://juejin.im/post/6844903518520901639]
    参考链接：(https://juejin.im/post/6844903518520901639)

10. /deep/

vue组件中，在父组件style中设置为scoped的时候，里面写的样式对子组件是不生效的，如果想让某些样式对所有子组件都生效，可以在样式名之前使用 /deep/ 深度选择器。