七道重要CSS面试题-tutorial css-php.cn

七道重要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;}

Salin selepas log masuk

对于选择器的优先级：

元素选择器：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中的盒模型

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