七道重要CSS面试题
(2)如何清除浮动?
1. CSS3中的盒模型专题推荐:2020年CSS面试题汇总(最新)
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
概念:
精灵图就是将多个小图片拼接在一个图片中,使用的时候通过background-position
元素尺寸调节需要显示的背景图案。
优点:
减少HTTP请求数,在一定程度上提高了页面的加载速度减少图片的体积,因为每个图片都有一个头信息,把多个图片放在一起,会共用一个头信息,较少了图片的字节数更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。减少了图片命名的困扰,只要给一张或几张图片命名即可缺点:
维护比较麻烦,如果页面背景有一点改变,就需要修改整个合并的图片合并比较麻烦,需要将多张图片有序的合理的合并为一张图片,还要预留一定的空间,防止出现不必要的背景在宽屏或者高分辨率屏幕下的自适应页面,如果图片不够宽,就可能出现背景断裂的情况4. position的属性值有哪些?(1)GIF
GIF图片只存储8位索引,最多支持256色,采用无损压缩,尺寸较小支持透明和简单动画适用于:色彩简单的logo,icon,线框图,简单的动画
(2)JPG
采用有损压缩,可以控制压缩的质量采用直接色,色彩丰富不支持透明适用于:色彩丰富的图片、渐变图像
(3)PNG
png-8是采用无损压缩,基于8位索引色的位图格式,比gif的透明的支持更好,同等质量下大小也更小,但是不支持动画。适用于图标,背景,按钮。png-24采用无损压缩,是基于直接色的位图格式,大小相对以上几种更大,但是图片质量高,适用于源文件或者需要二次编辑的图片格式的保存。(4)WEBP
由Google开发,体积更小支持有损压缩和无损压缩支持透明和动画适用于:支持webp的APP或网页
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器.例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
对于选择器的优先级:
元素选择器:1class选择器:10id 选择器:100元素标签:1000需要注意的是:
!important声明的样式的优先级高如果优先级相同,则最后出现的样式生效继承得到的样式的优先级低属性继承性:
可以继承的属性:font-size、font-family、color不可以继承的样式:border、padding、margin、width、height7. 浮动相关元素设置为浮动之后,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
概念:
精灵图就是将多个小图片拼接在一个图片中,使用的时候通过background-position
元素尺寸调节需要显示的背景图案。
优点:
减少HTTP请求数,在一定程度上提高了页面的加载速度减少图片的体积,因为每个图片都有一个头信息,把多个图片放在一起,会共用一个头信息,较少了图片的字节数更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。减少了图片命名的困扰,只要给一张或几张图片命名即可缺点:
维护比较麻烦,如果页面背景有一点改变,就需要修改整个合并的图片合并比较麻烦,需要将多张图片有序的合理的合并为一张图片,还要预留一定的空间,防止出现不必要的背景在宽屏或者高分辨率屏幕下的自适应页面,如果图片不够宽,就可能出现背景断裂的情况4. position的属性值有哪些?(1)GIF
GIF图片只存储8位索引,最多支持256色,采用无损压缩,尺寸较小支持透明和简单动画适用于:色彩简单的logo,icon,线框图,简单的动画
(2)JPG
采用有损压缩,可以控制压缩的质量采用直接色,色彩丰富不支持透明适用于:色彩丰富的图片、渐变图像
(3)PNG
png-8是采用无损压缩,基于8位索引色的位图格式,比gif的透明的支持更好,同等质量下大小也更小,但是不支持动画。适用于图标,背景,按钮。png-24采用无损压缩,是基于直接色的位图格式,大小相对以上几种更大,但是图片质量高,适用于源文件或者需要二次编辑的图片格式的保存。(4)WEBP
由Google开发,体积更小支持有损压缩和无损压缩支持透明和动画适用于:支持webp的APP或网页
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器.例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
对于选择器的优先级:
元素选择器:1class选择器:10id 选择器:100元素标签:1000需要注意的是:
!important声明的样式的优先级高如果优先级相同,则最后出现的样式生效继承得到的样式的优先级低属性继承性:
可以继承的属性:font-size、font-family、color不可以继承的样式:border、padding、margin、width、height7. 浮动相关元素设置为浮动之后,display会自动变成block。
(1)什么时候需要清除浮动?浮动造成的问题如下:
父元素的高度无法撑开,影响与父级同级的元素与浮动元素同级的非浮动元素给跟随在它后面若一个元素浮动,则其前面的元素也需要浮动,否则会影响页面的结构(2)如何清除浮动?清除浮动的方式如下:
给父级p定义height
属性最后一个浮动元素之后添加一个空的p标签,并添加clear:both
样式包含浮动元素的父级标签添加overflow:hidden
或者overflow:auto
相关教程推荐:CSS视频教程
本文名称:七道重要CSS面试题
文章源于:http://cdiso.cn/article/cjidgj.html