前端开发基础：CSS 样式与布局入门

复合选择器

通过组合多个选择器来精确匹配元素，例如 body ol div 表示选中 body 下有序列表中的 div。父级与子级不必相邻，中间可以有其他层级。多个选择器之间可用逗号分隔以同时选中多种标签。

通配符选择器

使用 * 符号，代表页面中的所有元素。常用于重置默认样式或统一设置全局样式。

CSS 常见样式

颜色 (color)

用于设置字体颜色，支持三种表示方式：

1. 英文单词：如 red, blue。
2. RGB 参数：格式为 rgb(r, g, b)，取值范围 0-255。例如绿色为 rgb(0, 255, 0)。
3. 十六进制：格式为 #RRGGBB。例如红色为 #FF0000。

字体大小 (font-size)

控制文本尺寸，单位可以是像素 (px)、em、rem 等。

边框 (border)

边框是复合属性，可分别设置粗细、样式和颜色，也可合并书写。

• border-width：边框宽度。
• border-style：样式（如实线 solid、虚线 dashed、点状 dotted）。
• border-color：边框颜色。

示例：

border: 2px solid #000;

几乎所有元素都可以设置边框。

宽度与高度 (width / height)

• width：设置元素宽度。
• height：设置元素高度。

注意：只有块级元素（如 div, p, h1-h6）才能直接设置宽高。行内元素（如 span, a）默认不独占一行，无法直接生效，可通过 display 属性修改显示模式（如 block）。

内边距 (padding)

内容区域与边框之间的距离。默认为 0，可通过 padding 统一设置，或按方向单独设置（top, bottom, left, right）。

外边距 (margin)

元素与其他元素之间的间距。同样支持统一设置或按方向单独设置。

盒子模型

理解 CSS 布局时，盒子模型是关键概念。一个元素被视为一个矩形盒子，包含内容区、内边距、边框和外边距。现代开发中通常建议使用 box-sizing: border-box 来简化尺寸计算，使宽度和高度包含 padding 和 border。