课程讲师：赵文博
一、课程介绍
在掌握了 CSS 的基本原理后，这堂由赵文博讲师讲授的课进行了更深入的探讨。先是借助具体案例详细讲解 CSS 选择器的特异度，让我们明晰样式优先级的判断依据。接着引出 CSS 继承与布局相关话题，做了全面介绍。而课程重点围绕 CSS 盒模型里 “行级” 与 “块级” 这两种常见布局结构展开，阐述它们的基本定义、各自具备的特征、涉及的工作属性以及排版规则，同时还提供了业内实用的操作思路，旨在助力我们强化 CSS 的实战技能，为更高效地进行网页样式设计打基础。
二、课程重点内容
（一）CSS 选择器的特异度
-
基本概念：
CSS 选择器的特异度用于确定当多个选择器作用于同一元素且样式规则存在冲突时，浏览器最终采用哪个选择器所定义的样式，本质上就是衡量样式规则优先级的一种方式。它由选择器中不同类型选择器的数量共同决定，不同类型选择器有着不一样的权重。 -
权重计算规则：
- ID 选择器：权重最高，单个 ID 选择器在特异度计算中计为
100分。例如#header这个选择器，其特异度就是100。 - 类选择器、属性选择器和伪类选择器：权重稍低，每个此类选择器计为
10分。像.nav（类选择器）、[type="button"]（属性选择器）、:hover（伪类选择器）等，单独的特异度均为10。 - 元素选择器和伪元素选择器：权重最低，单个计为
1分。比如p（元素选择器）、::before（伪元素选择器），它们的特异度为1。 - 通配符选择器（
*） ：特异度极低，通常计为0分，多作为宽泛的基础样式设置，在特异度竞争中很难占优势。
- ID 选择器：权重最高，单个 ID 选择器在特异度计算中计为
-
案例说明：
假设对一个<p>元素，存在p（元素选择器，特异度1）、.content p（类选择器与元素选择器组合，特异度10 + 1 = 11）、#main p（ID 选择器与元素选择器组合，特异度100 + 1 = 101）这几个选择器都定义了color属性，最终会应用#main p所定义的color样式，因为它特异度最高。在实际网页开发中，若要覆盖某个元素已有样式，就得依据特异度规则合理选用选择器，比如想改变特定区域按钮的颜色，可借助高特异度选择器来实现精准控制。
（二）CSS 继承
- 定义与原理：
CSS 继承指的是部分 CSS 属性在未被明确指定给子元素时，子元素会自动继承父元素相应的属性值。不过，并非所有 CSS 属性都可继承，像文本相关属性（如color、font-size、font-family等）通常可继承，而布局相关属性（如width、height、margin等）大多不会被继承。例如，若<div>元素设置了color: red;，其内部<p>子元素未单独设置color属性时，<p>元素文字颜色就会是红色，这体现了继承特性。 - 实际应用与控制：
CSS 继承有助于减少代码重复编写，提升代码可维护性。若希望某部分页面文本具有统一的字体、颜色等样式，只需在父元素上设置相关可继承属性即可。但有时不想让子元素继承父元素某些属性，这时可通过inherit（强制继承）、initial（重置为初始值）、unset（根据属性默认继承情况重置或继承）等关键字来控制。比如，父元素设置color为红色，想让某个子元素恢复默认颜色，可设置color: initial;。
（三）CSS 求值过程解析
- 求值阶段：
CSS 求值过程主要包含收集样式规则、计算特异度、应用样式这几个阶段。浏览器首先会从外部样式表、内部样式表、行内样式等各类来源收集作用于页面元素的所有样式规则；接着针对每个元素，依据特异度计算方法确定各样式规则的特异度高低；最后结合特异度以及样式继承情况等，把最终确定的样式应用到相应元素上，呈现出页面实际的视觉效果。 - 样式冲突处理：
样式冲突在求值中较常见，主要依靠特异度及样式声明顺序来解决。特异度高的样式优先应用，若特异度相同，则后声明的样式覆盖先声明的样式（前提是针对同一元素且属性冲突）。例如，在同一样式表中先定义p { color: blue; }，后定义p { color: green; }，那么<p>元素最终文字颜色为绿色，因后声明样式覆盖了前者（这里特异度相同，都是元素选择器）。
（四）CSS 布局方式及相关技术
-
常见布局方式：
- 流式布局（Flow Layout） ：这是浏览器默认的布局方式，元素按文档流顺序依次排列，块级元素独占一行，从上到下排列，行内元素在一行内从左到右（英文等语言环境下）排列，遇父元素边界换行。像普通
<p>元素（块级）垂直排列，<span>元素（行内）可多个一行显示，适用于简单文档类页面布局。 - 浮动布局（Float Layout） ：通过给元素设置
float属性（值为left或right），元素脱离文档流向左或向右浮动，可实现多栏布局效果。例如制作两栏布局，将文章内容所在<div>设为float: left;，侧边栏所在<div>设为float: right;，再合理设置宽度等属性调整布局，但要注意处理父元素高度塌陷问题，常用clear: both;清除浮动。 - 定位布局（Position Layout） ：CSS 提供多种定位方式，
static（默认静态定位，按正常文档流排列）、relative（相对定位，相对于自身原文档流位置偏移，通过top、bottom、left、right属性设偏移量）、absolute（绝对定位，脱离文档流，相对于最近已定位祖先元素定位，无已定位祖先则相对于文档根元素定位）、fixed（固定定位，脱离文档流，相对于浏览器视口固定位置，常用于顶部导航栏、侧边广告等固定效果，页面滚动其位置不变）。比如制作弹出提示框在页面中间显示，可将其元素设为absolute定位，再调整各方向属性定位到中间。 - 弹性盒布局（Flexbox） ：适合一维布局，能方便控制元素在主轴（可通过
flex-direction设水平或垂直方向）和交叉轴上的排列、对齐等，常用于导航栏、列表等场景。 - 网格布局（Grid Layout） ：侧重于二维布局，可像表格一样精确划分页面为行和列，再将元素放置到相应网格单元格中。
- 流式布局（Flow Layout） ：这是浏览器默认的布局方式，元素按文档流顺序依次排列，块级元素独占一行，从上到下排列，行内元素在一行内从左到右（英文等语言环境下）排列，遇父元素边界换行。像普通
（五）CSS 盒模型 - 行级
-
基本定义：
行级元素在 CSS 盒模型中是那些在一行内按顺序排列的元素，它们不会独占一行，宽度和高度通常由其内容撑开，而不是像块级元素那样可以手动设置固定尺寸（当然在特殊情况下也可通过一些手段改变其默认表现）。常见的行级元素有<span>、<a>、<strong>等。 -
特征：
- 水平排列：在默认情况下，多个行级元素会在一行内从左到右（对于从左到右书写的语言）依次排列，直至一行排不下才换行，而且它们之间的间距等排版会受文本排版规则影响，比如字间距、词间距等因素。
- 宽度自适应：其宽度通常取决于内容的长度，不会主动撑开父元素的宽度，也很难直接通过
width属性设置固定宽度（除非改变其display属性等使其表现类似块级元素）。 - 高度特性：高度同样基本由内容决定，比如一行文本内容多则高度相应增加，并且一般不会撑开父元素高度到超过自身内容所需高度（除非特殊样式设置）。
-
工作属性及排版规则：
- 外边距（Margin）和内边距（Padding） ：行级元素设置外边距和内边距时，垂直方向上的外边距和内边距在正常文档流中不会像块级元素那样推开其他元素，它们对布局的影响更多体现在水平方向上，比如增加水平方向的间距等。
- 边框（Border） ：可以为行级元素设置边框来美化外观或者做一些简单的视觉区分，边框会围绕在行级元素的内容周边，同样在水平方向上更能体现其对整体布局的影响，不会像块级元素边框那样改变整体的行高和垂直布局。
（六）CSS 盒模型 - 块级
-
基本定义：
块级元素在 CSS 盒模型里是会独占一行的元素，它们可以通过width和height属性设置明确的宽度和高度，在页面布局中起着构建主要框架的作用。常见的块级元素如<div>、<p>、<h1>-<h6>等。 -
特征：
- 独占一行：每个块级元素都会单独占据一行，从上到下依次排列在页面中，不管其内容多少，都会强制换行显示，除非通过特殊的布局方式（如浮动、定位等）改变其默认的文档流行为。
- 可设尺寸：能方便地使用
width和height属性来定义其宽度和高度，从而精确控制其在页面中的占位大小，当然也可以根据内容自动撑开（比如不设置width时，内容多宽度就相应变宽等情况）。 - 影响布局深度：块级元素的排列顺序和尺寸设置会直接影响整个页面的布局结构，是构建页面整体框架的关键元素类型。
-
工作属性及排版规则：
- 外边距（Margin）和内边距（Padding） ：外边距在垂直方向上会推开其他相邻的块级元素，影响元素之间的间距布局，内边距则是在元素内部增加内容与边框之间的距离，都会对整体的页面布局产生较为明显的影响，比如调整段落之间的距离、块元素内部内容的留白等。
- 边框（Border） ：为块级元素设置边框可以清晰地划分元素边界，使其在页面上更具视觉区分度，边框的粗细、样式、颜色等属性设置会改变元素整体的外观和所占空间大小，进而影响周围元素的排版布局。
三、学习收获与感悟
通过这堂课的学习，对 CSS 的多个关键知识点有了更深入、细致的理解。尤其是 CSS 选择器特异度、继承、求值过程这些基础但又极为重要的概念，让我更清楚样式规则在浏览器中的应用逻辑。而深入学习 CSS 布局方式以及盒模型里行级和块级元素的相关知识，更是为今后进行复杂、精准的网页样式设计提供了有力的理论和实践指导，后续还需通过更多实际项目操作来进一步巩固和运用这些知识，不断提升 CSS 实战能力。
