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

青训营的第2天，该课程主要包含CSS的内容，下面是课程的笔记和总结。

课程笔记

CSS定义

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

使用方式

首先是CSS的三种使用方式，行内直接写在需要运用的标签，内联写在<style>标签中，以及外联写在单独的*.css文档中并使用<link>标签引用。

规则集

p(选择器) {
 color(属性名): red(属性值);
}

选择器

需要选择指定内容应用样式时需要使用选择器，它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

选择器特异度

选择器特异度是在出现多个选择器选中同一个内容时运用何种样式这个问题的解决方案。一般来说，id>类>标签，就是说精确度越高的的选择器优先级越大，如果出现优先级相同的情况，需要计算相应的优先级。一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。
百位：选择器中包含 ID 选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

/* 1. 优先级: 1-0-1 id+标签 */
#outer a {
    background-color: red;
}
        
/* 2. 优先级: 2-0-1 id*2+标签*/
#outer #inner a {
    background-color: blue;
}

/* 3. 优先级: 1-0-4 id+标签*4*/
#outer div ul li a {
    color: yellow;
}

/* 4. 优先级: 1-1-3 标签*3+类+id*/
#outer div ul .nav a {
    color: white;
}

/* 5. 优先级: 0-2-4 伪类*2 + 标签*4*/
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* 6. 优先级: 0-2-3 伪类*2+标签*3*/
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* 7. 优先级: 0-3-3 标签*3+类*3*/
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

以上的例子中优先级最大的是第二个样式。除此之外还有优先级最低的通用选择器*，以及优先级最大的选择器!important。如果是写在标签中的行内样式，则因为没有选择器，所以优先级最大。

CSS也具有复用、继承相关的概念（一般来说字相关属性是可继承的，盒子模型不可继承，可使用属性值inherit）

CSS中的属性

CSS中的属性包括字体(font-family)，颜色(color)，背景色(background-color)，大小(font-size)等。属性值一般具有关键字，如字体大小可以选small,large等，也可以设置为具体的大小如10px、2rem等。

CSS布局

CSS布局包含三种：常规流（行级，块级、flex-box、grid）、浮动、绝对定位

块级元素：body、div、p、main 行级元素：span、em、code

两种CSS盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

替代（IE）盒模型

，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px). 可以使用border属性一次设置所有四个边框的宽度、颜色和样式。同时，利用该属性可以组合出不同的形状如三角形、圆形等。

行内格式化上下文（Inline formatting context）

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列一个行内框（inline box）被分割到多行中时， margins, borders, 以及 padding 的设定均不会在断裂处生效。

块级排版上下文（Block formatting context）

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

flex布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它被称为侧轴或交叉轴cross-direction。

flex-direction:row|row-reverse|column|column-reverse选择主轴方向。

flex-wrap：wrap实现换行。

align-items 属性可以使元素在交叉轴方向对齐。

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。

flex-grow：剩余部分按照比例分配

grid布局

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域），是一种二维布局模式。可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性 (columns) 和行属性 (rows)。

grid-column CSS 属性是 grid-column-start 和 grid-column-end 的简写属性，用于指定网格项目的大小和位置。

grid-row 属性是一种 grid-row-start 和 grid-row-end 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

浮动float

position如果是absolute，那么就找到上一个非static的元素定位。

fixed固定在视口的某一位置。

粘性定位sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor） 和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

总结

CSS的知识点比较多，而且还在不断的更新中。就这次的青训营课程来说，讲完这些内容还是需要多练习才能会用。其中上下文的排版，也就是三种大的排版模式还是需要好好练习才能更好理解的。浮动相关的知识在本课程中比重不大，因为有了flex和grid两种布局模式。另外，像动画、过渡等知识在本课程中也还没有涉及，因此对于CSS知识还需要更多的时间去学习。

CSS学习笔记 ｜ 青训营笔记