这是我参与「第四届青训营 」笔记创作活动的的第1天。
一、本堂课重点内容：
1. CSS工作方式
2. CSS选择器
3. 常用CSS属性,以及初始值initial
4. CSS权重(特异度)问题
5. 布局相关技术
二、详细知识点介绍以及例子：
1.CSS（Cascading Style Sheet）工作方式
打开页面后，浏览器会加载HTML，并对其进行解析获得树形结构（DOM树）。通过外链、嵌入和内联加载并解析CSS，获取树上每一个节点对应的CSS样式从而得到渲染树，将DOM节点渲染出对应的样式，最终获得一个具体的页面。
2. CSS选择器
除去最基本的标签选择器，选择的是html中所有同一类型的标签，还有以下选择器
(1)id选择器
对html元素设置id属性，并在css中设置对应的id选择器，#id名{属性值设置}，不允许在html中使用多个同一个id的元素
<style>
#test {
/*#id名{样式属性}，只能调用一次id="idName"*/
color: rgb(20, 175, 247)}
</style>
<h1 id="test">标题</h1>
(2)类选择器
对html元素设置class属性，并在css中设置对应的类选择器，.类名{属性值设置}，可以在html中重复调用
<style>.test {
/*.类名{样式属性}，可以调用多次class="className"*/
color: rgb(20, 175, 247)}
</style>
<h1 class="test">标题</h1>
(3)属性选择器
根据html元素的某个属性(值)进行选择，可以与其他选择器进行结合使用
<style>* { /*通配符选择器*/
/*body div span li等标签均会被修改样式*/
color: bisque; } div[index="1"]{
background-color: aqua; }
div[index="2"]{
background-color: red;}[index="3"]{
background-color: azure;}[index]{/*选择带有index属性的元素*/
font-size:30px;
font-style: italic; } </style>
<div index="1">this is index 1</div>
<div index="2">this is index 2</div>
<div index="3">this is index 3</div>
此外，还可以通过一个选择器选择指定属性字符串值片段(开头和结尾)的html元素
匹配属性值前缀进行选择，选择以”li”开头的class属性值li标签
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li> </ul>
<style>
li[class^="li"]{/*选择class属性以"li"开头的li标签*/
color:blue;
}
</style>
匹配属性值后缀进行选择，选择以”2”结尾的class属性值li标签
<ol>
<li class="node1">1</li>
<li class="node2">2</li>
<li class="node3">3</li>
</ol>
<style>
li[class$="2"]{
color:red;
}
</style>
(4)伪类选择器
通常用于a标签以及input标签的样式设置
对于a标签：
<style> /*伪类选择器，使用:，尽量按照link visited
hover active顺序编写*/
a:link {
/*选择所有未访问的链接，visited已访问过,active鼠标正在点击的,hover鼠标瞄准的*/
/*平时通常先单独写链接样式再只写一个hover伪类*/
text-decoration: none;
color: rgb(236, 27, 27); }
a:visited {
color: orange; }
a:hover {
color: rgb(0, 255, 255); }
a:active {
color: black; }
</style> <body> <a href="#">测试链接样式</a>
</body>
链接在点击前有一个默认的颜色
如图：
鼠标瞄准后(hover)，链接文本颜色将会发生变化
点击（访问后）的链接同样支持样式选择
对于文本输入框input标签，同样有伪类样式，:focus，指的是正在选中输入的状态。
此外还有:nth -child，:nth-of-type等对于子标签使用的结构伪类选择器，可以选择出父级标签中指定的html元素。
<style>
ul li:first-child {
list-style: none;
background-color: rgb(245, 245, 245); }
ul li:last-child {
list-style: none;
background-color: skyblue;}
</style>
ul li:first-child
指定选择ul里面的第一个孩子,且此子标签必须是li标签才会生效，若在li标签之前放置了其它类型的标签则会失效
(5)后代选择器和子代选择器
后代选择器：选择的id、类、标签通过空格分开。后面（右边）的为前面（左边）的后代元素（在html中为嵌套在内部的标签）
选择test1类内部的span标签
<style>
.test1{
background-color: pink; }
.test1 span{
background-color: aqua; }
</style>
<body>
<div class="test1">
<span>test</span>
</div>
</body>
子代选择器：限制住了选择范围，不会选中子代的子代
<style>
ul>li{
background-color: aqua;
float: left; }
</style>
<body>
<ul>
<li>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</li>
<li>2</li>
<li>3</li>
</ul>
</body>
图中的无序列表li标签浮动了而内部嵌套的有序列表li标签并未浮动
(6)相邻兄弟选择器
选择相邻且属于同一个父元素的html元素。
通过+符号连接两个元素对应的css类名、id或者标签，此选择器选择+后方的选择器
此处选择的是前方相邻元素是span的div标签
<style>
span + div{
width: 100px;
height: 100px;
background-color: aqua;
color:red }
</style>
<body>
<span>1</span>
<div>2</div>
</body>
此选择器的原理是遍历兄弟节点集，将满足条件的兄弟元素选中，所以第一个遍历到的节点（+前面的）一定不会被应用样式。
若将+换为~，则选中~前方节点后面的所有指定类型的兄弟节点。
3.常用CSS属性,以及初始值initial
网页元素都有默认的css属性，这些默认的css属性也表现出它们的常规用途，
(1) 文字颜色color:initial默认为黑色
(2) 背景颜色background-color:initial默认transparent
(3) box-sizing:initial默认content-box，即盒子最终大小不会是height和width属性所决定的。
(4) 大多数html标签的部分属性是默认支持继承的，但是有一部分标签不会继承父级元素的css设置，如a标签，它默认设置了一系列链接的样式，默认值不是inherit，所以不会受到父级元素的css影响。
4. CSS权重(特异度)问题(id,(Pseudo) class, tag)
CSS选择器是有权重的，有三个权重级别依次从高到低(id选择器，（伪)类选择器，html标签选择器)，按照一个选择器语句中出现的次数进行累加求和，计算权值，遇到冲突样式则按照选择器权重进行冲突解决。
如图，对div进行选择，出现了两个标签名，故此选择器权重为(0,0,2)
这个类选择器只有一个类名写了上去，故权重为(0,1,0)
这个选择器只有一个id写了上去，故权重为(1,0,0)
最后，第三个选择器权重最高，故冲突的color属性会被id选择器覆盖为blue
<style>
span + div{
width: 100px;
height: 100px;
background-color: aqua;
color:initial }
.testClass{
color:red; }
#testId{
color:blue; }
</style>
<body>
<span>1</span>
<div id="testId" class="testClass">2</div>
</body>
5.布局相关技术（display,float,position）
(1) 行级inline：通常用于普通的文本类型标签，一行放置不下将会分行放置，无法调整宽高等属性。
(2) 块级block：用于盒子模型，一个独占一行，可以设置宽高等属性。
(3) 行内块级inline-block：不会独占一行的块，作为行内级别的元素放置在行中，可以与文本混排，如img标签若当前行空间不足以放置则会放置在下一行，不会像行内元素分行存放。
(4) BFC(block formatting context)：盒子从上到下摆放，垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠。
(5) Flex布局：display:flex，在很大程度上能够代替以前float的用法，让子元素在行内放置，子元素设置flex属性可以控制平分父级剩余空间，逐个放置在行内控制，达到一维布局控制。
(6) Grid布局：将页面划分为网格，自行规划网格所占份数，达到二维布局控制。
(7) 浮动float：过去常用来使div元素横向布局，并且会导致父级盒子高度塌陷，通常需要清除浮动。现在通常用于文本环绕图片。
(8) 定位：修改position css属性，相对定位：relative（不会脱标，元素移动后不会影响其他元素布局），绝对定位absolute（脱标，其余元素无视此元素进行布局，通常需要配合父级元素的相对定位使用）。固定定位(position:fixed)将元素固定在页面某一个位置，不会跟随网页滚动，常用于制作固定导航栏。
三、课后个人总结：
本人前端0基础，还没有达到代码搬运工水平，需要根据今天老师简要讲解的前端重点进行深入学习和更多的练习。
