前端面试大全（CSS篇——2/2）

人间小美味695

已于 2022-11-18 22:33:29 修改

阅读量658

点赞数 10

分类专栏：前端 # CSS # 面试文章标签：前端面试 css

于 2021-05-20 09:30:52 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/117020429

版权

前端同时被 3 个专栏收录

25 篇文章 8 订阅

订阅专栏

面试

7 篇文章 3 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

全屏滚动的原理就是每次滚动滚轮，屏幕移动的距离就刚好是一个屏幕的距离，利用css的高度百分比实现这个效果，因为设定百分比的值是需要更具父元素设置的所以需要给html，body都设置为高度百分百，然后一层一层的设置，用js控制鼠标滚轮事件

25、什么是响应式设计？响应式设计的基本原理是什么？

响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案
基本原理就是利用css的媒体查询功能更具不同屏幕的大小，向下兼容设备、移动优先，达到响应的效果

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

双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

27、如何修改chrome记住密码后自动填充表单的黄色背景？

chrome 表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input : -webkit-autofill {
background-color : #FAFFBD ; background-image : none ; color : #000 ;
}

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了：
情景一：input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
}

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
height : 27px !important ; line-height : 27px !important ; border-radius : 0 4px 4px 0 ;
}

情景二：input文本框是使用图片背景的
这个比较麻烦，目前还没找到完美的解决方法，有两种选择：
1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js 去实现，例如：

$ ( function () {
if ( navigator . userAgent . toLowerCase (). indexOf ( "chrome" ) >= 0 ) {
$ ( window ). load ( function (){
$ ( 'ul input:not(input[type=submit])' ). each ( function (){
var outHtml = this . outerHTML ;
$ ( this ). append ( outHtml );
});
});
}
});

遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete=“off”。

28、你对line-height是如何理解的？

line－height：是用来设置字体的行高，可以理解为设置文字高度的占位大小，单位可以是数字，或者像素
数字：更具文字的大小来决定 1.5相当于文字大小的1.5倍
像素：就是通常的px大小了

29、怎么让Chrome支持小于12px 的文字？

文本内容固定不变的，可切图片适应兼容和美观
使用transform:scale()属性进行缩放：

	.text {
	    font-size: 10px;
	    -webkit-transform: scale(0.8);
	    display: block;
	}

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

	-webkit-font-smoothing: antialiased;

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

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

32、display:inline-block 什么时候会显示间隙？

移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing

33、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        /*方案一*/
        /* .outer {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
        }
        
        .topDiv {
            height: 100px;
            margin: -100px 0 0;
            background: #BBE8F2;
        }
        
        .bottomDiv {
            height: 100%;
            background: #D9C666;
        } */
        /*方案二*/
        /* .outer {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }
        
        .topDiv {
            height: 100px;
            background: #BBE8F2;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        
        .bottomDiv {
            height: 100%;
            background: #D9C666;
        } */
        /*方案三*/
        
        .outer {
            height: 100%;
            position: relative;
        }
        
        .topDiv {
            height: 100px;
            background: #BBE8F2;
        }
        
        .bottomDiv {
            background: #D9C666;
            width: 100%;
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="topDiv"></div>
        <div class="bottomDiv"></div>
    </div>
</body>

</html>

34、png、jpg、gif 这些图片格式解释一下，分别什么时候用？

图片类型	介绍	适合用途

GIF	8位像素，256色无损压缩支持简单动画支持boolean透明	适合简单动画
JPEG	颜色限于256 有损压缩可控制压缩质量不支持透明	适合照片
PNG	有PNG8和truecolor PNG PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画	适合图标、背景、按钮

35、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

36、什么是CSS 预处理器/ 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

37、什么是CSS reset？

重置浏览器标签的样式表

在HTML标签在浏览器里有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

38、css sprite是什么,有什么优缺点。

1、概念

将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案

2、优点

减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

3、缺点

图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式

39、你用过栅格系统吗？如果使用过，你最喜欢哪种？

大多数ui框架中栅格系统，我感觉栅格系统都差不多，如果非要说一个的话，我还是比较喜欢使用bootstrap
栅格系统可以实现响应式的移动端布局。
栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比，在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

40、渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

41、什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

<style type="text/css" media="all">@import "../fouc.css";</style>

原因：而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法： 只要在<head>之间加入一个<link>或者<script>元素就可以了。

42、display: none;与visibility: hidden;的区别

联系：
它们都能让元素不可见
区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容