若没有特殊说明，下面出现的样式基于这个div

<body>
    <div class="outer">
        <div class="inner">大幅度发的辅导费</div>
    </div>
</body>

1. 居中

方法一

// 父盒子：
.outer {
  position：relative；
}

// 子盒子：
.inner {
  position：absolute；
  top：0；
  right：0；
  bottom：0；
  left：0；
  margin：auto；
}

方法二

// 父盒子：
.outer {
  position：relative；
}
// 子盒子：
.inner {
   position：absolute；
  top：50%；
  left：50%；
  transform：translate（-50%，-50%）
}

方法三

// 父盒子：
.outer {
  display: flex；
  align-items: center；   //定义属性定义项目在交叉轴（纵轴）上如何对齐
  justify-content: center;  // 属性定义了项目在主轴（横轴）上的对齐方式。
  height: 100vh;  // 在设置的 height 高度中垂直居中
}

方法四

// 父盒子：
.outer {
  display: table-cell；
  vertical-align: middle；
  text-align: center;
}
// 子盒子：
.inner {
  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/ 深度选择器。

11. display:none 和 visibility:hidden

使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有 继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

注：网页渲染流程中HTML，display: none的元素不在Render Tree中，visibility: hidden的元素在Render Tree中

12. css 绘制三角形

// 绘制箭头向下三角
.inner {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 50px solid paleturquoise;
}

13. 盒子宽未知，实现宽高 2：1

本质并不是说不知道宽度，而是说宽度是变化的，要求高度随着宽度变化为1：2

.inner {
  background-color: pink;
  width: 25vw;
  height: calc(25vw / 2);
}

14. 边长小于 1px 线段

.inner {
  position: absolute;
}
.inner:after {
  content: "";
  position: absolute;
  left: -50%;
  top: -50%;
  border: 1px solid black;
  width: 200%;      // 宽高设置为2 倍
  height: 200%;
  transform: scale(.5, .5);   // 整体缩小一半
}

15.圣杯布局

<body>
      <div class="outer">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
      </div>
</body>

flex实现

.outer {
  display: flex;
  height: 200px;
}
.center {
  flex: 1;
  background-color: pink;
}
.left {
  width: 100px;
  background: yellowgreen;
}
.right {
  width: 100px;
  background: yellowgreen;
}

position 实现

.outer {
  position: relative;
}
.left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  background: yellowgreen;
  height: 200px;
}
.center {
  background-color: pink;
  height: 200px;
}
.right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  background: yellowgreen;
  height: 200px;
}

CSS常见面试题