这是我参与「第五届青训营 」笔记创作活动的第4天，今天也是加入青训营学习的第四天，前天学习的CSS内容量有点多所以分成了两篇文章来写，今天的课堂笔记还是CSS，内容讲的是CSS的继承，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没有伸展或收缩时的基础长度。

Grid布局

Grid布局即网格布局，网格布局是最强大的CSS布局方案。网格布局和flex布局都可以指定容器内部多个项目的位置但有很大区别，flex布局是轴线布局只能指定项目针对轴线的位置，可以看作一维布局。网格布局则是将容器分为行和列产生单元格然后指定项目所在的单元格，可以看作二维布局。grid详解文章链接，该文章是CSDN中一位博主的文章，讲解很详细。

浮动

浮动可以使元素脱离文档流，按照指定的方向排列，直到遇到父元素的边界或另一个浮动元素停止。 浮动属性 float left左浮动 right右浮动 none不浮动（默认值）。浮动可以使块元素在一行排列。

绝对定位

绝对定位（absolute）是通过position属性来控制的（position属性不止控制absolute），position：absolute；的元素相对于最近的定位祖先元素进行定位，然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。父级有定位，则看父级，父级没有定位，则继续向上找父级，实在找不到的话，就浏览器对齐。

小结：css的内容多且复杂，需要时间去沉淀，多看多练，总会有得到。谢谢大家。