七道重要CSS面试题

七道重要CSS面试题

• 来源:网络
• 更新日期:2020-08-03

摘要：目录1. CSS3中的盒模型2. display:none与visibility:hidden的区别3. 说一说CSS的sprite（精灵图）4. position的属性值有哪些？5. PNG、GIF、JPG、WEBP的区别以及如何选择？6. CSS选

目录1. CSS3中的盒模型2. display:none与visibility:hidden的区别3. 说一说CSS的sprite（精灵图）4. position的属性值有哪些？5. PNG、GIF、JPG、WEBP的区别以及如何选择？6. CSS选择器有哪些？优先级？7. 浮动相关（1）什么时候需要清除浮动？

（2）如何清除浮动？

专题推荐：2020年CSS面试题汇总（最新）

1. CSS3中的盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型

标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。

在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

在盒子模型中

box-sizeing:content-box表示标准盒模型（默认值）box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

除此之外，还有：Flex弹性伸缩盒模型

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

区别：

（1）在渲染树中

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

（2）继承

display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

3. 说一说CSS的sprite（精灵图）

概念：

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

减少HTTP请求数，在一定程度上提高了页面的加载速度减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

维护比较麻烦，如果页面背景有一点改变，就需要修改整个合并的图片合并比较麻烦，需要将多张图片有序的合理的合并为一张图片，还要预留一定的空间，防止出现不必要的背景在宽屏或者高分辨率屏幕下的自适应页面，如果图片不够宽，就可能出现背景断裂的情况4. position的属性值有哪些？属性值概述absolute生成绝对定位的元素，相对于static定位以外的一个父元素进行定位relative生成相对定位的元素，相对于其原来的位置进行定位fixed生成绝对定位的元素，相对于浏览器窗口进行定位static默认值，没有定位，元素出现在正常的文档流中inherit规定从父元素继承position属性的值5. PNG、GIF、JPG、WEBP的区别以及如何选择？

（1）GIF

GIF图片只存储8位索引，最多支持256色，采用无损压缩，尺寸较小支持透明和简单动画

适用于：色彩简单的logo，icon，线框图，简单的动画

（2）JPG

采用有损压缩，可以控制压缩的质量采用直接色，色彩丰富不支持透明

适用于：色彩丰富的图片、渐变图像

（3）PNG

png-8是采用无损压缩，基于8位索引色的位图格式，比gif的透明的支持更好，同等质量下大小也更小，但是不支持动画。适用于图标，背景，按钮。png-24采用无损压缩，是基于直接色的位图格式，大小相对以上几种更大，但是图片质量高，适用于源文件或者需要二次编辑的图片格式的保存。

（4）WEBP

由Google开发，体积更小支持有损压缩和无损压缩支持透明和动画

适用于：支持webp的APP或网页

格式优点缺点适用场景gif文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图jpg色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像png无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图webp文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性不好支持webp格式的app和webview6. CSS选择器有哪些？优先级？选择器格式标签选择器p类选择器#myclassnameid选择器#myid相邻兄弟选择器h1+p子选择器ul>li后代选择器li a通配符选择器*属性选择器a[ref=“eee”]伪类选择器li:last-child

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器.例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

对于选择器的优先级：

元素选择器：1class选择器：10id 选择器：100元素标签：1000

需要注意的是：

!important声明的样式的优先级最高如果优先级相同，则最后出现的样式生效继承得到的样式的优先级最低

属性继承性：

可以继承的属性：font-size、font-family、color不可以继承的样式：border、padding、margin、width、height7. 浮动相关

元素设置为浮动之后，display会自动变成block。

（1）什么时候需要清除浮动？

浮动造成的问题如下：

父元素的高度无法撑开，影响与父级同级的元素与浮动元素同级的非浮动元素给跟随在它后面若一个元素浮动，则其前面的元素也需要浮动，否则会影响页面的结构（2）如何清除浮动？

清除浮动的方式如下：

给父级p定义height属性最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

目录1. CSS3中的盒模型2. display:none与visibility:hidden的区别3. 说一说CSS的sprite（精灵图）4. position的属性值有哪些？5. PNG、GIF、JPG、WEBP的区别以及如何选择？6. CSS选择器有哪些？优先级？7. 浮动相关（1）什么时候需要清除浮动？（2）如何清除浮动？1. CSS3中的盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型

标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。

在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

在盒子模型中

box-sizeing:content-box表示标准盒模型（默认值）box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

除此之外，还有：Flex弹性伸缩盒模型

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

区别：

（1）在渲染树中

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

（2）继承

display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

3. 说一说CSS的sprite（精灵图）

概念：

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

减少HTTP请求数，在一定程度上提高了页面的加载速度减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

维护比较麻烦，如果页面背景有一点改变，就需要修改整个合并的图片合并比较麻烦，需要将多张图片有序的合理的合并为一张图片，还要预留一定的空间，防止出现不必要的背景在宽屏或者高分辨率屏幕下的自适应页面，如果图片不够宽，就可能出现背景断裂的情况4. position的属性值有哪些？属性值概述absolute生成绝对定位的元素，相对于static定位以外的一个父元素进行定位relative生成相对定位的元素，相对于其原来的位置进行定位fixed生成绝对定位的元素，相对于浏览器窗口进行定位static默认值，没有定位，元素出现在正常的文档流中inherit规定从父元素继承position属性的值5. PNG、GIF、JPG、WEBP的区别以及如何选择？

（1）GIF

GIF图片只存储8位索引，最多支持256色，采用无损压缩，尺寸较小支持透明和简单动画

适用于：色彩简单的logo，icon，线框图，简单的动画

（2）JPG

采用有损压缩，可以控制压缩的质量采用直接色，色彩丰富不支持透明

适用于：色彩丰富的图片、渐变图像

（3）PNG

png-8是采用无损压缩，基于8位索引色的位图格式，比gif的透明的支持更好，同等质量下大小也更小，但是不支持动画。适用于图标，背景，按钮。png-24采用无损压缩，是基于直接色的位图格式，大小相对以上几种更大，但是图片质量高，适用于源文件或者需要二次编辑的图片格式的保存。

（4）WEBP

由Google开发，体积更小支持有损压缩和无损压缩支持透明和动画

适用于：支持webp的APP或网页

格式优点缺点适用场景gif文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图jpg色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像png无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图webp文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性不好支持webp格式的app和webview6. CSS选择器有哪些？优先级？选择器格式标签选择器p类选择器#myclassnameid选择器#myid相邻兄弟选择器h1+p子选择器ul>li后代选择器li a通配符选择器*属性选择器a[ref=“eee”]伪类选择器li:last-child

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器.例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

对于选择器的优先级：

元素选择器：1class选择器：10id 选择器：100元素标签：1000

需要注意的是：

!important声明的样式的优先级最高如果优先级相同，则最后出现的样式生效继承得到的样式的优先级最低

属性继承性：

可以继承的属性：font-size、font-family、color不可以继承的样式：border、padding、margin、width、height7. 浮动相关

元素设置为浮动之后，display会自动变成block。

（1）什么时候需要清除浮动？

浮动造成的问题如下：

父元素的高度无法撑开，影响与父级同级的元素与浮动元素同级的非浮动元素给跟随在它后面若一个元素浮动，则其前面的元素也需要浮动，否则会影响页面的结构（2）如何清除浮动？

清除浮动的方式如下：

给父级p定义height属性最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

相关教程推荐：CSS视频教程