本文共 1868 字，大约阅读时间需要 6 分钟。

CSS面试题解答

1. CSS选择器的基本类型及其权重

CSS选择器包括类选择器、属性选择器、ID选择器和伪选择器。优先级顺序为：

• !important > 内联样式（equivalent to 1.0.0.0）>
• ID选择器（0.1.0.0）
• 类属性选择器、属性选择器、伪类（0.0.1.0）
• 元素选择器、伪元素（0.0.0.1）
• 通配符选择器（无特殊性贡献）

当选择器组合时，权重递增。

2. CSS引入方式及link与@import的区别

• 行内式：将样式写在<style>标签内。
• 内嵌式：将样式写在页面元素的style属性内。
• 外链式：通过<link>标签或@import引入外部CSS文件。
• 区别：
  • link是XHTML标签，可加载CSS及其他资源（如RSS）。
  • @import仅加载CSS文件。
  • link异步加载，@import同步加载。
  • link兼容所有浏览器，@import需支持CSS2.1。
  • link可用于JavaScript控制DOM。

3. 浮动元素导致的问题及解决方法

• 问题：
• 父元素高度无法撑开。
• 非浮动元素遮盖。
• float元素串行现象。
• 解决方法：
• 设置父元素固定高度或overflow:hidden。
• 使用清除浮动方法（如.clearfix）。
• 基于父元素的浮动处理。

4. CSS定位属性的含义

• relative：相对当前位置定位。
• absolute：相对最近折Later的父级定位。
• fixed：相对浏览器窗口定位。
• static：默认状态，无定位。
• sticky：黏性定位，相对于正常文档流。

5. position:absolute与float的区别

• 共同点：脱离文档流，可设置宽高。
• 不同点：
  • float占据位置，不产生遮盖现象。
  • absolute覆盖文档流元素，产生遮盖现象。

6. CSS选择器的种类

• ID选择器：#id
• 类选择器：.class
• 标签选择器：如div, p
• 相邻选择器：h1 + p
• 子选择器：ul > li
• 通配符选择器：*
• 属性选择器：button[disabled]
• 伪类选择器：如a:hover, li:nth-child
• 伪元素选择器：::before, ::after

7. CSS继承与不可继承属性

• 可继承：font-size, font-family, color, text-align
• 不可继承：border, padding, margin, width, height

8. 不同优先级排序

优先级顺序为：

• !important
• 内联样式（1.0.0.0）
• ID选择器（0.1.0.0）
• 类、伪类等（0.0.1.0）
• 元素选择器等（0.0.0.1）
• 通配符无优先级

9. HTML、CSS与JavaScript的定义

• HTML：用于 Structuring 网页内容（如<div>, p）。
• CSS：用于样式设计（如background, color）。
• JavaScript：实现前端动态功能与用户交互。

10. 初始化CSS的作用

为了统一不同浏览器的表现，初始化常用属性：

* { margin: 0; padding: 0; box-sizing: border-box; }

11. 容器居中方法

• 设置容器宽高，添加margin: -[水平边距] 0
• 使用Flex布局：

.container {  width: 400px;  height: 200px;  position: relative;  left: 50%;  top: 50%;  margin: -100px auto;}

12. CSS语法构成

基本语法为：

[选择器] { 属性名: 属性值; ... }

例子：

div { margin: 20px; }

13. display值的意义

• block：块元素，独占行。
• none：不显示元素。
• inline：行内元素，无换行。
• inline-block：可设置宽高，行内性质。
• list-item：类似块元素，添加列表样式。
• table：表格元素。
• inherit：继承父级display值。

14. 块级元素与行内元素的区别

• 块级元素：
  • 前后自动换行。
  • 值通常由width决定。
  • Prediction Behaviors：考虑为“块框”。
• 行内元素：
  • 常处于同一行。
  • 通常不允许设置width, height。
  • 内容不可换行（有的异常如input）。

以上内容经过精简与优化，语言简洁明了，便于阅读与CSS理解。