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

CSS（ Cascade Style Sheets）是一种用于网页样式设计的语言，它的核心思想是实现网页内容与样式的分离。通过CSS，开发者可以为网页元素定义样式，而不是直接在HTML标签中添加样式，这使得网页设计更加灵活和维护友好。

CSS的选择器体系

CSS选择器是描述网页元素样式的语言，它采用优先级规则进行样式应用。优先级从高到低依次为：

• ID选择器（#id）
• 类选择器（.class）
• HTML标签选择器（eg：div, p）

类选择器：通过在HTML标签中添加class属性，在CSS中采用 .class 来匹配。例如，可以为所有带有"container"类的div赋予特定样式。

ID选择器：使用 HTML的id属性，CSS中使用 #id 来唯一标记一个元素。例如，#sidebar可以单独指定一个特定的侧边栏样式。

HTML标签选择器：直接通过标签名称匹配。例如，div { padding: 10px; } 会为所有div标签加上10px的内边距。

CSS核心内容

标准流与浮动

标准流（Content Flow）决定了网页元素的垂直排列顺序。标签的自然显示顺序与代码中的顺序一致，页面中元素的显示方式符合标准流的规则。

浮动（Float）的引入则完全脱离标准流，它允许元素在CSS中占据特定的布局位置，使其不参与正常的文本流撕取。此外，浮动的元素会影响周围元素的布局，而绝对定位（position:absolute）的元素则完全不影响其他盒子。

盒子模型

所有HTML元素都可以看作盒子，而CSS的盒子模型定义了盒子内部的结构。盒子边界由内边距、外边距和边框构成，盒子内部则由内容（content）占据。

盒子模型的各个部分：

• 外边距（Margin）：清除元素周围的空隙，是透明的。
• 边框（Border）：画出盒子围绕的边框，位于内边距之外。
• 内边距（Padding）：清除内容周围的区域，同样是透明的。
• 内容（Content）：盒子的显示区域，用于显示文本、图片等。

理解盒子模型对于正确设置元素的宽度和高度至关重要，它帮助开发者更好地控制网页布局。

盒子间的定位：盒子套盒子原则

CSS的定位机制允许盒子嵌套，形成复杂的布局结构。例如，使用Flexbox布局，可以轻松创建水平或垂直的容器布局。盒子套盒子原则是实现现代网页布局的基础。

标签的分类：块级元素与行级元素

CSS对HTML标签进行了精确的分类，主要分为块级元素和行级元素：

• 块级元素（如div, p, h1）：无论内容如何，始终占据网页的一行，特征是边ultipartFile可能会进行自动换行。

• 行级元素（如span, a, img）：只占自身内容的宽度，适合用于文本内的小部分，如文字突出显示或图片。

display属性的作用

display属性是区分块级元素和行级元素的关键。通过设置不同的display值，可以改变元素的块与行状态：

• display: inline --> 转换为行级元素。
• display: block --> 转换为块级元素。

这种灵活性的设置使得开发者可以根据需求，在不影响其他元素布局的情况下，精确控制每个元素的显示方式。