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

CSS: 层叠样式表

用来设置页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

1. CSS概览

    选择器（Property）{
        Property:属性值(Value);
    }

在页面中使用CSS的3种方式：

外联（推荐）
嵌入
内联

2. CSS是如何工作的

加载HTML文件。
解析HTML文件, 将HTML文件转化成一个DOM树
加载CSS, 浏览器拉取该HTML相关的资源，比如嵌入到页面的图片、视频和CSS样式。
解析CSS, 根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）。

3. CSS的用法

选择器 Selector
找出页面中的元素，以便给他们设置样式。

通配选择器：匹配全部元素

<style>
*{
   color:red;
   font-size:20px;
}
</style>

id选择器（id要求唯一）
```
#id{
   property:value;
}
```
类选择器(常用，class可出现多次)
```
.class{
    property:value;
}
```

属性选择器

[disabled]{
    property:value;
}

input[type="password"]{
    property:value;
}

伪类
不基于标签和属性定位元素

几种伪类：
- 状态伪类：如a标签在不同状态下 a:link
- 结构性伪类：根据dom节点中位置决定是否选中元素（first-child,last-child,通过写公式选择奇数/偶数标签）

4. CSS的继承性

某些属性会自动继承其父元素的计算值，除非显式指定一个值

文字属性一般能隐性继承，多媒体则不会隐式继承。

显式继承：
*{
    box-sizing:inherit;
}

5. CSS的初始值

CSS中，每个属性都有一个初始值

可以通过initial关键字显式重置为初始值,如： background-color:initial

6. 布局（Layout）

布局相关技术

    常规流
        盒模型
            width，height指定content box的宽高度，容器有指定的高度时，百分数才生效
            padding指定元素四个方向的内边距，百分数相对于容器宽度
        行级
        块级
        表格布局
        FilexBox
        Grid布局
    浮动
    绝对定位

理解 CSS|青训营笔记