CSS基础面试题集锦：盒模型、选择器与优先级详解

本文档是一份针对初学者和面试者准备的50道CSS基础面试题集，涵盖了CSS的基本概念、盒模型、选择器、优先级、CSS3新伪类以及布局技巧等内容。以下是其中的一些重点知识点： 1. **盒模型与浏览器兼容性**： 标准盒模型（W3C）定义了元素宽度为内容(content)、边框(border)、内边距(padding)和外边距(margin)之和，而早期的IE浏览器使用的是“怪异盒模型”，即宽度仅包括内容和内边距。理解这两种模型对于处理不同浏览器的兼容性至关重要。 2. **box-sizing属性**： `box-sizing`属性用于决定元素的盒模型解析方式，`content-box`是标准盒模型，而`border-box`遵循IE的传统模型，后者在设定高度和宽度时考虑了边框和内边距，便于快速布局和避免意外的大小变化。 3. **CSS选择器和继承**： CSS选择器种类繁多，包括id选择器、类选择器、标签选择器、伪类选择器等。部分样式属性可以被继承，如`font-size`、`font-family`和`color`，而`border`、`padding`和`margin`等则不能继承。优先级计算遵循就近原则，`!important`声明的样式具有最高优先级。 4. **CSS优先级算法**： 选择器的优先级由数字表示，id选择器、类选择器、标签选择器和`!important`分别对应100、10、1和1000。当样式冲突时，优先级高者获胜，相同优先级按样式出现顺序决定最终效果。 5. **CSS3伪类**： CSS3引入了多个新的伪类，如`:first-of-type`、`:last-of-type`、`:only-of-type`、`:only-child`和`:nth-child`，用于更精确地选择和定位元素。此外，`:enabled`和`:disabled`用于处理表单元素的启用和禁用状态，`:checked`则对应于被选中的单选按钮或复选框。 6. **布局技巧**： - 居中一个div通常使用`display: flex`、`position: absolute`结合`left: 50%`, `transform: translateX(-50%)`或设置`margin: auto`。 - 浮动元素的居中通常通过清除浮动和设置父元素的`text-align: center`实现。 - 绝对定位元素的居中，需确保其父元素具有`position: relative`，然后使用`top`, `right`, `bottom`, `left`调整元素位置。 这些知识点不仅有助于深入理解CSS基础，还能帮助面试者展示他们在实际项目中的技能和经验。在面试过程中，熟悉这些内容将使求职者在CSS技术方面显得更加专业。