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 新特性
- 过渡：transition
- 动画：animation
- 形状转换： transform:适用于2D或3D转换的元素
- 选择器
- 阴影：box-shadow
- 边框：border-image
- 背景: background-clip
- 反射(倒影)： -webkit-box-reflect:
- 文字：word-break: normal|break-all|keep-all
- 颜色：rgba(rgb为颜色值，a为透明度);
hsla（h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”） - 渐变
- Filter（滤镜）
- 弹性布局：flex
- 多列布局
- 盒模型定义：
box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！
box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！ - 媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！[https://juejin.im/post/6844903518520901639]
参考链接：(https://juejin.im/post/6844903518520901639)
10. /deep/
vue组件中，在父组件style中设置为scoped的时候，里面写的样式对子组件是不生效的，如果想让某些样式对所有子组件都生效，可以在样式名之前使用 /deep/ 深度选择器。
网友评论