这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天，希望继续坚持。
CSS如何工作
CSS的继承性
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性，例如：div中包含两个p标签，一个span标签，当给div设置字体颜色为红色时，他的子标签会继承父标签的属性，因而也会显示红色。在CSS中text-，font-，line-，开头的属性都是可以继承的。要注意：与文字相关的为可继承，与模型相关的大都不可以继承。若想让不可继承的继承，可以使用显性继承（inherit），具体要怎么使用可自行上网理解。
布局及相关技术
由图片可以看出CSS布局大致是什么：就是定义网页各个元素的排列方式，把元素按正确的大小，摆放在正确的位置上。
布局的相关技术：常规流，浮动，绝对定位。（常规流中有行级，块级，表格布局，flexbox，grid布局）。
常规流
行级vs块级
将行级和块级放在一起来讲：行级和块级的区别是 宽度和高度有什么决定。块级的可以自行设置而行级的由内容决定。
由图片可以看到行级和块级其它的特征。还有一些标签分类。那常规流的盒子是怎么参加布局的呢？ 常规流的盒子在某种排版上下文中参与布局，不同的盒子有不同的排版上下文。行级盒子参加布局有行级排版上下文（IFC），IFC就是一个盒子里面只有行级盒子，div本身是块级元素，但是如果里面只有行级内容，则就是行级排版上下文。（图片无法分成两行，但可以用overflow-wrap:break-word实现换行。）IFC的排版规则：盒子在一行内水平摆放，一行放不下时换行显示，text-align决定一行内盒子的水平对齐，vertical-align决定一个盒子在行内的垂直对齐，避开浮动元素。
块级排版上下文（BFC）：创建BFC：根元素，浮动 绝对定位 inline-block，Flex子项和Grid子项，overflow值不是visible的块盒，diplay：flow-root。它的规则是：盒子从上到下摆放，垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠。
Flex Box
Flex Box单一的布局。Flex中涉及到主轴（元素的摆放方向，即流向）和侧轴（与主轴垂直），通过justify-content这个属性控制flex布局上下文里面元素之间的对齐关系下图是详细情况：
还有一个align-items下面是对它的图解：
还有flex-grow有剩余空间时的伸展能力，flex-shrink容器空间不足时收缩的能力，flex-basis没有伸展或收缩时的基础长度。
flex
-
一种新的排版上下文
-
它可以控制子级元素的
- 摆放流向（上下左右）
- 摆放顺序
- 盒子的宽高
- 水平和垂直方向的对齐
- 是否运行折行
-
通过display：flex；设置
在FlexBox中共分为主轴和侧轴两个方向，可以通过flex-direction设置默认排序顺序 属性：
- row 默认从主轴开始，且主轴从左往右排列
- row-reverse 默认从主轴开始，且主轴从右往左排列
- column 默认从侧轴开始，且侧轴由上至下排列
- column-reverse 默认从侧轴开始，且侧轴由下至上 排列
FlexBox中的其他属性
-
justify-content 设置内部元素在主轴上的水平排列方式
-
属性值：
- flex-start 从左开始
- flex-end 从右开始
- center 居中
- spacing-between 占满两边空间，元素之间均匀排列
- spacing-around 元素两边都有间距且相等
- spacing-evenly 均匀排列
-
-
align-items 设置内部元素在侧轴上的垂直排列方式
-
属性值：
- flex-start 从上开始
- flex-end 从下开始
- center 居中
- stretch 每列占满
- baseline 根据内容进行排列
-
-
align-self 内部元素设置自己垂直排列位置
-
属性值
- flex-start 从上开始
- flex-end 从下开始
-
-
order 设置权重，权重越高越靠后
-
flex-grow 有剩余空间的伸展能力
-
flex-shrink 容器空间不足的伸展能力
-
flex-basis 没有伸展或收缩时的基础长度
-
flex复合用法
Grid布局
Grid布局即网格布局，网格布局是最强大的CSS布局方案。网格布局和flex布局都可以指定容器内部多个项目的位置但有很大区别，flex布局是轴线布局只能指定项目针对轴线的位置，可以看作一维布局。网格布局则是将容器分为行和列产生单元格然后指定项目所在的单元格，可以看作二维布局。grid详解文章链接，该文章是CSDN中一位博主的文章，讲解很详细。
GridBox
grid-template-columns/rows
-
作用：为容器划分区域
-
属性值：
- 像素
- 百分比
- auto 剩余空间自适应
- fr 对剩余空间进行份数均分
-
使用方式：
设置每个元素所占区域
浮动
浮动可以使元素脱离文档流，按照指定的方向排列，直到遇到父元素的边界或另一个浮动元素停止。 浮动属性 float left左浮动 right右浮动 none不浮动（默认值）。浮动可以使块元素在一行排列。 浮动会脱离文档流，在使用时需要清除浮动
-
float
-
属性值
- left 从左至右浮动
- left 从右至左浮动
- both 清除浮动
-
清除浮动的其他方式
定位
position 绝对定位（absolute）是通过position属性来控制的（position属性不止控制absolute），position：absolute；的元素相对于最近的定位祖先元素进行定位，然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。父级有定位，则看父级，父级没有定位，则继续向上找父级，实在找不到的话，就浏览器对齐。
