CSS基础面试题解析：盒子模型、选择器与居中技巧

"50道CSS基础面试题及答案" 在CSS面试中，了解基础概念和技术是至关重要的。以下是一些核心知识点的详细说明： 1. **CSS盒子模型**： CSS盒子模型描述了元素在页面上的布局方式。标准盒子模型（W3C模型）包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，其中宽度(width)和高度(height)指的只是内容区域的大小。而在低版本的IE中，盒子模型将边框和内边距包含在宽度和高度内，导致元素的实际尺寸大于声明的尺寸。 2. **box-sizing属性**： 这个属性用于指定元素的盒子模型。`content-box`是默认值，遵循标准W3C模型。`border-box`则意味着设置的width和height包括了边框和内边距，使得元素的总尺寸更易控制。 3. **CSS选择器**： CSS选择器用于选取页面中的HTML元素。常见的选择器包括： - ID选择器（#id）：通过ID匹配元素 - 类选择器（.class）：通过类名匹配元素 - 标签选择器（tagname）：通过HTML标签匹配元素 - 相邻兄弟选择器（element + element）：选择紧跟在另一个元素后的元素 - 子元素选择器（element > element）：选择直接子元素 - 后代选择器（element element）：选择任意深度的后代元素 - 通配符选择器（*）：匹配所有元素 - 属性选择器（[attribute=value]）：根据元素的属性值匹配 - 伪类选择器（如`:hover`, `:nth-child(n)`）：根据元素的状态或位置匹配 4. **CSS属性的继承性**： 一些CSS属性，如`font-size`, `font-family`, `color`，是可以继承的，这意味着如果没有为子元素设置这些属性，它们会从父元素那里继承。相反，如`border`, `padding`, `margin`, `width`, `height`等属性是不可继承的。 5. **CSS优先级算法**： 优先级计算基于元素选择符、类选择符、ID选择符和内联样式。每个类别有特定的权重： - 元素选择符：1 - 类选择符：10 - ID选择符：100 - 内联样式（`!important`）：最高优先级，不能被其他规则覆盖 如果多个规则具有相同的优先级，最后定义的规则将生效。 6. **CSS3新增伪类**： CSS3引入了一些新的伪类，如： - `:first-of-type`: 选择属于其父元素的首个同类型元素 - `:last-of-type`: 选择属于其父元素的最后同类型元素 - `:only-of-type`: 选择属于其父元素的唯一同类型元素 - `:only-child`: 选择属于其父元素的唯一子元素 - `:nth-child(n)`: 选择属于其父元素的第n个子元素 - `:enabled`: 选择表单中启用的元素 - `:disabled`: 选择表单中禁用的元素 - `:checked`: 选择被选中的单选框或复选框 7. **元素居中**： - 居中一个div：可以使用`margin: auto`来实现水平居中，如果需要垂直居中，可以结合`display: flex`或`display: grid`。 - 浮动元素居中：通常使用负的margin来实现，但更好的方法是使用`display: table`或者转换为绝对定位。 - 绝对定位的div居中：可以设置`position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);`，利用偏移量和变换实现居中。 这些是CSS基础知识的关键点，掌握它们对于理解和解决实际布局问题至关重要。在面试中，理解并能灵活运用这些概念会大大提高你的竞争力。