前言
上次给大家介绍了一部分八股文中css的考题以及分栏布局的实现，本文接着前两篇文章，继续给大家分享css中常考的面试题，如果前两篇文章没看的也可以去看看前面的文章，对读者来说都是个提升，最有意思的应该就是视差滚动和画三角形了。
前端面试必考八股文之------css系列（1）
当面试官问你如何实现分栏布局，我是这么回答的
1. css3中常见的动画有哪些？怎么实现？
-
transition过渡动画
其他属性值发生变更时，控制该值变更所花费的时间以及变更曲线
-
transform旋转，平移，缩放，倾斜等
用于做容器的旋转，平移，缩放，倾斜等动画
-
animation纯动画，相当于上面两个的合集
控制容器动画的关键帧
css
<style>
.box{
width: 200px;
height: 50px;
background-color: blueviolet;
transition: width 2s ease;
}
.box:hover{
width: 500px;
}
.wrap{
width: 200px;
height: 50px;
background-color: red;
}
.wrap:hover{
transform: translateX(200px);
}
.container{
width: 200px;
height: 50px;
background-color: aquamarine;
animation: move 2s linear infinite;
}
@keyframes move {
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(100deg);
}
}
</style>其中animation要搭配@keyframes使用，自定义一个动画，然后在animation中引用，这里的0%和100%指的是关键帧
2. 说说回流重绘 （重排重绘）
-
是什么
回流：浏览器渲染页面之前需要对结构进行布局计算
重绘：将已经计算好布局的容器绘制出来
-
触发
回流：页面上有容器的几何属性发生变更
重绘：容器非几何属性变更（字体，颜色）
回流必重绘
举个简单的例子，比如说浮动，元素添加了浮动之后就会脱离文档流，此时它们的高度和宽度就不计算在内，这个时候其余的元素就要重新计算它们的布局结构然后重新绘制到新的地方，这个过程就叫做回流重绘
3. 什么是响应式？
-
是什么
跟随用户设备尺寸的变化，页面实现自动的适配
-
实现方案
- flex (适用于某个容器内的响应式)
- 百分比 % （常适用于外层大容器） ---------继承父容器的大小
- rem + 媒体查询 （可用于任何地方） ---------虽然也要写多个媒体查询，但是每个媒体查询中的代码量少
- 直接媒体查询 （可用于任何地方） ---------代码量很大
- vw/vh （常适用于外层大容器） ----------相对于window的大小
这里的响应式可不是vue里面的那种响应式数据，可千万不要搞混了，这里主要介绍一下媒体查询，媒体查询可以实时监听屏幕窗口的变化，以便于实现适配。
css
/* 媒体查询 */
@media screen and (min-width: 1000px) {
html{
font-size: 30px;
}
}
@media screen and (min-width: 1200px) and (max-width: 1500px) {
html{
font-size: 35px;
}
}
@media screen and (max-width: 500px) {
html{
font-size: 20px;
}
}4. 视差滚动效果如何实现？
- 是什么
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验，实现视觉上的落差。
1. background-attachment: fixed
css
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 100vh;
background-color: rgba(0,0,0,0.7);
color: aliceblue;
font-size: 20vh;
text-align: center;
line-height: 100vh;
}
.img:nth-child(2){
background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.63d5b5b56c13a332e8e3166d5ad25eb5?rik=X3APh75B3fN0Kg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1307%2f10%2fc2%2f23151595_1373424485109.jpg&ehk=lr%2fmn25zYXJ1EVHvD%2ft1B4lyNY9rm8u6ws37L%2bMH5NQ%3d&risl=&pid=ImgRaw&r=0');
background-attachment: fixed;
}
.img:nth-child(4){
background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.sOomj6G-J50RJInOg61GlgHaEo?w=297&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7');
background-size: cover;
background-attachment: fixed;
}
.img:nth-child(6){
background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.6674818270668e9c886b476256b791de?rik=lVcmG1WarOEqUg&riu=http%3a%2f%2fwww.sogoupc.com%2fuploads%2fallimg%2f120308%2f1-12030R10T9.jpg&ehk=IYfp7zUvGD7KPFVSPxK2f4aYOdJk2eervO4Z12Ko57c%3d&risl=&pid=ImgRaw&r=0');
background-attachment: fixed;
}
.img:nth-child(8){
background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.Kr4y5yp_Ct9GkxqcPWylqgHaEo?w=297&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7');
background-attachment: fixed;
}
</style>
<body>
<div class="box">1</div>
<div class="box img">2</div>
<div class="box">3</div>
<div class="box img">4</div>
<div class="box">5</div>
<div class="box img">6</div>
<div class="box">7</div>
<div class="box img">8</div>
</body>当设置 background-attachment: fixed 时，背景图片会固定在视口中，不随页面的滚动而滚动，即在页面滚动时，背景图片的位置固定不变，始终保持在视口中相对于浏览器窗口固定。
2. perspective + translateZ
css
<style>
*{margin: 0;padding: 0;}
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
}
#app{
width: 100vw;
height: 400px;
text-align: center;
font-size: 30px;
padding-top: 100px;
overflow-y: scroll;
perspective: 1px;
}
.box1{
width: 500px;
height: 200px;
background: antiquewhite;
}
.box2{
width: 500px;
height: 200px;
background:aqua;
transform: translateZ(-3px);
}
.box3{
width: 500px;
height: 200px;
background:chocolate;
transform: translateZ(-1px);
}
</style>
<body>
<div id="app">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>这种方法通过3D透视，让容器向z轴里面移动，形成视觉上的落差，在视觉上实现不同的背景以不同的速度移动，从而实现视差滚动效果
5. css画一个三角形
这个功能实现要用到我们上次讲的盒子模型的知识，我们要用到IE盒模型，先看这段代码
css
<style>
.box{
width: 50px;
height: 50px;
border: 50px solid;
border-color: red gold greenyellow turquoise;
}
</style>
<body>
<div class="box"></div>
</body>
现在这是标准盒模型的样式，那如果我们加上box-sizing: border-box把它变成IE盒模型呢，它就成了这样
现在是不是想到了要怎么画三角形了呢，没错，就是把其中的三条边框色设置为透明就行了，只要设置border-color:transparent transparent red gold就行了，这样一个三角形就出来了
结语
到目前为止，常见的css考题都已经列举出来了，大家仔细阅读这三篇文章，在面试的时候遇到css的问题应该就能够比较轻松的拿捏住了。
前端面试必考八股文之------css系列（1）
当面试官问你如何实现分栏布局，我是这么回答的