20210206 104道常见经典CSS面试题笔记(75-85)

75 content与替换元素的关系？

content属性生成的对象称为匿名替换元素

1. 使用content生成的文本是无法选中无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是把重要文本信息使用content属性生成，因为这对访问性和seo都很不友好。

2. content生成的内容不能左右:empty伪类。

3. content动态生成值无法获取

76 margin:auto的填充规则？

margin的’auto’可不是摆设，是具有强烈计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

1. 如果一侧定值，一侧auto，则auto为剩余空间大小。
2. 如果两侧均为auto，则平分剩余空间。

77 margin无效的情形？

1. display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题。
2. 表格中tr和td元素或者设置display计算值是table-cell或table-row的元素margin都是无效的。
3. 绝对定位元素非定位方位的margin值无效。
4. 定高容器的子元素margin-bottom或者宽度定死的子元素的margin-right的定位失效。

78 border的特殊性？

1. border-width不支持百分比
2. border-style的默认值是none，有一部分人可能会误以为是solid，这也是单纯设置border-width或border-color没有边框显示的原因。
3. border-style:double的表现规则:双线宽度永远相等，中间间隔正负1.
4. border-color默认颜色就是color色盲。
5. 默认background背景图片是相对于padding box定位的。

79 什么是基线和x-height？

字母x的下边缘就是基线。

x-height指的就是小写字母x的高度，术语描述就是基线和等划分线之间的距离，在css世界中，middle指的是基线往上1/2x-height的高度。

ex是css的一个相对单位，指的是小写字母x的高度，就是指x-height。ex的价值就在其副业上不受字体和字号影响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。

80 line-height的特殊性？

1. 对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高度计算的基石，就是指定了用来计算行框盒子高度的基础高度。
2. 内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的行距。换句话说，line-height之所以起作用，就是通过改变行距来实现的。在css中，行距分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有行距的，只不过这个行距的高度仅仅是完整行距高度的一般，因此也称为半行距。
3. 行距=line-height-font-size。
4. border以及line-height等传统css属性并没有小数像素的概念。如果标注的文字上边距，则向下取整；如果是文字下边距，则向上取整。
5. 对于纯文本元素，line-height直接决定来最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。
6. 对于块级元素，line-height对其本身是没有任何作用的，改变line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面的内联级别元素占据的高度实现的。
7. line-height的默认值是normal，还支持数值，百分比值以及长度值。为数值时，其最终计算值是和当前font-siez相乘后的值，为百分比值时，其最终计算值是和当前font-size相乘后的值，为长度时原意不变。
8. 如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值，但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。
9. 无论内联元素line-height如何设置，最终父级元素的高度都是有数值大的那个line-height决定的。
10. 只要有内联盒子在，就一定会有行框盒子，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，行框盒子前面有一个宽度为0的具有该元素的字体和行高属性的看不见的幽灵空白节点。

81 vertical-align特殊性？

1. vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则其基线就是元素里面最后一行内联元素的基线。
2. vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐，如果display计算值是table-cell元素，不妨脑补成td元素，则和tr元素上边缘对齐。
3. vertical-align:middle是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对于table-cell元素，单元格填充盒子相对于外面的表格行居中对齐。
4. vertical-align支持数值属性，根据数值不同，相对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上偏移。
5. vertical-align属性的百分比值则是相对于line-height的计算值计算的。
6. vertical-align起作用是由前提条件的，这个前提条件就是，只能应用于内联元素以及display值为table-cell的元素。
7. table-cell元素设置vertical-align垂直对齐的是子元素，但其作用的并不少子元素，而是table-cell元素自身。

82 overflow特殊性？

1. 一个设置联overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，裁剪的边界是border box的内边缘，而非padding box的内边缘。
2. html中有两个标签是默认可以产生滚动条的，一个是根元素html，另一个是textarea。
3. 滚动条会占用容器的可用宽度或高度。
4. 元素设置联overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在。

83 无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为无依赖绝对定位。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84 absolute与overflow的关系？

1. 如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行裁剪。
2. 如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高度比overflow元素高度还要大。
3. overflow元素自身transform的时候，chrome和opera浏览器下的overflow裁剪是无效的。

85 clip裁剪是什么？

所谓可访问性隐藏，指的是虽然内容肉眼看不见，但是其它辅助设备却能进行识别和访问的隐藏。
clip裁剪被称为可访问性隐藏的另外一个原因就是，它具有更强的普遍适应性，任何元素，任何场景都可以无障碍使用。