这是我参与「第五届青训营 」伴学笔记创作活动的第2天
CSS的基础介绍
CSS作为前端三件套之一，全称是Cascading Style Sheets。也就是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简而言之，CSS决定了网页中各个元素的样式即它们的视觉效果。
CSS一般由Selector（选择器）和Declaration（声明）构成，其中声明又由Property（选择器）和Value（值）组成。举个例子
h1{ #h1 —— Selector
color = "red"; #color —— Property，"red" —— Value
front-size = 14px; #front-size = 14px —— Declaration
}
那在页面中我们应如何使用CSS？一般通过三种方式：1.外链 使用<link>标签引用 2.嵌入 在<style>标签中编写 3.内联 在标签内部通过style属性编写
CSS的使用方法
Selector（选择器）
Selectot的作用是找出页面中的元素，方便设置它们的样式。CSS提供了多种方法方便我们选择元素，但一般使用以下几种：
- 按照标签名，类名，id
- 按照属性名
- 按照DOM树中的位置.
由于内容过多并简单，举几个例子就不全部展开了。
通配选择器
<style>
* {
color: red;
font-size: 20px;
}
</style>
标签选择器
<style>
h1 {
color: orange;
}
p {
color: gray;
font-size: 20px;
}
</style>
伪类(pseudo-classes)
这种方法不基于标签和属性定位元素，它通过结构和状态定位元素。一般有两种伪类：结构性伪类，状态伪类。
状态伪类
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
</style>
组合和选择器组
文本渲染
- RGB——最普遍的调色方法
- HSL——色相（H）：基本颜色,饱和度（S）：鲜艳程度，亮度（L）：明亮程度
- alpha——透明度
- front-size——字体大小
- 等等
注意点：在HTML里多个空格或换行会合并成一个。如果有特殊需求可以通过white-space进行修改。
CSS调试
- 右键点击页面选择检查
- 使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)
深入了解CSS
CSS 选择器的特异度
-
因为在css中可能会有多个样式同时影响同一个元素的某个属性，CSS选择器的特异度可以解决作者，用户和用户代理的样式冲突。
-
如何计算CSS选择器的特异度？特异度由三个东西的选择器数量决定：一是id，二是类（包括伪类），三是标签。权重是id最高，类次之，标签最小。
CSS 继承
CSS继承是指子元素中某些属性会自动继承其父元素的计算值，除非显性指定一个值。一般来说，文本属性是可继承的，但是和盒模型相关的属性一般不可继承。除非在通配选择器将属性的值设置为inherit。
CSS 初始值
CSS中每个元素都具有初始值，可以使用initial关键字进行重置
CSS 求值过程
在了解以上内容后，通过以下的流程图，我们能大致明白一个元素的样式是怎样计算出来的。
布局
布局（Layout）是一种确定内容大小位置的算法，依据元素，容器等内容进行计算。
盒模型
这张图包含了常见的盒模型元素，具体元素的属性用法这里就不一一介绍了。
再了解完基础的盒模型后，它还有两种常见的布局规则：块级（Block Level Box）和行级（Inline Level Box）
Display属性决定盒子按照哪种布局规划排版。
常规流（Normal Flow）
这里注重讲下FlexBox和Grid布局
FlexBox
FlexBox可以控制子级盒子：
- 摆放的方向，顺序
- 盒子的高宽
- 水平和垂直方向的对齐
- 是否折行 盒子的宽高和是否折行一般由以下属性控制flex-grow，flex-shrink，flex-basis（也可以缩写成flex）
其他控制由flex-direction，justify-content，align-items等属性实现
Grid布局
Grid布局是将空间分割成一个一个网格，再设置每个子项占据哪些网格。
- 一般使用grid-template-rows（columns） 来划分网格
- 也可以使用grid-rows（columns）-start（end） 或 grid-area 根据网格线决定布局。
定位（Position）
Position属性用于定位元素在盒中的位置
- relative：相对于自己本应该存在的位置位移
- absolute：相对于最近的非static祖先定位。
