CSS 实战手册：从语法到布局的全方位讲解本文系统讲解 CSS 核心知识，涵盖属性值、选择器、样式表等基础概念，解析层叠

一、CSS 是什么

CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述网页呈现样式的标记语言。它使得网页在视觉上更加美观和易于阅读，通过将网页的内容（HTML）与表现形式相分离，提高了网页开发的效率和可维护性。

1. 属性与值

CSS 规则由属性和值组成。属性定义了要设置的样式特征，例如 color（颜色）、font - size（字体大小）等；而值则指定了该属性应呈现的具体设置，如 color: red; 中，red 就是 color 属性的值。每个属性与值的组合构成一个声明（declaration），以分号 ; 结尾。

2. 声明块

多个声明可以组合在一起形成一个声明块（declaration block）。声明块被包含在一对花括号 {} 内，例如：

body {
    background - color: lightblue;
    font - family: Arial, sans - serif;
}

这里，background - color 和 font - family 两个声明共同构成了针对 body 元素的声明块，用于设置 body 元素的背景颜色和字体。

3. 选择器

声明块要作用到对应的 HTML 元素，需要通过选择器来指定。选择器用于选择 HTML 文档中特定的元素或元素组，从而将样式应用到这些元素上。例如，p 选择器会选中所有的段落元素，.classname 选择器会选中所有具有指定类名的元素，#idname 选择器会选中具有指定 ID 的元素。

在 container #main p 这样的选择器组合中，优先级计算是基于不同类型选择器的权重累加。

选择器权重计算规则
- 元素选择器：权重为 1。例如 p，权重是 1。
- 类选择器：权重为 10。例如 .classname，权重是 10。
- ID 选择器：权重为 100。例如 #idname，权重是 100。
- 内联样式：权重为 1000。直接写在 HTML 元素 style 属性中的样式。
container #main p 选择器权重分析
- p 是元素选择器，权重为 1。
- #main 是 ID 选择器，权重为 100。
- .container 是类选择器，权重为 10。
这个选择器组合的总权重为 10 + 100 + 1 = 111。

4. 样式表

多个 CSS 规则（由选择器和声明块组成）构成了样式表（style sheet）。样式表可以是内联样式（直接写在 HTML 元素的 style 属性中）、内部样式表（写在 HTML 文档的 <style> 标签内）或外部样式表（单独的 .css 文件，通过 <link> 标签引入到 HTML 文档中）。

5. 层叠

层叠（Cascading）是 CSS 的一个重要特性，它决定了当多个样式规则应用到同一个元素时，如何解决样式冲突。具体规则如下：

优先级：不同类型的选择器具有不同的优先级，按照从低到高的顺序为：元素选择器< 类选择器< ID 选择器 < 内联样式。例如，如果一个元素同时被元素选择器、类选择器、ID 选择器和内联样式设置了样式，内联样式将优先应用。
特殊性计算：当多个规则具有相同的优先级时，浏览器会根据规则的特殊性来决定应用哪个规则。特殊性通过计算选择器中 ID 选择器、类选择器、元素选择器的数量来确定。
顺序：如果两个规则的优先级和特殊性都相同，那么后定义的规则将覆盖先定义的规则。

二、CSS 相关特性

1. margin 重叠

当两个或多个相邻的块级元素（包括父子元素和兄弟元素）的 margin 相遇时，会发生 margin 重叠（margin collapsing）现象。在垂直方向上，重叠的 margin 会取其中较大的值，而不是相加。例如：

<style>
    div {
        margin - bottom: 20px;
    }
    p {
        margin - top: 30px;
    }
</style>
<div>这是一个 div</div>
<p>这是一个段落</p>

在上述代码中，div 的 margin - bottom 和 p 的 margin - top 会重叠，最终它们之间的垂直间距为 30px，即较大的那个 margin 值。

2. 小数单位 px 的处理

像素（px，pixel）是 CSS 中常用的长度单位。在大多数浏览器中，当设置元素的尺寸、位置等属性使用小数像素值时，浏览器会尝试进行近似处理。例如，如果设置 width: 5.5px，浏览器可能会将其舍入为最接近的整数像素值（可能是 5px 或 6px），具体取决于浏览器的渲染机制和抗锯齿算法。然而，这种近似处理可能会导致在不同浏览器或设备上显示略有差异。在实际开发中，尽量避免使用小数像素值，以确保页面显示的一致性。

3. inline 元素与 transform

inline 元素（如 <span>、<a> 等）在默认情况下，有些属性（如 transform）可能不支持。这是因为 inline 元素的布局模型与块级元素不同，它不会在页面上形成独立的矩形区域，而是与周围的文本流共享空间。

如果要对 inline 元素应用 transform 效果，可以将其转换为 inline - block 元素。例如，当 inline 元素设置 position: absolute 时，它会表现得类似于 inline - block 元素，此时可以应用 transform。另外，直接将 display 属性设置为 inline - block，也能使元素具有 inline 元素的水平排列特性，同时具备块级元素的一些布局特性，如可以设置宽度、高度、margin、padding 等，形成完整的盒模型，从而支持 transform 等更多属性。

三、CSS 选择器优先级

CSS 选择器优先级可以形象地按照个十百千从小到大安排，具体如下：

元素选择器（element） ：例如 p、div 等，优先级最低，以 “个位” 计算。它选择所有匹配的元素，应用样式的范围较广，但特异性较低。
类选择器（class） ：如 .myclass，其优先级高于元素选择器，以 “十位” 计算。类选择器可以为一组具有相同类名的元素应用样式，特异性相对较高。
ID 选择器（id） ：如 #myid，优先级高于类选择器，以 “百位” 计算。ID 选择器具有较高的特异性，因为每个 ID 在文档中应该是唯一的，它通常用于为特定的单个元素设置独特的样式。
内联样式（inline） ：直接写在 HTML 元素的 style 属性中的样式，优先级最高，以 “千位” 计算。内联样式直接作用于特定元素，具有最强的特异性，但过多使用会导致 HTML 代码和样式代码紧密耦合，降低代码的可维护性。

另外，!important 声明可以强制将某个样式规则的优先级提升到最高，无论其选择器优先级如何。但应慎用 !important，因为它会破坏样式表的层叠性，使得样式的维护变得困难，特别是在团队开发或大型项目中。例如：

css

p {
    color: red!important;
}

上述代码中，color: red!important; 会使所有段落文本颜色强制为红色，即使其他具有更高优先级选择器的样式规则也无法覆盖它。

四、三列布局与网格布局

1. 三列布局

三列布局是网页设计中常见的布局方式，常见的实现方法有以下几种：

浮动布局：通过设置元素的 float 属性，使三个列元素向左或向右浮动，从而实现并排显示。例如：

html

<style>
    .column {
        float: left;
        width: 33.33%;
    }
</style>
<div class="column">第一列</div>
<div class="column">第二列</div>
<div class="column">第三列</div>

但浮动布局需要注意清除浮动，以避免父元素高度塌陷问题。

Flexbox 布局：Flexbox（弹性盒布局模型）提供了一种更灵活的方式来创建三列布局。通过设置父元素的 display: flex，可以轻松控制子元素的排列方式、对齐方式等。例如：

html

<style>
    .container {
        display: flex;
    }
    .column {
        flex: 1;
    }
</style>
<div class="container">
    <div class="column">第一列</div>
    <div class="column">第二列</div>
    <div class="column">第三列</div>
</div>

flex: 1 表示每个列元素将平均分配剩余空间。

Grid 布局：CSS Grid 布局是一种二维布局系统，专门用于创建复杂的网格结构。它可以更精确地控制列和行的尺寸、位置和对齐方式。例如：

html

<style>
    .container {
        display: grid;
        grid - template - columns: repeat(3, 1fr);
    }
    .column {
        /* 列样式 */
    }
</style>
<div class="container">
    <div class="column">第一列</div>
    <div class="column">第二列</div>
    <div class="column">第三列</div>
</div>

grid - template - columns: repeat(3, 1fr) 表示创建三个等宽的列，1fr 是一种灵活的长度单位，代表一份可用空间。

2. 网格布局（Grid Layout）

CSS Grid 布局提供了强大的布局能力，它允许我们通过定义行和列的轨道（track）来创建复杂的二维布局。

网格容器（Grid Container） ：通过设置 display: grid 或 display: inline - grid，将一个 HTML 元素定义为网格容器。例如：

css

.container {
    display: grid;
}

网格项（Grid Items） ：网格容器的直接子元素成为网格项。网格项会自动排列在网格容器内定义的网格轨道中。
定义网格轨道：可以使用 grid - template - columns 和 grid - template - rows 属性分别定义列和行的轨道。例如，grid - template - columns: 100px 200px auto; 定义了三列，第一列宽度为 100px，第二列宽度为 200px，第三列宽度为自动适应剩余空间。
网格线（Grid Lines） ：网格轨道之间的分隔线称为网格线。可以通过网格线来定位网格项。例如，grid - column - start: 2; grid - column - end: 4; 可以将一个网格项从第二列网格线开始，跨越到第四列网格线结束，从而占据两列的宽度。
对齐方式：Grid 布局提供了多种对齐方式，包括水平对齐（justify - items、justify - content）和垂直对齐（align - items、align - content），可以精确控制网格项在网格容器内的对齐方式。

网格布局使得网页布局更加灵活和高效，特别适用于创建复杂的页面布局，如多列布局、响应式布局等。

通过对上述内容的学习和实践，可以更好地掌握 CSS 的核心概念和常见布局技巧，从而创建出美观、功能丰富的网页。