这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
重点内容：🍊CSS如何工作🍋选择器🍑布局相关技术
🍉前言🍉
本节课程老师带领我们深入浅出的理解了CSS的基本原理和用法。接下来，让我们回顾一下本次课程的主要内容~
🍈CSS是什么🍈
CSS（Cascading Style Sheets）层叠样式表，用来定义页面元素的样式。 在页面中使用CSS有三种方式：
外链式
<link rel="stylesheet" type="text/css" href="images/css/style.css"/>
嵌入式
<style type="text/css">
div {color: white; }
p {margin: lem 0; }
</style>
内联式
<p style="width: 100%;" >
一般来讲，比较推荐使用外链式，这样可以把内容和样式分离，更有利于项目的开发。组件开发之类的项目一般都写在一个单文件里，也即第二种嵌入方式，这样做也问题不大。
🍎CSS如何工作🍎
如图所示，在浏览器加载完HTML文件后，解析文件时会加载并解析CSS代码，并把样式添加到所创建的DOM树上，最终形成展示的页面。
🍐选择器🍐
CSS丰富的选择器使得它能够非常灵活的选择各个节点的元素。
*通配符选择器、标签选择器、# id选择器、. 类选择器、[ ] 属性选择器以及伪类选择器
伪类选择器的使用：
<style>
/* 未访问时 */
a:link {
color: red;
}
/* 访问过后 */
a:visited {
color: blue;
}
/* 悬停时 */
a:hover{
color: green;
}
/* 按下但未释放时 */
a:active{
color: yellow;
}
/* 光标聚焦时 */
a:focus {
color:orange;
}
</style>
选择器包含多种多样，使用组合选择器就可以实现很多自定义的选择功能。
举个🌰：
<style type="text/css">
p{
width: 2.5rem;
height: 2.5em;
background-color: lightgray;
text-align: center;
}
/* 指定第几个元素 */
p:nth-child(4){
background-color: orange;
}
/* 指定倒数第几个元素 */
p:nth-last-child(3){
background-color: skyblue;
}
/* 奇数元素 */
p:nth-child(odd){
background-color: skyblue;
}
/* 偶数元素 */
p:nth-child(even){
background-color: firebrick;
}
/* 3的倍数，其中n从1开始 */
p:nth-child(3n){
background-color: orange;
}
/* 属性值以color开头 */
p[class^=color]{
background-color: lightblue;
}
/* 属性值以box结尾 */
p[class$=box]{
background-color: orange;
}
/* 属性值book在任意位置 */
p[class*=book]{
background-color: firebrick;
}
</style>
🍅一些建议🍅
line-height 设置行高，HTML默认的行高是1.1~1.2，这是非常不适合阅读的，所以多段文字一般都需要设置行高。
HTML中对于空白符的处理：默认情况下多个空格或者连续换行会被合并为一个，那如果我们就像展示多个空格，或者换行该怎么办呢？ 方法就是设置white-space属性！
🍒选择器的特异度🍒
在面对多个规则同时存在时，同时只能有一条规则生效，这就不得不说一下选择器的特异度了。当有多个拥有相同重要性的CSS选择器里的样式要应用于同一个元素时，特异度最高的选择器声明的样式将优先应用于该元素。
🥝CSS继承🥝
某些属性会自动继承其父元素的计算值，除非显式指定一个值（inherit）
一般跟文字属性相关的，都是可以继承的；跟盒模型相关的属性都是不可继承的。 如果没有找到可继承的值，则会使用属性的初始值。例如：background-color初始值为 transparent；margin-left初始值为0；可以使用initial关键字显式重置为初始值。
🍓布局相关技术🍓
🥥盒模型🥥
经典的盒模型如图所示
通过调整盒模型中不同的属性值可以调整元素的存在位置。
需要关注的是，width指定content box宽度，取值为长度、百分数、auto；height指定content box高度，取值为长度、百分数、auto，但只有容器有指定的高度时，百分数才生效！
🫐几种布局🫐
Flex布局
Flex布局 Flex Box 用的最多最灵活的一种布局方式 因为摆放的方向有四种，所以不能简单的用水平和垂直来区分对齐方式，因此引入了主轴和侧轴的概念。
主轴：元素摆放的方向
侧轴：和主轴垂直的方向
Flexibility：设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩 flex-grow 设置弹性，是指容器减去固定的宽度之后，将剩余的宽度按比例分配给剩下的元素。
Grid布局
通过划分网格 ，元素通过网格线放入网格中。
🍌总结🍌：
最后，通过本节课程的学习，深入浅出的了解了CSS及其背后的工作原理，想要学习更多细节还需要自行钻研！俗话说的好，✨师傅领进门，修行靠个人✨~
