【面试题】104道 CSS 面试题,助你查漏补缺(下)

共 27138字,需浏览 55分钟

 ·

2020-10-23 18:12


作者:CavsZhouyou

https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!

104道 CSS 面试题,助你查漏补缺(上)

目录

  • 52.layoutviewport、visualviewport 和 idealviewport 的区别?[1]
  • 53.position:fixed;在 android 下无效怎么处理?[2]
  • 54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)[3]
  • 55.如何让去除 inline-block 元素间间距?[4]
  • 56.overflow:scroll 时不能平滑滚动的问题怎么处理?[5]
  • 57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。[6]
  • 58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?[7]
  • 59.浏览器如何判断是否支持 webp 格式图片[8]
  • 60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)[9]
  • 61.style 标签写在 body 后与 body 前有什么区别?[10]
  • 62.什么是 CSS 预处理器/后处理器?[11]
  • 63.阐述一下 CSSSprites[12]
  • 64.使用 rem 布局的优缺点?[13]
  • 65.几种常见的 CSS 布局[14]
  • 66.画一条 0.5px 的线[15]
  • 67.transition 和 animation 的区别[16]
  • 68.什么是首选最小宽度?[17]
  • 69.为什么 height:100\x 会无效?[18]
  • 70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?[19]
  • 71.内联盒模型基本概念[20]
  • 72.什么是幽灵空白节点?[21]
  • 73.什么是替换元素?[22]
  • 74.替换元素的计算规则?[23]
  • 75.content 与替换元素的关系?[24]
  • 76.margin:auto 的填充规则?[25]
  • 77.margin 无效的情形[26]
  • 78.border 的特殊性?[27]
  • 79.什么是基线和 x-height?[28]
  • 80.line-height 的特殊性?[29]
  • 81.vertical-align 的特殊性?[30]
  • 82.overflow 的特殊性?[31]
  • 83.无依赖绝对定位是什么?[32]
  • 84.absolute 与 overflow 的关系?[33]
  • 85.clip 裁剪是什么?[34]
  • 86.relative 的特殊性?[35]
  • 87.什么是层叠上下文?[36]
  • 88.什么是层叠水平?[37]
  • 89.元素的层叠顺序?[38]
  • 90.层叠准则?[39]
  • 91.font-weight 的特殊性?[40]
  • 92.text-indent 的特殊性?[41]
  • 93.letter-spacing 与字符间距?[42]
  • 94.word-spacing 与单词间距?[43]
  • 95.white-space 与换行和空格的控制?[44]
  • 96.隐藏元素的 background-image 到底加不加载?[45]
  • 97.如何实现单行/多行文本溢出的省略(...)?[46]
  • 98.常见的元素隐藏方式?[47]
  • 99.css 实现上下固定中间自适应布局?[48]
  • 100.css 两栏布局的实现?[49]
  • 101.css 三栏布局的实现?[50]
  • 102.实现一个宽高自适应的正方形[51]
  • 103.实现一个三角形[52]
  • 104.一个自适应矩形,水平垂直居中,且宽高比为 2:1[53]

53.position:fixed;在 android 下无效怎么处理?

因为移动端浏览器默认的viewport叫做layout viewport。在移动端显示时,因为layout viewport的宽度大于移动端屏幕
的宽度,所以页面会出现滚动条左右移动,fixed的元素是相对layout viewport来固定位置的,而不是移动端屏幕来固定位置的
,所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果,我们需要改变的是viewport的大小为ideal viewport,可以如下设置:

"viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"
/>

54.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms=16.7ms

55.如何让去除 inline-block 元素间间距?

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考:《去除 inline-block 元素间间距的 N 种方法》[54]

56.overflow:scroll 时不能平滑滚动的问题怎么处理?

以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性,所以滑动很流
畅。

详细资料可以参考:《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》[55]

57.有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。

(1)外层div使用position:relative;高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

(2)使用flex布局,设置主轴为竖轴,第二个div的flex-grow为1。

详细资料可以参考:《有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度(三种方案)》[56]

58.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?

相关知识点:

(1)BMP,是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常
具有较大的文件大小。

(2)GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,同时,GIF格式还具
有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。

(3)JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来
存储照片,与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,
又会导致图片文件较GIF更大。

(4)PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的
情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8
还支持透明度的调节,而GIF并不支持。现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。

(5)PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格
式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

(6)SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图
片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企
业Logo、Icon等。

(7)WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,
如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。

•在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;
•在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小25%~34%;
•WebP图片格式支持图片透明度,一个无损压缩的WebP图片,如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式,兼容性不太好。

回答:

我了解到的一共有七种常见的图片的格式。

(1)第一种是BMP格式,它是无损压缩的,支持索引色和直接色的点阵图。由于它基本上没有进行压缩,因此它的文件体积一般比
较大。

(2)第二种是GIF格式,它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法,因此文件的体积很小。并且GIF还
支持动画和透明度。但因为它使用的是索引色,所以它适用于一些对颜色要求不高且需要文件体积小的场景。

(3)第三种是JPEG格式,它是有损压缩的使用直接色的点阵图。由于使用了直接色,色彩较为丰富,一般适用于来存储照片。但
由于使用的是直接色,可能文件的体积相对于GIF格式来说更大。

(4)第四种是PNG-8格式,它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式,它也支持透明度的调整,并
且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况,我们都可以使用PNG-8格式代替GIF格式。

(5)第五种是PNG-24格式,它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法,所以它的体积比BMP
格式的文件要小得多,但是相对于其他的几种格式,还是要大一些。

(6)第六种格式是svg格式,它是矢量图,它记录的图片的绘制方式,因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般
适合于用来制作一些网站logo或者图标之类的图片。

(7)第七种格式是webp格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是,在相
同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减小,
这样会提高用户的体验。这是谷歌开发的一种新的图片格式,目前在兼容性上还不是太好。

详细资料可以参考:《图片格式那么多,哪种更适合你?》[57]

59.浏览器如何判断是否支持 webp 格式图片

(1)宽高判断法。通过创建image对象,将其src属性设置为webp格式的图片,然后在onload事件中获取图片的宽高,如
果能够获取,则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数,那么就说明浏览器不支持webp格
式的图片。

(2)canvas判断方法。我们可以动态的创建一个canvas对象,通过canvas的toDataURL将设置为webp格式,然后判断
返回值中是否含有image/webp字段,如果包含则说明支持WebP,反之则不支持。

详细资料可以参考:《判断浏览器是否支持 WebP 图片》[58]《toDataURL()》[59]

60.什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)

网站向服务器请求的时候,会自动带上cookie这样增加表头信息量,使请求变慢。

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,所以不如隔离开
,静态资源放CDN。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,这样可以降低请
求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer,也减少了WebServer对cookie的处理分析环节,提高了webserver的
http请求的解析速度。

详细资料可以参考:《CDN 是什么?使用 CDN 有什么优势?》[60]

61.style 标签写在 body 后与 body 前有什么区别?

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式
表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可
能会出现FOUC现象(即样式失效导致的页面闪烁问题)

62.什么是 CSS 预处理器/后处理器?

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成
文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然
后再编译成正常的CSS文件。

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less csssprite,增强了css代码的复用性,还有层级、mixin、
变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。

CSS后处理器是对CSS进行处理,并最终生成CSS的预处理器,它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了,最典型的例子是CSS压缩工具(如clean-css),只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer,
以CanIUse上的浏览器支持数据为基础,自动处理兼容性问题。

后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏
览器私有前缀,实现跨浏览器兼容性的问题。

详细资料可以参考:《CSS 预处理器和后处理器》[61]

63.阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的background-image,background-repeat,background
-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求,从而很好的提高页面的性能;CSSSprites
能减少图片的字节。

优点:

减少HTTP请求数,极大地提高页面加载速度
增加图片信息重复度,提高压缩比,减少图片大小
更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

缺点:

图片合并麻烦
维护麻烦,修改一个图片可能需要重新布局整个图片,样式

64.使用 rem 布局的优缺点?

优点:
在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了,兼容性也非常的好。

缺点:
(1)在奇葩的dpr设备上表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。
(2)使用iframe引用也会出现问题。
(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问
题。

详细资料可以参考:《css3 的字体大小单位 rem 到底好在哪?》[62]《VW:是时候放弃 REM 布局了》[63]《为什么设计稿是 750px》[64]《使用 Flexible 实现手淘 H5 页面的终端适配》[65]

65.几种常见的 CSS 布局

详细的资料可以参考:《几种常见的 CSS 布局》[66]

66.画一条 0.5px 的线

采用meta viewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考:《怎么画一条 0.5px 的边(更新)》[67]

67.transition 和 animation 的区别

transition关注的是CSS property的变化,property值和时间的关系是一个三次贝塞尔曲线。

animation作用于元素本身而不是样式属性,可以使用关键帧的概念,应该说可以实现更自由的动画效果。

详细资料可以参考:《CSSanimation 与 CSStransition 有何区别?》[68]《CSS3Transition 和 Animation 区别及比较》[69]《CSS 动画简介》[70]《CSS 动画:animation、transition、transform、translate》[71]

68.什么是首选最小宽度?

“首选最小宽度”,指的是元素最适合的最小宽度。

东亚文字(如中文)最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元,一般会终止于空格(普通空格)、短
横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样,每一个字符都用最小宽度单元,可以试试使用CSS中的word-break:break-all。

69.为什么 height:100%会无效?

对于普通文档流中的元素,百分比高度值要想起作用,其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto,因为解释成了auto,
所以无法参与计算。

使用绝对定位的元素会有计算值,即使祖先元素的height计算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则?

(1)max-width会覆盖width,即使width是行类样式或者设置了!important。

(2)min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

(1)内容区域(content area)。内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子
(character box);但是有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因此,对于这些
元素,内容区域可以看成元素自身。

(2)内联盒子(inline box)。“内联盒子”不会让内容成块显示,而是排成一行,这里的“内联盒子”实际指的就是元素的“外在盒
子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

(3)行框盒子(line box),每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包含块(containing box),由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点?

“幽灵空白节点”是内联盒模型中非常重要的一个概念,具体指的是:在HTML5文档声明中,内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,就好像幽灵
一样,但又确确实实地存在,表现如同文本节点一样,因此,我称之为“幽灵空白节点”。

73.什么是替换元素?

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此,、