前端面试题（CSS篇）

Posted 2021-04-09 前端小白的进击之路

今天为大家带来面试第二蛋，CSS篇！以下都是干货

1.css盒模型

• 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

• 在IE模型中: 总宽度 = margin-left + width + margin-right

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.

共包括两个选项：

• content-box：标准盒模型，CSS定义的宽高只包含content的宽高

• border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

2.CSS 选择器的优先级是如何计算的？

浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以a、b、c、d命名，分别代表以下含义：

• a表示是否使用内联样式（inline style）。如果使用，a为 1，否则为 0。

• b表示 ID 选择器的数量。

• c表示类选择器、属性选择器和伪类选择器数量之和。

• d表示标签（类型）选择器和伪元素选择器之和。

优先级的结果并非通过以上四个值生成一个得分，而是每个值分开比较。a、b、c、d权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。所以，如果b的值不同，那么c和d不管多大，都不会对结果产生影响。比如0，1，0，0的优先级高于0，0，10，10。

当出现优先级相等的情况时，最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则（无论是在该文件内部还是其它样式文件中），那么最后出现的（在文件底部的）样式优先级更高，因此会被采纳。

在写样式时，我会使用较低的优先级，这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要，这样使用者就不需要通过非常复杂的优先级规则或使用!important的方式，去覆盖组件的样式了。

参考

• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

• https://www.sitepoint.com/web-foundations/specificity/

3.重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？

• 重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。

• 标准化（Normalizing）： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。

当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。

参考

• https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

4.请阐述Float定位的工作原理

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

CSS 的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些方法，比如添加空的<div></div>和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需要给父元素添加一个类，定义如下：

.clearfix::after {  content: '';  display: block;  clear: both;
}

值得一提的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。

参考

• https://css-tricks.com/all-about-floats/

5.请阐述z-index属性，并说明如何形成层叠上下文（stacking context）。

CSS 中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position值不是static的元素。

没有定义z-index的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 html 层次结构如何。

层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的z-index值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的z-index值，元素 C 也永远不会在元素 B 之上.

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如opacity小于 1，filter不是none，transform不是none。

参考

• https://css-tricks.com/almanac/properties/z/z-index/

• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

6.请阐述块格式化上下文（Block Formatting Context）及其工作原理。

块格式上下文（BFC）是 Web 页面的可视化 CSS 渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。

一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：

• float的值不是none.

• position的值不是static或relative.

• display的值是table-cell、table-caption、inline-block、flex、或inline-flex。

• overflow的值不是visible。

在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。

两个相邻的块级盒在垂直方向上的边距会发生合并（collapse）。更多内容请参考边距合并（margin collapsing）。

参考

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

• https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

7.有哪些清除浮动的技术，都适用哪些情况？

• 空div方法：<div style="clear:both;"></div>。

• Clearfix 方法：上文使用.clearfix类已经提到。

• overflow: auto或overflow: hidden方法：上文已经提到。

在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。设置overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。

8.请解释什么是雪碧图（css sprites），以及如何实现？

雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：

• 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。

• 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。

• 使用图片时，将相应的类添加到你的元素中。

• 好处：

• 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。

• 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁。

参考

• https://css-tricks.com/css-sprites/

9.如何解决不同浏览器的样式兼容性问题？

• 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。

• 使用已经处理好此类问题的库，比如 Bootstrap。

• 使用 autoprefixer 自动生成 CSS 属性前缀。

• 使用 Reset CSS 或 Normalize.css。

10.如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？

• 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。

• Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.

• 渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。

• 利用 caniuse.com 检查特性支持。

• 使用 autoprefixer 自动生成 CSS 属性前缀。

• 使用 Modernizr进行特性检测。

11.有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？

这些方法与可访问性（a11y）有关。

• visibility: hidden：元素仍然在页面流中，并占用空间。

• width: 0; height: 0：使元素不占用屏幕上的任何空间，导致不显示它。

• position: absolute; left: -99999px： 将它置于屏幕之外。

• text-indent: -9999px：这只适用于block元素中的文本。

• Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。

• WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。

即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。

参考

• https://www.w3.org/TR/wai-aria-1.1/

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

• http://a11yproject.com/

12.除了screen，你还能说出一个 @media 属性的例子吗？

• all
  适用于所有设备。

• print
  为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。

• screen
  主要适用于彩色的电脑屏幕

• speech
  解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

13.使用 CSS 预处理的优缺点分别是什么？

优点：

• 提高 CSS 可维护性。

• 易于编写嵌套选择器。

• 引入变量，增添主题功能。可以在不同的项目中共享主题文件。

• 通过混合（Mixins）生成重复的 CSS。

• Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.

• 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

• 需要预处理工具。

• 重新编译的时间可能会很慢。

14.relative、fixed、absolute和static四种定位有什么区别？

经过定位的元素，其position属性值必然是relative、absolute、fixed或sticky。

• static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

• absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

• sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

参考

• https://developer.mozilla.org/en/docs/Web/CSS/position

15.水平垂直居中的方式？

flex

// 父容器
display: flex;
justify-content: center;
align-items: center;

position

// 父容器
position: relative;

// 子容器
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

position+transform

// 父容器
position: relative;

// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

table-cell

<div class="box">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.box {
    display: table;
    height: 100%;
    width: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner {
    background-color: #000;
    display: inline-block;
    width: 200px;
    height: 200px;
}

16.CSS中link和@import的区别？

a.从属关系区别a
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

b.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

c.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

d.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

e.权重区别
link引入的样式权重大于@import引入的样式。

17.文本超出部分显示省略号

单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

18.display: none; 与 visibility: hidden; 的区别

相同： 它们都能让元素不可见

区别：

• display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

• display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式

• 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘

• 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容

19.CSS 有哪些继承属性

• 关于文字排版的属性如：

• font

• word-break

• letter-spacing

• text-align

• text-rendering

• word-spacing

• white-space

• text-indent

• text-transform

• text-shadow

• line-height

• color

• visibility

• cursor

20.display,float,position 的关系

• 如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框

• 否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整

• 否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整

• 否则，如果元素是根元素，display 根据下表进行调整

• 其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

21.CSS3 有哪些新特性?

• 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

• 弹性盒模型 display: flex;

• 多列布局 column-count: 5;

• 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}

• 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

• 颜色透明度 color: rgba(255, 0, 0, 0.75);

• 圆角 border-radius: 5px;

• 渐变 background:linear-gradient(red, green, blue);

• 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

• 倒影 box-reflect: below 2px;

• 文字装饰 text-stroke-color: red;

• 文字溢出 text-overflow:ellipsis;

• 背景效果 background-size: 100px 100px;

• 边框效果 border-image:url(bt_blue.png) 0 10;

• 平滑过渡 transition: all .3s ease-in .1s;

• 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

• 转换

• 旋转 transform: rotate(20deg);

• 倾斜 transform: skew(150deg, -10deg);

• 位移 transform: translate(20px, 20px);

• 缩放 transform: scale(.5);

22.在 CSS 样式中常使用 px、em 在表现上有什么区别？

• px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能

• em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级 font-size

23.CSS 优化、提高性能的方法有哪些?

• 多个 css 合并，尽量减少 HTTP 请求

• 将 css 文件放在页面最上面

• 移除空的 css 规则

• 避免使用 CSS 表达式

• 选择器优化嵌套，尽量避免层级过深

• 充分利用 css 继承属性，减少代码量

• 抽象提取公共样式，减少代码量

• 属性值为 0 时，不加单位

• 属性值为小于 1 的小数时，省略小数点前面的 0

• css 雪碧图

24.css如何实现0.5px边框

方法一：利用渐变

关于渐变可以看下面两篇文章做深入了解：

CSS3 渐变（Gradients）

深入理解CSS3 gradient斜向线性渐变

实现原理：

把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。

代码如下：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框0.5px实现方法</title>
        <style type="text/css">
        .container{width: 500px;  margin: 0px auto;}
        .border-gradient{position:relative; padding: 10px;}
        .border-gradient:after {
          content: " ";
          position: absolute; 
          left: 0; 
          bottom: 0;
          width: 100%;
          height: 1px; 
          background-image: linear-gradient(0deg, #f00 50%, transparent 50%);            }‍
        </style>
    </head>
    <body>
        <div class="container">
            <h3>方案一：渐变</h3>
            <div class="border-gradient">
                原理：高度1px,背景渐变，一半有颜色，一半透明。
            </div>
        </div>
    </body>
</html>

方法二：利用缩放

原理：transform:scale()来达到压缩一半的目的。

代码如下：

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>边框0.5px实现方法</title>
        <style type="text/css">
            .container{
                width: 500px;
                margin: 0px auto;
            }
            .border-scale{
                position:relative;
                padding: 10px;
            }

            .border-scale:after{
                content: "  ";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: #f00;
                /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*/
                -webkit-transform: scaleY(.5);
                transform:scaleY(.5);
            }

        </style>
    </head>
    <body>
        <div class="container">
            <h3>方案二：使用缩放</h3>
            <div class="border-scale">
               原理： 在Y轴方向上，压缩一半。 
            </div>
        </div>
    </body></html>

25.css中高度坍塌问题及解决方案？

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

解决高度坍塌措施：

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
　　1.父元素的垂直外边距不会和子元素重叠
　　2.开启BFC的元素不会被浮动元素所覆盖
　　3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC
　　1.设置元素浮动(不推荐)
　　　　- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
　　2.设置元素绝对定位(不推荐)
　　3.设置元素为inline-block(不推荐)
　　- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
　　4.将元素的overflow设置为一个非visible的值（aotu hidden）
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
overflow: hidden;

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可。

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持。

高度坍塌的情况：

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
            .box1{
                /*为box1设置一个边框*/
                border: 10px red solid;
                
            }
            
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1">
            <div class="box2"></div>
        </div>
        
        <div class="box3"></div>
        
    </body></html>

高度坍塌的效果：

通过zoom和overflow解决问题：

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
            .box1{
                border: 10px red solid;
                zoom:1;
                overflow: hidden;
                
            }
            
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
                
            }
            
            .box3{
                 height: 100px;
                 background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1">
            <div class="box2"></div>
        </div>
        
        <div class="box3"></div>
        
    </body></html>

看下效果：