20210207 104道常见经典CSS面试题笔记(86-96)

86 relative特殊性？

相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。

top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是auto，那么计算值是0，偏移无效，也就是说，如果父元素没有设定高度或者不是格式化高度，那么relative类似top:20%的代码等同于top:0。

当相对定位元素同时应用对立方向定值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下，从左往右，因此top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。

87 什么是层叠上下文？

层叠上下文，英文称作stacking context，是html中的一个三维的概念。如果一个元素含有层叠上下文，可以理解为这个元素在z轴上就高人一等。
层叠上下文元素有如下特性:

1. 层叠上下文的层叠水平要比普通元素高。
2. 层叠上下文可以阻断元素的混合模式。
3. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
4. 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或者渲染的时候，只需要考虑后代元素。
5. 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

层叠上下文的创建:

1. 页面根元素天生具有层叠上下文，称为根层叠上下文，根层叠上下文指的是页面根元素，可以看成html元素，因此，页面中所有的元素一定处于至少一个层叠结界中。
2. 对于position值为relative/absolute以及firefox/ie浏览器下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文，chrome等webkit内核浏览器下，position:fixed元素天然层叠上下文，无须z-index为数值，目前ie和firefox仍是老套路。
3. 其它一些css3属性，比如元素的opacity值不是1。

88 什么是层叠水平？

层叠水平，英文称作stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。

所有元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。

89 元素的层叠顺序？

层叠顺序，英文称作stacking order，表示元素发生层叠时有着特定的垂直显示顺序。

90 层叠准则？

谁大谁上:当具有明显的层叠水平表识的时候，如生效z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

91 font-weight的特殊性？

如果使用数值作为font-weight属性值，必须是100-900的整百数，因为这里的数值仅仅是外表像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是由对应关系的。

92 text-indent的特殊性？

1. text-indent仅对第一行内联盒子内容有效。
2. 非替换元素以外的dispaly计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inline-table则会生效。
3. input标签按钮text-indent值无效。
4. button标签按钮text-indent值有效。
5. text-indent的百分比值是相对于当前元素的包含块计算的，而不是当前元素。

93 letter-spacing与字符间距？

letter-spacing可以用来控制字符之间的间距，这里说的字符包括英文字母，汉字以及空格等。
letter-spacing具有以下特性:

1. 继承性。
2. 默认值是normal而不是0.虽然说正常情况下，normal的计算值就是0，但两者还是有差别的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。
3. 支持负值，且值足够大的时候，会让字符形成层叠。甚至反向排列。
4. 和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
5. 支持小数值，即使0.1px也是支持的。
6. 暂不支持百分比值。

94 word-spacing与单词间距？

letter-spacing作用于所有字符，word-spacing仅作用于空格字符。也就是说，word-spacing的作用就是增加空格的间隙宽度。

95 white-space于换行和空格的控制？

white-space属性声明了如何处理元素内的空白字符，这类空白字符包括space键，enter键，tab键产生的空白，因此，white-space可以决定图文内容是否在一行显示，是否显示大段连续空白等。
其属性值包括下面这些:

1. normal 合并空白字符和换行符。
2. pre 空白字符不合并，并且内容只有在换行符的地方换行。
3. nowrap 该值和normal一样会合并空白字符，但不允许文字环绕。
4. pre-wrap 空白字符不合并，并且内容只有换行符的地方换行，同时允许文本环绕。
5. pre-line 合并空白字符，但只在有换行符的地方换行，允许文本环绕。

96 隐藏元素的background-image到底加不加载？

相关知识点:
一个元素如果dispaly计算值为none，在ie浏览器下，依然会发送图片请求，firefox浏览器不会，至于chrome和safari浏览器则似乎更加智能一点，如果隐藏元素同时又设置了background-image，则图片依然会去加载，如果是父元素的dispaly计算值为none，则背景图不会请求。此时浏览器或许放心地认为这个背景图暂时是不用的。

如果不是backfroun-image，而是img元素，则设置diaplay:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素，则background-image也不会加载，hover情况下的background-image，在触发时加载。