【Web前端面试】葵花宝典（2022版本）——CSS篇

前言

本篇文章主要写的是面试题中的CSS篇，如果有需要http/html/浏览器方面面试题的小伙伴们，请在下方评论区留言，下一篇我会更新相关面试题。如果没有的话，下一篇预备更新 JS相关面试题

面试题参考文章：

• 【Web前端面试】葵花宝典 （2022版本）—— JS篇（上）
• 【Web前端面试】葵花宝典(2022版本)—— JS篇（下）
• 【Web前端面试】葵花宝典(2022版本)—— Vue篇
• 【JavaScript】中this指向相关的经典面试题
• 【JavaScript】作用域提升面试题（详解）

正文

1.说一下css盒模型

简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

2.说一下CSS 3中引入的box-sizing属性

• box-sizing:content-box 表示标准的盒子模型，左右 border+左右 padding+width
• box-sizing:border-box 表示的是 IE 盒子模型,IE 盒子模型的盒子宽度：width,width 表示 content+padding+border 这三个部分的宽度
• box-sizing:padding-box这个属性值的宽度包含了左右 padding+width

3.link 标签和import标签的区别

答：

• link属于html标签，而@import是css提供的
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重高于@import的。

4.transition和animation的区别

animation和transition大部分属性是相同的，他们都是随事件改变元素的属性值，他们的主要区别是：transition需要触发一个事件才能改变属性值，而animation不需要触发任何事件的情况下才会随事件改变属性值，并且transition为2帧，从from…to，而animation可以一帧一帧的。

5.说说flex布局

详细讲解请移步至这篇文章：Flex 布局

6.BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

BFC区域不会与float box重叠

BFC 是页面上的一个独立的容器，子元素不会影响到外面

计算 BFC 的高度时，浮动元素也会参与计算

哪些元素会生成BFC？

• 根元素
• float 不为 none的元素
• position为fixed 和 absolute 的元素
• display 为 inline-block、table-cell、table-caption、flex、inline-flex 的元素
• overflow不为 visible的元素

7.关于JS动画和css3动画的差异性

渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity， 这时整个 CSS 动画得以在 compositor trhead 完成（而 JS 动画则会在 main thread 执行，然 后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的

区别：

1. 功能涵盖面，JS比CSS大
2. 实现/重构难度不一，css3比JS更加简单，性能调优方向固定
3. 对帧素表现不好的低版本浏览器，css3可以做到自然降级
4. css动画有天然事件支持
5. css3有兼容性问题

8.说一下块元素和行元素

• 块元素：独占一行，并且有自动填满父元素，可以设置margin和padding以及高度和宽度
• 行元素：不会独占一行，width和height会失效，并且在垂直方向上的padding和margin会失效

9.多元素的文本省略号

overflow:hidden
dispaly:-webkit-box /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient:vertical /*必须结合的属性 ，设置伸缩盒对象的子元素垂直排列 。*/
-webkit-line-clamp:3 /*可以显示的行数，超出部分用...表示*/
text-overflow:ellipsis /*多行文本的情况下，用省略号“...”隐藏溢出范围的文本*/

10.双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠

折叠的结果为：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

11.position属性比较

• 固定定位 fixed

  元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

• 相对定位 relative

  如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

• 绝对定位 absolute

  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

• 粘性定位 sticky

  元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位

• 默认定位 static

  默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right 或者 z-index声明）。

• inherit

  规定应该从父元素继承 position 属性的值。

12. CSS3新特性都有哪些？

开放题。

• CSS3边框如border-radius，box-shadow 等；
• CSS3 背景如 background-size， background-origin 等；
• CSS3 2D，3D 转换如 transform 等；
• CSS3 动画如 animation 等。

13.CSS 选择器有哪些，优先级呢

• 选择器：

  • id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等；

• 优先级：

  • 同一元素引用了多个样式时，排在后面的样式属性的优先级高；

  • 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；、

  • 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了 与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级 比较低，至少比标签选择器的优先级低

  • 带有!important 标记的样式属性的优先级最高；

  • 样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户 自定义样式 > 浏览器默认样式

14. 怎么样让一个元素消失，讲讲

答： display:none; visibility:hidden; opacity: 0; 等

15. css动画如何实现

• 创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长 以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是 由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。
• transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生 的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生 （例如 hover）时才能获取样式，这样就会产生过渡动画。

16. 如何实现图片在某个容器中居中？

1. 父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半。
2. 父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin
3. css3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可
4. 将父元素设置成 display: table ,子元素设置为单元格 display: table-cell。
5. 弹性布局 display: flex。设置 align-items: center; justify-content: center

17. 如何实现垂直居中？

1. 父元素display:flex;align-items:center;
2. 元素绝对定位absolute，top:50%，margin-top：-（高度/2）
3. 高度不确定用 transform：translateY（-50%）
4. 父元素 table 布局，子元素设置 vertical-align:center

18. CSS3中对溢出的处理是什么？

text-overflow 属性，三个可选值如下：

• clip 是修剪文本；
• ellipsis 为显示省略符号来表被修剪的文本；
• string 为使用给定的字符串来代表被修剪的文本。

19. float 的元素，display 是什么

答：display为block

20. display：table 和本身的 table

display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定 义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致 的语义化问题。

之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table 边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table 的嵌套性太多，没有 div 简洁

21. z-index的定位方法

z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前， z-index 可以为负，且 z-index 只能在定位元素上奏效

该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有 auto、默认、 堆叠顺序与父元素相等、number、inherit、从父元素继承 z-index 属性的值。

22.如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作有什么办法？

答：可以更改父元素的color

23.对 CSS 的新属性有了解过的吗？

CSS3 的新特性中

• 在布局方面新增了 flex 布局，

• 在选择器方面新增了例如 first-of-type,nth-child 等选择器

• 在盒模型方面添加了 box-sizing 来改变盒模型

• 在动画 方面增加了 animation，2d 变换，3d 变换等

• 在颜色方面添加透明，rbga 等

• 在字体方 面允许嵌入字体和设置字体阴影，最后还有媒体查讯等

24. line-height 和 height 的区别

• line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的

• height 一般是指容器的整体高度。

25.设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color 设置的背景颜色会填充元素的 content、padding、border 区域。

26. 知道属性选择器和伪类选择器的优先级吗

属性选择器和伪类选择器优先级相同

27.inline-block、inline 和 block 的区别

• block 是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直 方向都有效。

• inline：设置 width 和 height 无效，margin 在竖直方向上无效，padding 在水平方向垂直 方向都有效，前后无换行符

• inline-block：能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符

28.为什么 img 是 inline 还可以设置宽

涉及到一个概念：**可替换元素**

 可替换元素比如`img` `input`等 ,它们的内容不受当前文档的样式的影响 CSS 可以影响他们的位置,但不会影响到内容 ，他们的内容都不是通过在标签内添加文本,而是通过某个属性(比如src、data、label或js控制)来显示内容的，可替换元素拥有内置宽高,他们可以设置width和height。 他们的性质同设置了`display:inline-block`的元素一致。 所以`img`是`inline`元素但是可以设置宽高。

29. 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性， 其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排， 浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。

引起重排重绘的原因有：

• 添加或者删除可见的 DOM 元素
• 元素尺寸位置的改变 浏览器页面初始化
• 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重

减少重绘重排的方法有：

• 不在布局信息改变时做 DOM 查询
• 使用 csstext,className 一次性改变属性
• 使用 fragment 对于多次重排的元素，比如说动画
• 使用绝对定位脱离文档流，使其不影响其他元素

30. overflow 的原理

当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个 BFC，BFC 在计算 高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动 元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的

31. display:none 和 visibilty:hidden 的区别

• visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉

32.谈谈你知道的css布局都有哪些？

六种布局方式总结：圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网 格布局。

• 圣杯布局是指布局从上到下分为 header、container、footer，然后 container 部分定为三栏 布局。这种布局方式同样分为 header、container、footer。圣杯布局的缺陷在于 center 是 在 container 的 padding 中的，因此宽度小的时候会出现混乱。
• 双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
• Flex 布局是由 CSS3 提供的一种方便的布局方式。
• 绝对定位布局是给 container 设置 position: relative 和 overflow: hidden，因为绝对定位的元 素的参照物为第一个 postion 不为 static 的祖先元素。 left 向左浮动，right 向右浮动。 center 使用绝对定位，通过设置 left 和 right 并把两边撑开。 center 设置 top: 0 和 bottom: 0 使其高度撑开。
• 表格布局的好处是能使三栏的高度统一。
• 网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。 网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关 系

33. css预处理器有什么？

• less
• sass等

本期前端面试葵花宝典CSS篇就完结了，预计下一篇更新JavaScript相关面试题，喜欢的小伙伴一键三连哦，有兴趣的可以订阅专栏哦