前端面试题2022-CSS篇

Hhua.

已于 2022-12-10 13:06:03 修改

阅读量584

点赞数

分类专栏：面试题文章标签：前端 css css3

于 2022-12-10 00:29:29 首次发布

本文链接：https://blog.csdn.net/weixin_45815859/article/details/128209909

版权

面试题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于前端面试的题，最近整理了一些干货，经常被问到的一些问题，出现频率比较高的问题，如有不足之处，请高调指出，（⭐代表难度，星星越多越难，以次类推），此篇文章为面试题的css篇
自建博客文章链接：https://www.heblogs.cn

文章目录

CSS篇（20道）

CSS篇（20道）

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？⭐

参考文献https://www.w3school.com.cn/css/css_boxmodel.asp
标准盒模型：外边距+边框+内边距+内容
低版本的怪异盒模型：边框+内边距+内容
使用box-sizing更改模型

2、垂直居中div盒子⭐

1、div绝对定位水平垂直居中 + 上下左右0

div{
  width: 200px;
  height: 200px;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

2、div绝对定位水平垂直居中 + margin负间距

div{
  width:200px;
  height:200px;
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-100px;
}

3、div绝对定位水平垂直居中 + transforms

div{
  width: 200px;
  height: 200px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

4、flex上下左右居中

.father{
  display:flex;
  justify-content:center;
  align-items:center;
}
.father>son{
  width: 200px;
  height: 200px;
}

5、利用table的vertical-align实现

.father {
  display: table-cell;
  vertical-align: middle;
}

3、position的值？display的值？⭐

position参考文献：https://www.w3school.com.cn/css/css_positioning.asp
display参考文献：
https://www.w3school.com.cn/cssref/pr_class_display.asp
position有5个属性 static、relative、fixed、absolute、sticky
display（讲几个常见的就好）：
在这里插入图片描述

4、用CSS画出一个三角形，请描述方法和原理？⭐⭐

css画三角形可以用border、linear-gradient、clip-path等，这里只讲border，一般面试也是问这个。利用border这个特性我们跨域这么写

.triangle {
  width: 0;
  height: 0;
  border-left: 69px solid transparent;  
  border-right: 69px solid transparent;  
  border-bottom: 120px solid skyblue; 
}

5、CSS隐藏一个节点有哪几种方法？有什么区别？⭐

1.display:none(不占据空间,引起回流,没有点击事件,不能继承)
2.visibility:hidden(占据空间,引起重绘,没有点击事件,能够继承)
3.opacity:0(占据空间,没有回流重绘,有点击事件,能够继承)
4.position:absolute left:-9999px或top:-9999px; (脱离文档流，至于页面不可见区域内)
5.通过设置width:0+font-size:0;或heigh:0+font-size:0(缩小可视范围至0)
6.z-index为负值(隐藏在其他文档流之下)

6、请回答以下代码中box2总宽高⭐⭐

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box1 { width: 200px; height: 100px; background-color: red; }
    .box2 { width: 100px; height: 50px; padding: 10%; background-color: blue; }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

答案：考点在padding的百分比是以父元素的宽度而定padding为200*10% = 20，既上下左右都撑开20px，既width=100+20+20=140，height=50+20+20=90

7、用CSS 实现高度为0.5px像素的线条⭐

参考文献：https://www.w3school.com.cn/cssref/pr_transform.asp

p {
  border:1px solid #000000;
  transform:scale(0.5);
}

8、怎么实现一行文字超出后省略？2行呢？3行呢？⭐

 //主要代码为 text-overflow: ellipsis 和 line-clamp: 2;
 //一行
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 word-break: break-all;
 //两行
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;

9、对BFC的理解⭐⭐

概念：Block Formatting Contexts 即块级格式化上下文，它是一个独立的渲染区域，
触发：

根元素
float属性不为none（如：left | right）
overflow的值不为visible（如：hidden | auto | scroll）
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
position为absolute或fixed
…

应用：

解决margin叠加问题
清除内部浮动
重叠布局
…

10、CSS长度单位⭐

px系列
em rem系列
vw vh系列
%系列

11、你是怎么去做移动端适配的⭐

常见的 media+rem适配 + flex
JS修改根px + rem适配 + flex
百分比或者vw/vh适配 + flex

12、伪类和伪元素的区别⭐

伪类用于定义元素的特殊状态。
伪元素用于设置元素指定部分的样式
伪类参考文献：https://www.w3school.com.cn/css/css_pseudo_classes.asp
在这里插入图片描述
伪元素参考文献：https://www.w3school.com.cn/css/css_pseudo_elements.asp

随便记几个就行哈

13、讲讲flex布局和你常用的几个属性⭐

弹性布局参考文献：https://www.w3school.com.cn/css/css3_flexbox.asp
常见的容器属性

flex-direction 切换布局方向是为row or cloumn
flex-wrap 决定是否能换行
flex-flow 同时设置 flex-direction 和 flex-wrap 属性的简写属性
justify-content 决定row布局
align-items 决定cloumn布局
align-content 用于对齐弹性线

14、简述一些css3新特性⭐

简单说一些例如，圆角、边框图像、边框背景、渐变、盒子阴影、图像比object-fit、动画、过度、弹性布局、媒体查询等

15、为什么大部分人做动画改变位置是用translate而不是定位?⭐⭐

top、left、width等改变是占用CPU时间
translate没有CPU时间，我看了很多帧，除了少部分帧有0.1ms左右的脚本执行时间之外，大部分帧的CPU时间都是0。他是占用系统 RAM 与 GPU(在移动设备上尤其有限)的内存

16、link和@import的区别?⭐⭐

参考文献：https://www.runoob.com/note/72255

<link rel="stylesheet" href="./index.css">

<style>
@import url("./index.css")
</style>

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
加载顺序的差别：当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式，网速慢的时候还挺明显。
兼容性的差别: @import 是 CSS2.1 提出的，老浏览器Unsupported，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
使用 do控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

17、什么是重绘和回流

重绘/重排:当页面元素的样式发生变化，但不影响该节点在文档流的几何信息时
回流:当页面元素的几何属性或布局发生变化时
回流一定会引发重绘，重绘不一定引发回流

18、简述CSS的执行顺序(权重)

CSS的选择器有很多种，而最终某个样式的值只能取其中一个，所以必然存在优先级和覆盖。

权重，简单地说就是为了便于我们计算优先级，给每种选择器赋予的一个值，权重值可以叠加计算，值越大优先级越高。

元素选择器和伪元素（权重值为1）
类选择器、属性选择器和伪类（权重值为10）
ID选择器（权重值为100）
内联样式（权重值为1000）
!important 权重值最高

19、怎么清除浮动

clear:both
伪元素
overflow

20、讲讲CSS3的动画

文献参考：https://www.w3school.com.cn/css/css3_animations.asp

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes 规定动画模式。
animation 设置所有动画属性的简写属性。
animation-delay 规定动画开始的延迟。
animation-direction 定动画是向前播放、向后播放还是交替播放。
animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。

不需要背多全，只需要知道有这些东西，能够在使用的时候快速找到api文档的所在位置

Hhua.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端面试题2022-CSS篇

参考文献标准盒模型：外边距+边框+内边距+内容低版本的怪异盒模型：边框+内边距+内容使用box-sizing更改模型重绘/重排:当页面元素的样式发生变化，但不影响该节点在文档流的几何信息时回流:当页面元素的几何属性或布局发生变化时回流一定会引发重绘，重绘不一定引发回流。
复制链接

扫一扫