这是我参与【第四届青训营】笔记创作活动的第2天

嗨害嗨，这里是因比赛与前端结缘的非科班练习生bf,今天来简单整理一下青训营“理解CSS”的相关内容，废话不多说，开始整活！ヾ(≧ ▽ ≦)ゝ*

一、CSS是如何工作的？

由上图我们可以看到 CSS 的工作流程：浏览器加载 HTML 后，对 HTML 进行解析，同时加载 CSS ，并对 CSS 进行解析，当 HTML 文件解析完成后会生成 DOM 树， CSS 将解析好的内容添加样式到 DOM 节点中形成渲染树，从而展示出最后的页面效果

二、颜色之——HSL

平时我调颜色使用的都是RGBA和关键字，在课上又了解到另一个能够表示色彩的方式——HSL模式

H: Hue（色相），色彩的基本属性，取值范围为0-360；

S: Saturation（饱和度），色彩的鲜艳程度，越高越鲜艳，取值范围为0-100%；

L: Lightness（亮度），颜色的明亮程度，越高颜色越亮，取值范围为0-100%；

举个栗子：

hsl(120,13%,14%)

注意：HSL模式同样可以结合透明度一起使用,即hsla()

透明度(alpha)：代表透明度，取值范围：0(完全透明)-1(完全不透明)

先上段小代码：

HTML:

<div id="thing" class="thing">一些内容</div>

CSS:

#thing {
color: red;
}

.thing {
color: blue;
}

这个字最后会是什么颜色呢？答案是红色，因为 id选择器 的优先级高于 类选择器，所以最终文字会呈现红色

那么，选择器的优先级关系是什么呢？

一般可以按照以下规则判断：

!import > 内联样式 > id选择器 > 类选择器 > 标签选择器

我们首先定义 A、B、C、D 四个值，然后这样来计算优先级：

举个栗子：

#father .son div > a

根据上面的内容，我们可以很快得出它的值：（0，1，1，2）

我们会求优先级后，还要会比较两个优先级的大小。规则是：从左至右依次比较，大的那个优先级高，如果相同，就往后挪一位继续比。如果四位数字全部相同，则后面的样式覆盖掉前面的

子标签会继承父标签中的某些属性，如字体颜色和字体大小等

举个栗子：

HTML:

<div>
    <p>我是子标签</p>
</div>

CSS:

div {
color: red;
font-size: 30px;
}

最终呈现效果是p标签中的文字变成了红色，同时字体也变成了30像素，这是因为CSS具有继承性

恰当地使用继承可以简化代码，降低CSS样式的复杂性

注意：子元素仅仅只能继承父元素中跟字体相关的样式，如text-,font-,line-开头的元素,color属性

布局是CSS中一个比较重要的内容了，跟布局相关的技术主要分为三个：常规流、浮动和绝对定位，在常规流中又包含行级、块级、表格布局、FlexBox、Grid布局，其中Grid布局之前没有了解过，所以来简单记录一下。

Grid布局是将网页划分成为一个个网格，可以任意组合不同的网格，做出各种各种的布局

布局大体分为三步：

未完待续...

以上就是本次的整理了，我们下次再见，拜了个拜(。・∀・)ノ