理解css ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
css概述： 表示层叠样式表，又称串样式列表、级联样式表、串接样式表、阶层式样式表，定义如何渲染 HTML 标签，设计网页显示效果，包括设置字体和颜色、设置位置和大小和添加动画效果。 CSS 语法结构为：选择器{属性：值;属性：值;...} 例如：
h1 {
color: red;
}
注：上述例子中h1是选择器，color是属性，red是属性值。
CSS工作原理：
(1)当浏览器显示文档时，他必须将文档的内容与其样式信息结合，它分为两阶段处理文档，浏览器将HTML和CSS转换成dom dom n，在计算机中表示文档，他把文档内容和其样式结合在一起。 (2)浏览器显示dom的内容
css选择器： 包括：
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 标签指定式选择器
- 后代选择器
- 子代选择器
- 并集选择器
- 属性选择器
- 伪类选择器
CSS布局：
Flex布局： Flex 是 Flexible Box（弹性盒子）的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。例如：
div {
display: flex;
}
此外，行内元素也可以使用 Flex 布局。
容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
子元素属性
- flex
- align-self
(1)flex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式， 有以下四个值：
- row ：（默认）横向从左到右排列。
- row-reverse ：顾名思义，从右向左横向排列，反向。
- column ： 纵向从上往下排列。
- column-reverse ： 纵向从下往上排列。
(2)弹性盒子默认情况下所有子元素都是排在一行上的，但容器大小有限，很有可能出现子元素被截断的情况，这时候就需要换行，flex-wrap 就是用来操作子元素换行的属性。flex-wrap 有以下三个值：
- nowrap ：（默认） 不换行。
- wrap ：换行，第一行排满后自动换到第二行。
- wrap-reverse ：换行，与
wrap不同的是如果出现换行，换行后的元素在第一行上方。
(3)子元素在容器中默认是以左对齐的布局排列在主轴线上的，属性 justify-content 用来调整子元素在主轴线上的对齐方式，它有以下五个值：
- flex-start ：左对齐
- flex-end ：右对齐
- center ：居中
- space-between ：两端对齐，项目之间的间隔都相等。
- space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
(5)与主轴垂直的轴我们称它为交叉轴，属性 align-items 用于定义子元素在交叉轴上的排列方式，它有下列五个值：
- flex-start ：交叉轴的起点对齐。
- flex-end ：交叉轴的终点对齐。
- center ：交叉轴的中点对齐。
- baseline ：项目的第一行文字的基线对齐。
- stretch ：如果子元素未设置高度或设置为
auto，子元素将占满整个容器高度。
(6)align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。，align-content 有以下六个值：
- flex-start ：与交叉轴的起点对齐。
- flex-end ：与交叉轴的终点对齐。
- center ：与交叉轴的中点对齐。
- space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch：轴线占满整个交叉轴。
