前言
上次给大家介绍了一部分八股文中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)
当面试官问你如何实现分栏布局,我是这么回答的