七道重要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和webview

6. CSS选择器有哪些？优先级？

选择器	格式
标签选择器	p
类选择器	#myclassname
id选择器	#myid
相邻兄弟选择器	h1+p
子选择器	ul>li
后代选择器	li a
通配符选择器	*
属性选择器	a[ref=“eee”]
伪类选择器	li:last-child

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

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

对于选择器的优先级：

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

需要注意的是：

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

属性继承性：

• 可以继承的属性：font-size、font-family、color
• 不可以继承的样式：border、padding、margin、width、height

7. 浮动相关

元素设置为浮动之后，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和webview

6. CSS选择器有哪些？优先级？

选择器	格式
标签选择器	p
类选择器	#myclassname
id选择器	#myid
相邻兄弟选择器	h1+p
子选择器	ul>li
后代选择器	li a
通配符选择器	*
属性选择器	a[ref=“eee”]
伪类选择器	li:last-child

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

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

对于选择器的优先级：

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

需要注意的是：

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

属性继承性：

• 可以继承的属性：font-size、font-family、color
• 不可以继承的样式：border、padding、margin、width、height

7. 浮动相关

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

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

浮动造成的问题如下：

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

（2）如何清除浮动？

清除浮动的方式如下：

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

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

以上是七道重要CSS面试题的详细内容。更多信息请关注PHP中文网其他相关文章！