七道重要CSS面试题
- coldplay.xixi转载
- 2020-08-03 15:32:233285浏览
目录
- 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中文网其他相关文章！