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

CSS是什么

Cascading Style Sheets

层叠样式表：用来定义页面元素的样式名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

css的基本组成

选择器 Selector：选择HTML元素，对其进行样式的修改
选择器 Property：选择CSS中内置属性，他代表某些含义
属性值 Value：选择想要的样式
声明 Declaration：Property和Value结合中间用‘:’分割，结尾用‘;’代表他是一个声明
规则：选择器加大括号加上声明，他属于一条规则

h1{
    //下面代表一个声明
    color:white;
    //上面代表的就是一个声明
}

页面中使用css的方式

外链：通过link标签引入
嵌入：通过在html中添加style标签，在其标签内写css代码
内联：在需要修改样式的元素处，添加style属性修改当前元素的样式

一般来说推荐第一种，可以更符合语义化，html就是内容，css就是样式，通过文件分开。

CSS的工作流程

可见，我们的CSS与HTMl有相应单独解析的过程，最后在创建DOM树的时候，将其合并后展示

CSS使用介绍

选择器

通配选择器：可以选择全部元素
标签选择器：选择标签元素
id选择器：读取标签中的id属性值，选择对应的元素，id应该应该是唯一的
类选择器：读取标签中的class属性值，选择对应的元素
伪类选择器：选择标签不同的状态下的样式，存在状态伪类和结构伪类
属性选择器：通过'[]'进行框选，可以选择拥有这个属性的标签，也可以选择当属性拥有特定的值时选择

    input[type="password"]{
        xxx
    }

以上代码为当input拥有type="password"时生效的xxx样式。

也可以通过 "^=" 和 "$=" 来选择以什么开头和什么结尾的属性，这跟正则的代表含义一样。

组合

特异度Specificity（权重）

!important > 行间样式 > ID 选择器 >class 选择器｜伪类选择器｜属性选择器 >元素选择器｜伪元素选择器 > 通配符选择器｜子选择器选择器｜相邻兄弟选择器

继承

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

关于盒模型部分的属性通常不可继承性

显式继承box-sizing: inherit;可以使原本不可继承的变成可继承。

初始值

css中，每个属性都有一个初始值，可以使用initial关键字显式重置为初始值

比如background-color: initial,将背景颜色重置为初始值透明。

盒模型

contentbox

可以把标签看成一个个的盒子，他由content，padding，boder，margin组成，设置的宽高是content的宽高。

boder-box

在box-sizing: boder-box下，设置的宽高包括content，padding，boder，这样更符合开发直觉。

行级和块级

行级排版上下文 Inline Formatting Context（IFC）

只包含行级盒子的容器会创建一个IFC，在其中的排版规则如下

盒子在一行内水平摆放
一行放不下会换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
会避开浮动元素

块级排版上下文 Block Formatting Context （BFC）

会创建一个BFC的容器有：根元素、浮动、绝对定位、inline-block、Flex子项和Grid子项、overflow不是visible的块盒、display：flow-root。其中排版规则如下

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Flex Box

他属于一种新的排版上下文，可以控制子级盒子

CSS：前端的必修课 ｜ 青训营笔记