CSS 基础知识常见问题汇总

CSS 是层叠样式表（Cascading Style Sheets）的缩写，它是一种用来网页如何呈现的语言。CSS 可以控制网页中的许多元素，包括字体、颜色、布局和动画效果。

1. CSS 选择器有哪些？

CSS 选择器用于指定要应用样式的 HTML 元素。CSS2 选择器包括：

• 元素选择器：选择指定名称的 HTML 元素，如 p、div、ul 等。
• ID 选择器：选择具有特定 ID 的 HTML 元素，如 #header、#footer 等。
• 群组选择器：选择具有相同类名的 HTML 元素，如 .btn、.nav 等。
• 类选择器：选择具有特定类名的 HTML 元素，如 .btn、.nav 等。
• • 通配符选择器：选择所有 HTML 元素。
• 后代选择器：选择在其他元素内部的 HTML 元素，如 p span、ul li 等。

CSS2 伪类选择器包括：

• a:link/visited/hover/active：选择链接元素的不同状态。
• :hover：选择鼠标悬停在某个元素上的状态。
• :active：选择被激活的元素。
• :focus：选择获得焦点的元素。

2. CSS 样式属性有哪些？

CSS 样式属性用于指定 HTML 元素的样式，包括字体、颜色、边框、背景等。常用的 CSS 样式属性包括：

• color：设置元素的字体颜色。
• font-family：设置元素的字体系列。
• font-size：设置元素的字体大小。
• font-weight：设置元素的字体粗细。
• border：设置元素的边框。
• border-color：设置元素的边框颜色。
• border-width：设置元素的边框宽度。
• border-style：设置元素的边框样式。
• background-color：设置元素的背景颜色。
• background-image：设置元素的背景图片。
• background-position：设置元素的背景图片的位置。
• background-repeat：设置元素的背景图片的重复方式。

3. CSS 如何实现网页布局？

CSS 可以通过多种方式实现网页布局，常用的布局方式包括：

• 盒子模型：盒子模型将 HTML 元素视为具有边距、边框和填充的盒子。您可以使用 CSS 属性来控制盒子的各个部分，从而实现不同的布局效果。
• 浮动：浮动允许 HTML 元素在页面中水平排列。您可以使用 CSS 属性来控制元素的浮动方向和位置，从而实现不同的布局效果。
• 定位：定位允许 HTML 元素在页面中指定位置。您可以使用 CSS 属性来控制元素的位置和大小，从而实现不同的布局效果。

4. CSS 如何实现动画效果？

CSS 可以通过多种方式实现动画效果，常用的动画效果包括：

• 过渡：过渡允许 HTML 元素在一段时间内从一种状态过渡到另一种状态。您可以使用 CSS 属性来控制过渡的持续时间、延迟和缓动函数，从而实现不同的动画效果。
• 转换：转换允许 HTML 元素在页面中进行旋转、缩放、平移等操作。您可以使用 CSS 属性来控制元素的转换效果，从而实现不同的动画效果。
• 动画：动画允许 HTML 元素在一段时间内执行一系列动画效果。您可以使用 CSS 属性来控制动画的持续时间、延迟、缓动函数和迭代次数，从而实现不同的动画效果。