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

"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深入的理解和应用能力。在实际开发中，应根据具体需求灵活运用这些规则，确保页面布局的准确性和可维护性。