七道重要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的属性值是什么？

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或网页

6. CSS选中器是什么？优先级？

假如需要选中紧接在另一个元素后的元素，并且二者有雷同的父元素，可以使用相邻兄弟选中器.例如，假如要增添紧接在 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的属性值是什么？

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或网页

6. CSS选中器是什么？优先级？

假如需要选中紧接在另一个元素后的元素，并且二者有雷同的父元素，可以使用相邻兄弟选中器.例如，假如要增添紧接在 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面试题的具体内容，更多请关注百分百源码网其它相关文章！