2021年CSS常见面试题

css 在实际开发中不难，但是因为平时写的少很多属性名都记不住。无奈面试官总是要问啊，没办法了，记在这里常回来看吧！

1. 两列布局-左固定右自适应

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

• flex

.container {
  display: flex;
  .left {
    width: 100px;
  }
  .right {
    flex: 1;
  }
}

• calc

.container {
  display: flex;
  .left {
    width: 100px;
  }
  .right {
    width: calc(100% - 100px);
  }
}

2. 多列布局

这里以三列布局为例子

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

• column-count + gap

.container {
  column-count: 3;
  gap: 10px;
}

• dispaly-grid + gap

.container {
  display: grid;
  gap: 10px 10px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

• flex 第 4 个 div 会自动换行

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  div {
    width: 33%;
  }
}

如果只有 3 个，直接 flex：1 就行了。

• 百分比

.container {
  div {
    width: 33%;
  }
}

九宫格的实现可自己发散啦！

3. 水平居中

• div 内的文字

<div class="box">test</div>

.box {
  text-align: center;
}

• div 内的元素

1. 设置 margin

<div class="box">
  <div></div>
</div>

.box {
  width: 200px;
  height: 200px;
  div {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
}

2. position-relative + margin 使用相对定位加 margin 计算

<div class="box">
  <div></div>
</div>

.box {
  width: 200px;
  height: 200px;
  position: relative;
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-left: 50px;
  }
}

3. flex + justify-content

<div class="box">
  <div></div>
</div>

.box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  div {
    width: 100px;
    height: 100px;
  }
}

4. 垂直居中

• div 内文字

<div class="box">test</div>

设置 line-height 和 height 相等

.box {
  height: 40px;
  line-height: 40px;
}

• div 内的元素

1. position-relative + margin 使用相对定位加 margin 计算

<div class="box">
  <div></div>
</div>

.box {
  width: 200px;
  height: 200px;
  position: relative;
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: 50px;
  }
}

2. flex + align-items

<div class="box">
  <div></div>
</div>

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  div {
    width: 100px;
    height: 100px;
  }
}

5. 纯 CSS 实现自适应的正方形

1. padding

   <div class="container">
     <div class="box"></div>
   </div>
   

.container {
  width: 200px;
  height: 20%;
  border: 1px solid #eee;
  .box {
    width: 100%;
    height: auto;
    background-color: teal;
    padding-bottom: 100%; // 元素的padding和margin是相对于父元素的width来设置的
    border: 1px solid #eee;
  }
}

2. vw(vh)

.container {
  width: 200px;
  height: 20%;
  border: 1px solid #eee;
  .box {
    width: 20vw;
    height: 20vw; // vw(vh)宽高都以视口的宽度(高度)为基准
    background-color: teal;
    border: 1px solid #eee;
  }
}

3. 利用子元素的 margin-top 来实现

   .container {
     width: 200px;
     height: 20%;
     border: 1px solid #eee;
     .box {
       width: 20%;
       background-color: teal;
       border: 1px solid #eee;
       .box::after {
         content: "";
         display: block;
         margin-top: 100%;
       }
     }
   }
   

6. CSS 实现一个正三角形

<div class="container">
  <div class="triangle"></div>
</div>

.container {
  width: 20px;
  height: 20px;
  .triangle {
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent teal transparent;
    content: " ";
  }
}

7. CSS 实现爱心

利用border和transform旋转

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  width: 200px;
  height: 200px;
  .left {
    width: 30px;
    height:20px;
    background-color: #f56c84;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    transform: rotate(45deg);
    margin-right: -20px;
  }
  .right {
    width: 30px;
    height:20px;
    background-color: #f56c84;
    border-end-end-radius: 10px;
    border-start-end-radius: 10px;
    transform: rotate(-45deg);
  }
}

由此就可以用css画出很多图形啦，比如我趁热打铁画了朵花：

8. transition 和 animation 的区别？

• transition 作用于样式属性，animation 作用于元素本身
• transition 通过样式触发，比如 hover；annimation 借助@keyframe 自己就能触发
• transition 像是 animation 的子集

9. 全站置灰

借助filter（滤镜）给网站添加滤镜：

  body{
    filter: grayscale(1);
  }

10. 伪类和伪元素

• 伪类
  伪类是开头为冒号（:）的关键字
  常见的伪类是 :hover

.box:hover{
    border: 1px solid red;
}

• 伪元素
  伪元素是开头为双冒号（::）的关键字
  常见的伪元素是 ::before 和 ::after

.box::before{
    content: 'add sentence before element'
}

tips

这里主要记录css常见面试题，其实就是开发中常见的场景，喜欢花花的同学，别忘了点赞、关注、写代码呀。