Web前端面试真题CSS系列---带详解!

网友投稿 796 2022-05-29

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

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

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

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" 指定候选样式

Web前端面试真题CSS系列---带详解!

4. 浏览器对 link 支持早于 @import ,可以使用 @import 对老浏览器隐藏样式

5. @import 必须在样式规则之前,可以在css文件中引用其他文件

6. 总体来说: link 优于 @import

4 什么是FOUC?如何避免

Flash Of Unstyled Content :用户定义样式表加载之前浏览器使用默认样式显示文

档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。

解决方法:把样式表放到文档的

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:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

: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; }

圣杯布局

.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">

双飞翼布局

.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">

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

CSS 渲染

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(1)
下一篇:iOS基础: RACMulticastConnection使用步骤
相关文章