目录
- 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盒模型
大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中 进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看
-
标准盒模型和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视频教程
