这是我参与「第五届青训营 」笔记创作活动的第3天
一、本堂课重点内容：
- CSS选择器的特异度
- CSS继承
- CSS求值过程解析
- CSS布局方式及相关技术
- CSS盒模型-行级
- CSS盒模型-块级
二、详细知识点介绍：
CSS选择器的特异度(Specificity)
CSS选择器特异度(Specificity)是用来确定 CSS 规则应用到 HTML 元素时的优先级。特异度是由四部分组成的：
- 元素选择器（如：p，h1），每个元素选择器的特异度值为 1；
- 类选择器（如：.red），每个类选择器的特异度值为 10；
- ID 选择器（如：#header），每个 ID 选择器的特异度值为 100；
- 直接样式（如：style=”color:red”），每个直接样式的特异度值为 1000。
例如，如果有以下两个 CSS 规则：
#header p { color: blue; } /* Specificity = 100 */
p { color: red; } /* Specificity = 1 */
对于<p>标签，会先采用第一个规则，即颜色为蓝色。因为第一个规则的特异度值更高，所以会优先采用。
CSS布局方式及相关技术
CSS布局方式有很多种，常见的有流动布局、绝对定位布局、浮动布局和 Flexbox 布局。
-
流动布局（Flow Layout）：这是默认的布局方式，元素会按照从上到下、从左到右的顺序流动，并自动换行。比如:
<div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div>这样的元素就是按照顺序从上到下排列
-
绝对定位布局（Absolute Positioning）：使用
position: absolute属性可以将元素定位到父容器的指定位置。<div style="position: relative"> <p style="position: absolute; top: 20px; left: 30px">This is a positioned paragraph.</p> </div>这样的元素就是相对于父元素的左上角定位。
-
浮动布局（Floating Layout）：使用
float属性可以将元素浮动到父容器的指定位置。<div> <img style="float: left" src="image.jpg" alt="image"> <p>This is a floated paragraph.</p> </div>这样的元素就是把图片浮动到左边，文本在右边。
-
Flexbox 布局（Flexible Box Layout）：使用
display: flex属性可以将一个容器变为 Flex 容器，并对其子元素进行布局。<div style="display: flex; flex-wrap: wrap"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>这样的元素就是子元素在一行中并换行显示。
Flexbox 布局提供了很多灵活的布局选项，例如可以设置主轴和交叉轴的对齐方式、可以设置子元素的顺序、可以设置子元素的比例等。这些选项都可以使用 flex 属性和其它的属性来实现。
除了这几种布局方式，还有一些其它布局技术，如 Grid 布局和 CSS Grid Layout，它们都可以提供更为灵活和强大的布局能力。
CSS盒模型-行级
CSS盒模型是指元素在页面中的布局方式。其中，行级盒模型指的是元素的高度由其文本内容的高度决定。
例如，如果有以下 HTML 结构：
<p>This is a paragraph.</p>
那么，这个元素的高度就是其文本内容的高度，即文本的行高。
对于行级盒模型，它不支持设置元素的高度和宽度，因为其高度是由文本内容决定的。另外，它不会支持设置上下内边距和左右内边距。
当然，行级盒模型可以设置左右外边距和上下外边距，使用 margin 属性可以设置外边距:
<p style="margin:10px">This is a paragraph.</p>
这样就能给这个元素设置上下左右各10px的外边距。
总而言之，行级盒模型适用于需要基于文本内容进行布局的场景，如果需要对元素的高度和宽度进行更精细的控制，建议使用块级盒模型。
CSS盒模型-块级
CSS盒模型-块级盒模型是指元素的高度和宽度由 CSS 属性来指定。它是一种常用的布局方式，可以设置元素的宽度、高度、内边距和外边距。
例如，如果有以下 HTML 结构:
<div>This is a block element.</div>
可以使用 CSS 属性设置这个元素的宽度和高度:
div {
width: 200px;
height: 100px;
}
这样设置宽度为200px,高度为100px。
也可以设置内边距和外边距：
div {
padding: 20px;
margin: 10px;
}
这样设置上下左右内边距为20px,上下左右外边距为10px。
还可以设置元素的对齐方式,如:
div {
text-align: center;
}
这样设置文本内容为居中对齐。
块级盒模型的元素会默认占据整行，并且会在其下方换行。
在实际项目中，块级盒模型常用于布局容器元素，如 div、header、section 等。它们可以作为容器元素来组织页面布局，并且可以利用块级盒模型的特性来设置容器元素的尺寸和位置。
总之，块级盒模型提供了更为灵活的布局能力，能够更好地控制元素的尺寸和位置。在需要对元素的尺寸和位置进行更精细控制的场景中，块级盒模型是一种非常有用的工具。
三、实践练习例子：
CSS继承
CSS继承是指当一个元素继承了父元素的样式时，子元素将会继承父元素的某些样式。
例如，如果有以下 HTML 结构：
<div class="container">
<p>This is a paragraph.</p>
<span>This is a span.</span>
</div>
父元素div定义了一个类样式container:
.container {
font-size: 16px;
font-family: Arial, sans-serif;
}
因此，子元素 p 和 span 将会继承父元素 div 的字体大小和字体样式。
这里需要注意的是，并不是所有样式都能被继承，比如 background-color 和 padding 都不能被继承。
如果需要给子元素定义不同的样式，可以直接定义子元素的样式。比如下面的例子：
.container {
font-size: 16px;
font-family: Arial, sans-serif;
}
.container p {
color: red;
}
这样，子元素 p 就能继承父元素的字体大小和字体样式，同时它的文字颜色为红色。
CSS求值过程解析
CSS求值过程是指浏览器如何确定应用于 HTML 元素的样式。这个过程包括三个步骤：
- 选择器匹配：浏览器会查找所有与当前元素匹配的选择器，并把它们的 CSS 规则收集起来。
- 按照特异度值排序：浏览器会按照特异度值从高到低排序所有收集到的规则。特异度值高的规则优先级高，会覆盖特异度值低的规则。
- 应用样式：浏览器会按照排序后的顺序应用所有规则，最终确定元素的样式。
实例练习，如果有以下 CSS 规则:
p {
color: blue;
font-size: 16px;
}
.highlight {
color: yellow;
}
#header p {
color: red;
font-size: 20px;
}
和这样的 HTML 结构:
<div id="header">
<p class="highlight">This is a highlighted paragraph.</p>
</div>
- 首先浏览器会查找与元素匹配的选择器，找到三个规则，分别是
p, .highlight, #header p - 排序特异度值
#header p > .highlight > p - 应用样式，最终确定元素的样式，因为
#header p > .highlight > p所以最终样式为color: red; font-size: 20px;
这样，就能确定文本颜色为红色，字体大小为 20px 的样式。
需要注意的是，CSS 求值过程并不是只在页面加载时进行一次。当页面布局、大小或者元素的状态发生改变时，浏览器会再次重新进行求值过程。这就是为什么使用 CSS 选择器和特异度优化样式应用的重要性。
此外，在处理嵌套的元素时，浏览器会从内向外进行求值。例如，在上述例子中，浏览器首先会查找对于 #header p 的样式规则，再查找对于 .highlight 的样式规则，最后再查找对于 p 的样式规则。
这样，就能通过优化选择器和特异度来确定最终样式，并使页面渲染更快，性能更优。
四、课后个人总结：
通过深入学习CSS相关知识，我了解了多种布局方式，如流动布局、绝对定位布局、浮动布局和Flexbox布局,以及CSS盒模型-行级盒模型和块级盒模型,还有选择器特异度和继承,CSS求值过程解析。通过学习这些知识,我们可以更好地理解和掌握CSS的各项概念，并更好地运用到实际项目中。
