CSS基础面试题全解：45道经典题目及答案

本文档是一份精心准备的45道CSS基础面试题集，涵盖了从基础概念到高级特性的广泛内容，适合准备面试或者提升CSS技能的开发者。以下是对其中部分问题的详细解答： 1. **CSS盒子模型与IE兼容性**： 标准CSS盒子模型定义了元素占据空间的方式，宽度由内容（content）、边框（border）、内边距（padding）和外边距（margin）组成。标准模型中，`width`属性指的是这四部分的总和。然而，在早期的IE浏览器中，使用的是不同的盒子模型，即所谓的IE盒模型，其`width`只包括内容、边框和内边距，不包含外边距。 2. **box-sizing属性**： `box-sizing`属性用于控制元素盒子模型的解析方式。默认值是`content-box`，遵循标准模型。通过设置为`border-box`，可以使得元素的高度和宽度包括边框和内边距，简化布局计算。 3. **CSS选择器及其应用**： CSS选择器包括id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器和属性、伪类选择器等。其中，`font-size`, `font-family`, 和 `color` 属性可以被继承，而`border`, `padding`, 和 `margin` 等则不能。在样式优先级上，`:not` 选择器、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-child`等CSS3新增的伪类用于更精确地定位元素。 4. **CSS优先级计算规则**： 优先级计算涉及选择符的权重，如id选择器（100）、类选择器（10）、元素标签（1000），以及`:not`, `!important`等声明的优先级。当样式冲突时，会根据这些规则决定最终应用的样式。 5. **CSS3伪类应用**： CSS3引入了多种伪类，如`:first-of-type`、`:last-of-type`、`:only-of-type`、`:only-child`和`:nth-child`，它们分别用于匹配具有特定类型或位置的元素。`:enabled` 和`:disabled` 可用于表单控件的启用和禁用状态，`:checked` 则对应于被选中的单选按钮或复选框。 6. **元素居中方法**： - 直接居中：对于`display: block`元素，可以使用`margin: 0 auto`来水平居中。 - 浮动元素居中：先清除浮动，然后设置容器的`text-align: center`。 - 绝对定位居中：结合使用`position: absolute`和`left: 50%`, `top: 50%`, `transform: translate(-50%, -50%)`。 本文档提供了丰富的CSS基础知识，涵盖了选择器、盒子模型、优先级计算和CSS3新特性，是理解和应对CSS面试的好参考资料。