最新最全的前端面试题集锦之 CSS 篇

最新推荐文章于 2022-07-04 18:00:58 发布

八了个戒

最新推荐文章于 2022-07-04 18:00:58 发布

阅读量1k

点赞数

分类专栏：前端 Web技术分享前端面试文章标签：面试 css css3

本文链接：https://blog.csdn.net/XH_jing/article/details/111314190

版权

前端同时被 3 个专栏收录

65 篇文章 8 订阅

订阅专栏

前端面试

27 篇文章 4 订阅

订阅专栏

Web技术分享

22 篇文章 2 订阅

订阅专栏

该内容主要整理关于 CSS 的相关面试题，其他内容面试题请移步至 2021 最新最全的前端面试题集锦查看。

一、CSS基础面试题（附答案）

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

标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度 = 内容宽度（content + border + padding）+ margin

2. box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为 content-box

context-box：W3C的标准盒子模型，设置元素的 height / width 属性指的是 content 部分的高/宽
border-box：IE传统盒子模型。设置元素的 height / width 属性指的是 border + padding + content 部分的高/宽

3. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#id)、类选择器(.classname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]（!important 比内联优先级高）

4. CSS优先级算法如何计算？

CSS优先级比较：
!important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认
CSS权重计算：
我们把特殊性分为五个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
第一等：代表内联样式，如: style=""，权值为1000。
第二等：代表ID选择器，如：#id，权值为0100。
第三等：代表类，伪类和属性选择器，如.class，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000

如果想要详细了解，请移步至：CSS选择器的优先级的计算方法以及特殊情景分析。

5. 用纯 CSS 创建一个三角形？

/* 
  采用的是相邻边框链接处的均分的原理
  将元素的宽高设为0，只设置 border ,
  将任意三条边隐藏掉（颜色设为 transparent ）,剩下的就是一个三角形
 */
#demo{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

6. `width: auto` 和 `width: 100%` 的区别？

width: 100% 会使元素 box 的宽度等于父元素的 content 的宽度；
width: auto 会使元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间；

7. `display` 有哪些值？说明他们的作用?

block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none：缺省值。像行内元素类型一样显示。
inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。
list-item：像块类型元素一样显示，并添加样式列表标记。
table：此元素会作为块级表格来显示。
inherit：规定应该从父元素继承 display 属性的值。

8. `position` 的属性值？

static：默认值。没有定位，元素出现在正常的流中。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
sticky：粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。
inherit：规定应该从父元素继承 position 属性的值。

9. 为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

10. `absolute` 的 `containing block` 计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的 containing block 一律为根元素(html/body)

11. `margin`和`padding`分别适合什么场景使用？

margin：

需要在 border 外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

需要在border 内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：

在IE5 IE6中，为 float 的盒子指定 margin 时，左侧的 margin 可能会变成两倍的宽度。
通过改变 padding 或者指定盒子的 display：inline 解决。

12. 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

13. 你对 `line-height` 是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height。

单行文本垂直居中：把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中，其实也可以把 height 删除。
多行文本垂直居中：需要设置 display 属性为 inline-block。

二、CSS3面试题（附答案）

1. CSS3有哪些新特性？

RGBA 和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face 属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

2. 解释一下 `Flexbox` (弹性盒布局模型)？及适用场景？

flex 布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display: flex 使他成为一个flex容器。任何一个容器都可以指定为 flex 布局。行内元素也可使用 flex 布局。
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。
属性：
- flex-direction 定义主轴的方向；
- flex-wrap 定义是否换行；
- flex-flow 上述2个属性的简写；
- justify-content 定义项目在主轴上的对齐方式；
- align-items 定义项目在交叉轴上如何对齐；
- align-content 定义多根轴线的对齐方式

3. CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

三、CSS高级面试题（附答案）

1. 浏览器兼容性有哪些？

面试详解：在开发 PC 端项目时，需要考虑哪些兼容性的问题？

2. 使用 base64 编码的优缺点？

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示时可用该字符串来代替图片的url属性
使用 base64 的优点：
可以减少该图片的 HTTP 请求
使用 base64 的缺点：
1.根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到 html/css 中，
不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
2.使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如 HTML 或 CSS，这相比于直接缓存图片的效果要差很多。
3.IE8以前的浏览器不支持，一般一些网站的小图标可以使用base64图片引入。

3. 为什么要清除浮动？清除浮动的方式？

清除浮动是为了清除使用浮动元素产生的影响：浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
清除浮动的方式：
- 父元素标签定义添加伪类：:after 和 zoom
```
/*清除浮动代码*/
.clearfloat:after{
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
.clearfloat{
	zoom:1;
}
```
  - 原理：IE8以上和非IE浏览器才支持 :after，原理和方法2有点类似，zoom (IE转有属性)可解决ie6,ie7浮动问题；
  - 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）；
  - 缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持；
  - 建议：推荐使用，建议定义公共类，以减少CSS代码；
- 在结尾处添加空div标签 clear:both
```
/* 清除浮动代码 */
.clearfloat {
	clear:both;
}
```
  - 原理：添加一个空div，利用css提高的 clear:both 清除浮动，让父级div能自动获取到高度；
  - 优点：简单，代码少，浏览器支持好，不容易出现怪问题；
  - 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽；
  - 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法；
- 父级div定义height
  - 原理：父级div手动定义 height，就解决了父级div无法自动获取到高度的问题；
  - 优点：简单，代码少，容易掌握；
  - 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题；
  - 建议：不推荐使用，只建议高度固定的布局时使用。
- 父级div定义 overflow:hidden 或 overflow:auto
  - 原理：必须定义 width 或 zoom:1，同时不能定义 height，使用overflow:hidden 时，浏览器会自动检查浮动区域的高度；
  - 优点：简单，代码少，浏览器支持好；
  - 缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏；
  - 建议：只推荐没有使用 position 或对 overflow:hidden 理解比较深的朋友使用；

4. CSS优化，提高性能的方法有哪些？

加载性能：
1. CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。
2. CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: 0 0; 比 margin-top: 0; margin-bottom: 0; 执行的效率更高。
选择器性能：
1. 关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。

5. 如何实现一个 div 的上下垂直居中？

水平居中

使用 margin: 0 auto;（只适用于子盒子有宽的时候）
```
.child {
 	margin: 0 auto;
}
```

text-align + display（子盒子有或没有宽度的时候都适用）

.parent {
 	text-align: center;
}
.child {
 	display: inline-block;
}

position 定位（只适用于子盒子有宽度和高度的时候）

.parent {
 	position: relative;
}
.child {
 	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -25px;  /* 子盒子自身宽度一半 */
}

position + transform（子盒子有或没有宽高的时候都适用）

.parent {
 	position: relative;
}
.child {
 	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用）
```
.parent {
 	display: flex;
 	justify-content: center;
}
```

垂直居中

行高法 line-height

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
```
p { 
	height:30px; 
	line-height:30px; 
	width:100px; 
	overflow:hidden; 
}
```
这段代码可以达到让文字在段落中垂直居中的效果。
内边距法 padding

这一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用 padding 将内容垂直居中，比如：
```
p { padding:20px 0; }
```

position + CSS3的 transform 来实现

.parent {
 	position: relative;
}
.child {
 	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

flex 布局

.parent {
    display: flex;  /*flex 布局*/
    align-items: center;  /*实现垂直居中*/
    justify-content: center;  /*实现水平居中*/
}

position 定位（适用于子盒子有宽度和高度的时候）

.parent {
 	position: relative;
}
.child {
 	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;  /* 子盒子自身高度一半 */
	margin-left: -25px;  /* 子盒子自身宽度一半 */
}

6. CSS里的`visibility`属性有个`collapse`属性值？在不同浏览器下有什么区别？

visibility 属性规定元素是否可见。

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的：

Chrome中，使用collapse值和使用hidden没有区别；
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

7. `display:none`与`visibility：hidden`的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

8. `position`跟`display`、`overflow`、`float`这些特性相互叠加后会怎么样？

display 属性规定元素应该生成的框的类型；
position 属性规定元素的定位类型；
float 属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

9. 对BFC规范(块级格式化上下文：`block formatting context`)的理解？

BFC规定了内部的Block Box如何布局。
具体深入理解请移步至：对BFC的深层理解

10. 上下 `margin` 重合的问题?

在重合元素外包裹一层容器，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠。

11. 移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的 css，适应相应的设备的显示。

<head> 里边引入：

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

CSS中定义：

@media only screen and (max-device-width:480px) { /* css样式 */ }

12. CSS优化、提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免 !important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

13. 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。

若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的Attachment过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

14. 在网页中的应该使用奇数还是偶数的字体？为什么呢？

尽量使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

15. 全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过 transform 进行y轴定位，也可以通过 margin-top 实现。
属性：overflow：hidden；transition：all 1000ms ease；

16. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询 @media 检测不同的设备屏幕尺寸做处理。
兼容低版本IE 可以使用JS辅助一下来解决。

17. 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
实现方式：

CSS3 实现
优点：开发时间短、性能和开发效率比较好；
缺点是不能兼容到低版本的浏览器
jQuery 实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性比较好

18. `::before` 和 `:after` 中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号( : )用于 CSS3 伪类，双冒号( :: )用于CSS3伪元素。
::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在于页面之中。

:before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为 ::before ::after。

19. 怎么让 Chrome 支持小于12px 的文字？

使用 transform:scale() 进行缩放即可实现。

p{
  	font-size:10px;
    -webkit-transform:scale(0.8); //0.8是缩放比例
}

20. 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing 在window系统下没有起作用，但是在IOS设备上起作用
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

21. `position:fixed;` 在 `android` 下无效怎么处理？

< meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

22. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

23. `li` 与 `li` 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

可以将 <li> 代码全部写在一排
浮动 li 中 float：left
在 ul 中用 font-size：0（谷歌不支持）；可以使用 letter-space：-3px

24. `display:inline-block` 什么时候会显示间隙？

有空格时候会有间隙——解决：移除空格
margin 正值的时候——解决：margin使用负值
使用 font-size 时候——解决：font-size:0、letter-spacing、word-spacing

25. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。大多数地方都可以用。
jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
webp 格式是谷歌在2010年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png小了 45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持。

26. `style` 标签写在 `body` 后与 `body` 前有什么区别？

页面加载自上而下当然是先加载样式。
写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

27. CSS属性 `overflow` 属性定义溢出元素内容区的内容会如何处理?

参数是 scroll 时候，必会出现滚动条。
参数是 auto 时候，子元素内容大于父元素时出现滚动条。
参数是 visible 时候，溢出的内容出现在父元素之外。
参数是 hidden 时候，溢出隐藏。

28. 阐述一下CSS Sprites（雪碧图）

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

29. `Sass`、`Less` 是什么？大家为什么要使用他们？

他们是CSS预处理器。是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。

Less 是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行（支持IE6+,Webkit,Firefox），也可以在服务端运行（借助Node.js）。
Sass 变量必须是 $ 开始，而 Less 变量必须使用 @ 符号开始。

为什么要使用它们？