重要的七道CSS面试题

这篇文章将为大家详细讲解有关重要的七道CSS面试题,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联建站专注于盐都网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供盐都营销型网站建设,盐都网站制作、盐都网页设计、盐都网站官网定制、重庆小程序开发服务,打造盐都网络公司原创品牌,更为您提供盐都网站排名全网营销落地服务。

目录

      • 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盒模型

重要的七道CSS面试题
重要的七道CSS面试题

  • 标准盒模型和IE盒模型的区别就是:标准盒模型的宽高指的是内容的宽高,而IE盒模型的宽高指的是内容,内边距,边框的总和。

  • 在CSS3中,可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高,但是,如果想要改变border,这样盒子的大小就会发生改变,我们就可以将其转化为IE盒模型,就不用每次计算盒子内容大小了。

  • 在盒子模型中

    • box-sizeing:content-box表示标准盒模型(默认值)
    • box-sizeing:border-box表示IE盒模型(也就是怪异盒模型)

除此之外,还有:Flex弹性伸缩盒模型

重要的七道CSS面试题

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
相邻兄弟选择器h2+p
子选择器ul>li
后代选择器li a
通配符选择器*
属性选择器a[ref=“eee”]
伪类选择器li:last-child

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

h2 + 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

undefined

目录

      • 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盒模型

重要的七道CSS面试题
重要的七道CSS面试题

  • 标准盒模型和IE盒模型的区别就是:标准盒模型的宽高指的是内容的宽高,而IE盒模型的宽高指的是内容,内边距,边框的总和。

  • 在CSS3中,可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高,但是,如果想要改变border,这样盒子的大小就会发生改变,我们就可以将其转化为IE盒模型,就不用每次计算盒子内容大小了。

  • 在盒子模型中

    • box-sizeing:content-box表示标准盒模型(默认值)
    • box-sizeing:border-box表示IE盒模型(也就是怪异盒模型)

除此之外,还有:Flex弹性伸缩盒模型

重要的七道CSS面试题

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
相邻兄弟选择器h2+p
子选择器ul>li
后代选择器li a
通配符选择器*
属性选择器a[ref=“eee”]
伪类选择器li:last-child

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

h2 + 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面试题
文章URL:http://myzitong.com/article/ijjodd.html