CSS面试技巧:固定table第一行与margin、border、基线和line-height解析

版权申诉
0 下载量 143 浏览量 更新于2024-08-07 收藏 67KB DOCX 举报
"CSS面试知识点总结,主要关注如何固定table第一行以及CSS中关于margin、border、基线和x-height、line-height的相关特性。" 在CSS布局中,固定table第一行是一个常见的需求,尤其是在数据展示时,为了保持表头在滚动时可见。实现这一功能的方法通常包括使用`position: fixed`或利用CSS3的`thead`和`tbody`分离特性。例如,可以将表头部分(`thead`)设为固定定位,使其在内容滚动时保持在视口顶部: ```css thead { position: sticky; top: 0; } ``` 接下来,我们深入探讨其他CSS知识点: 1. **margin无效的情形**: - 对于内联元素,垂直margin不会叠加,这是margin collapsing的现象。 - 在表格(`table`)元素中,如`<tr>`或`<td>`,以及设置为`display: table-cell`或`display: table-row`的元素,margin无效。 - 绝对定位元素的非定位方向margin在定位计算中不考虑。 - 容器固定高度或子元素宽度固定时,特定情况下的margin不会影响布局。 2. **border的特殊性**: - `border-width`不支持百分比单位,它只能接受长度单位。 - `border-style`的默认值是`none`,设置`border-width`或`border-color`而忽略`border-style`不会显示边框。 - `border-style: double`的两条线宽度相等,中间间隔可正可负,但总和为固定值。 - `border-color`默认取`color`属性的值。 - 背景图片(`background-image`)相对于`padding-box`定位。 3. **基线和x-height**: - 基线是字母x的下边缘,是文本排列的基础。 - x-height是指小写字母x的高度,它是衡量字体行高的一个关键参考点。 - `ex`单位等于当前字体的小写字母x的高度,常用于实现不受字体和字号影响的内联元素垂直居中对齐。 4. **line-height的特殊性**: - line-height不仅影响文本行间距,还影响元素的垂直尺寸。 - 图片等替换元素通常以其底部作为基线。 - 对于无内联元素或`overflow`不是`visible`的`inline-block`元素,基线是其margin的底部。 - `vertical-align: top`会使元素与其所在行顶部对齐,对内联元素来说,是与该行最高元素顶部对齐,对`display: table-cell`元素则与单元格顶部对齐。 了解并掌握这些CSS知识点对于解决实际布局问题至关重要,特别是在面试中能体现开发者对CSS深入的理解和应用能力。在实际开发中,应根据具体需求灵活运用这些规则,确保页面布局的准确性和可维护性。