[轻松拿offer]Web前端面试真题CSS系列---带详解！

谁借莪１个温暖的怀抱￠ 2022-09-07 15:50 126阅读 0赞

> 临近秋招，不少小伙伴开始了求职之路，面试是十分重要的考验，其次也离不开面试题。网上的面试题零零散散，十分混乱，正好我抽时间帮助大家总结一下。难易程度肯定是从简到难，今天是第一篇的续集——基础篇中的CSS部分。

面试题来源是我从网上花钱购买的真题，是有专人亲自面试总结出来的精题，也是高频问题。

是一套完整的面试题库，如果有小伙伴需要可以下载。（面试题900题+公司实战面试题400问）

[♥♥♥♥][Link 1][完整面试题库][Link 1][♥♥♥♥][Link 1]

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70][] CSS部分 #

### 1 css sprite是什么,有什么优缺点 ###

> 概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。  
> 优点：  
>          减少 HTTP 请求数，极大地提高页面加载速度  
>          增加图片信息重复度，提高压缩比，减少图片大小  
>          更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
> 
> 缺点：  
>         图片合并麻烦  
>         维护麻烦，修改一个图片可能需要从新布局整个图片样式

### 2 display: none; 与 visibility: hidden; 的区别 ###

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

### 3 link 与 @import 的区别 ###

> 1. link 是 HTML 方式， @import 是CSS方式  
> 2. link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式  
> 短暂失效)  
> 3. link 可以通过 rel="alternate stylesheet" 指定候选样式  
> 4. 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式  
> 5. @import 必须在样式规则之前，可以在css文件中引用其他文件  
> 6. 总体来说： link 优于 @import

### 4 什么是FOUC?如何避免 ###

> Flash Of Unstyled Content ：用户定义样式表加载之前浏览器使用默认样式显示文  
> 档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。  
> 解决方法：把样式表放到文档的 <head>

### 5 如何创建块级格式化上下文(block formatting context),BFC有什么用 ###

> 1.创建规则：  
> 根元素  
> 浮动元素（ float 不取值为 none ）  
> 绝对定位元素（ position 取值为 absolute 或 fixed ）  
> display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素  
> overflow 不取值为 visible 的元素  
> 2.作用：  
> 可以包含浮动元素  
> 不被浮动元素覆盖  
> 阻止父子元素的 margin 折叠

### 6 display、float、position的关系 ###

> 1.如果 display 取值为 none ，那么 position 和 float 都不起作用，这种情况下元素不产生框  
> 2.否则，如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计算值为 none ， display 根据下面的表格进行调整。  
> 3.否则，如果 float 不是 none ，框是浮动的， display 根据下表进行调整  
> 4.否则，如果元素是根元素， display 根据下表进行调整  
> 5.其他情况下 display 的值为指定值  
> 6.总结起来：绝对定位、浮动、根元素都需要调整 display

### 7 清除浮动的几种方式，各自的优缺点 ###

> 父级 div 定义 height  
> 结尾处加空 div 标签 clear:both  
> 父级 div 定义伪类 :after 和 zoom  
> 父级 div 定义 overflow:hidden  
> 父级 div 也浮动，需要定义宽度  
> 结尾处加 br 标签 clear:both

### 8 为什么要初始化CSS样式? ###

> 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化  
> 往往会出现浏览器之间的页面显示差异。  
> 当然，初始化样式会对 SEO 有⼀定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

### 9 css3有哪些新特性 ###

> 新增各种 css 选择器  
> 圆角 border-radius  
> 多列布局  
> 阴影和反射  
> 文字特效 text-shadow  
> 线性渐变  
> 旋转 transform

### 10 CSS3新增伪类有那些？ ###

> p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。  
> p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。  
> p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。  
> p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。  
> p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。  
> :after 在元素之前添加内容,也可以用来做清除浮动。  
> :before 在元素之后添加内容。  
> :enabled 已启用的表单元素。  
> :disabled 已禁用的表单元素。  
> :checked 单选框或复选框被选中

### 11 display有哪些值？说明他们的作用 ###

> block 转换成块状元素。  
> inline 转换成行内元素。  
> none 设置元素不可见。  
> inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。  
> list-item 象块类型元素一样显示，并添加样式列表标记。  
> table 此元素会作为块级表格来显示  
> inherit 规定应该从父元素继承 display 属性的值

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

> 有两种， IE 盒子模型、 W3C 盒子模型；  
> 盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；  
> 区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;

### 13 CSS优先级算法如何计算？ ###

> 优先级就近原则，同权重情况下样式定义最近者为准
> 
> 载入样式以最后载入的定位为准
> 
> 优先级为: !important > id > class > tag ;
> 
> !important 比内联优先级高

### 14 谈谈浮动和清除浮动 ###

> 浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

### 15 position的值， relative和absolute定位原点是 ###

> absolute ：生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位  
> fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位  
> relative ：生成相对定位的元素，相对于其正常位置进行定位  
> static 默认值。没有定位，元素出现在正常的流中  
> inherit 规定从父元素继承 position 属性的值

### 16 display:inline-block 什么时候不会显示间隙？(携程) ###

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

### 17 PNG\\GIF\\JPG的区别及如何选 ###

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

### 18 行内元素float:left后是否变为块级元素？ ###

> 行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

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

> 偶数字号相对更容易和 web 设计的其他部分构成比例关系

### 20 ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这两个伪元素的作用 ###

> 单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素  
> 用于区分伪类和伪元素

###  21 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） ###

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

### 22 CSS合并方法 ###

> 避免使用 @import 引入多个 css文件，可以使用 CSS 工具将 CSS 合并为一个 CSS 文件，例如使用 Sass\\Compass 等

### 23 CSS不同选择器的权重(CSS层叠的规则) ###

> ！important 规则最重要，⼤于其它规则行内样式规则，加 1000  
> 对于选择器中给定的各个 ID 属性值，加 100  
> 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10  
> 对于选择其中给定的各个元素标签选择器，加1  
> 如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

### 24 列出你所知道可以改变页面布局的属性 ###

> position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 、

### 25 CSS在性能优化方面的实践 ###

> css 压缩与合并、 Gzip 压缩  
> css文件放在 head 里、不要用 @import  
> 尽量用缩写、避免用滤镜、合理使用选择器

### 26 CSS3动画（简单动画的实现，如旋转等） ###

>       依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation  
>       transition ：定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。  
>       transform ：定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。  
>       animation ：动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括animationname ， animation-duration 、 animation-timing-function 、 animationdelay 、 animation-iteration-count 、 animation-direction

### 27 base64的原理及优缺点 ###

> 优点可以加密，减少了 HTTTP 请求  
> 缺点是需要消耗 CPU 进行编解码

### 28 几种常见的CSS布局 ###

**流体布局**

.left {
    float: left;
    width: 100px;
    height: 200px;
    background: red;
    }
    .right {
    float: right;
    width: 200px;
    height: 200px;
    background: blue;
    }
    .main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background: green;
    }
    <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    </div>

**圣杯布局**

.container {
    margin-left: 120px;
    margin-right: 220px;
    }
    .main {
    float: left;
    width: 100%;
    height:300px;
    background: green;
    }
    .left {
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    width: 100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    position: relative;
    right: -220px;
    float: right;
    height: 300px;
    width: 200px;
    margin-left: -200px;
    background: blue;
    } <
    div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>

**双飞翼布局**

.content {
    float: left;
    width: 100%;
    }
    .main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
    }
    .main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
    }
    .left {
    float:left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background: red;
    }
    .right {
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background: blue;
    } <
    div class="content">
    <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

### 29 stylus/sass/less区别 ###

> 1.均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性  
> 2.Scss 和 LESS 语法较为严谨， LESS 要求一定要使用大括号“\{\}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系  
> 3.Scss 无全局变量的概念， LESS 和 Stylus 有类似于其它语言的作用域概念  
> 4.Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；

###    30 postcss的作用 ###

> 1.可以直观的理解为：它就是⼀个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让⼀些插件在它上面跑，那么将会很强大  
> 2.PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树  
> 3.通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的 CSS ，比如热门的： autoprefixer  
> 4.postcss 可以对sass处理过后的 css 再处理 最常见的就是 autoprefixer

# 下集预告：JavaScript部分 #

# 关注专栏，更新不断，祝你轻松拿offer #

[Link 1]: https://download.csdn.net/download/qq_46285118/21426432?spm=1001.2014.3001.5503
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]: /images/20220829/8b76b5b798f4457a82ef293b04b13fb5.png