这是我参与「第五届青训营」笔记创作活动的第3天。在我看来，一个前端工作者学好CSS并不断精进，非常重要。今天的课程中有很多比较熟悉的地方，在笔记中我只记录下了自己不甚熟悉的点：CSS属性继承，和一直希望系统总结回顾的点：CSS布局系统。
一、本堂课重点内容：
CSS属性继承和初始值、CSS布局系统
二、详细知识点介绍：
CSS布局
常见的盒子模型、表格布局、弹性盒子FlexBox和Grid布局都是指常规流。
盒子模型
盒子模型可以说是在主流网页的主题布局弃用表格式布局后，最基本和核心的页面布局方式。熟悉盒模型的操作和布局，可以说是一切布局的基本功。
width
- 指定 content box 宽度
- 取值为长度、百分数（百分数相对于外层容器的 content box 宽度）、auto（auto 由浏览器根据其它属性确定）
height
- 指定content box 高度
- 取值为长度、百分数（百分数相对于外层容器的 content box 高度。外层容器有指定的高度时，百分数才生效）、auto（auto取值由内容计算得来）
padding、margin
- 指定元素四个方向的内、外边距。
- 取值为长度、百分数（无论是水平内、外边距还是垂直内、外边距，百分数都是相对于容器宽度）、auto（margin: auto水平居中）
- 设置属性值的方式有：单个值（四个方向）、两个值（上下 左右）、三个值（上、左右、下）、四个值（上、右、左、下）
border
指定容器的边框样式、粗细和颜色。常见的使用方式即：三种属性（border-width border-style border-color）和四个方向。
块级元素和行级元素
这里以老师的两张图简记如下：
display 属性在盒子模型中的作用：
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none 排版时完全被忽略
display: inline-block; 本身是行级元素，也就是说它本身是可以和其他的行级盒子放在同一行里面。而体现 block 的地方就是 它的内容不能像普通的 inline 元素那样可以被拆散成多行。
行级排版上下文
只包含行级盒子的容器会创建一个行级排版上下文 Inline Formatting Context (IFC)
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
一个长单词是原子的(类似 inline-block, 但不是)，默认不能被拆成两行，所以需要 overflow-wrap: break-word;
块级排版上下文
下列容器会创建一个块级排版上下文 Block Formatting Context (BFC)
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC 内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并——解决高度塌陷的本质
- BFC 不会和浮动元素重叠
弹性盒子模型 FlexBox
弹性盒子模型是一种新的排版上下文，它可以控制子级盒子的：摆放的流向（→ ← ↑ ↓）、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。
justify-content 控制弹性元素在主轴方向上的分布。
align-items 控制弹性元素在侧轴方向上的分布。这个是设置在外层容器上的，可以给其中每一个元素指定个性化的分布。
关于flex-grow、flex-shrink等参见相关文档。总体来说是对弹性元素进行多余尺寸的分配、尺寸不足时的缩水。
二维网格盒子模型 GridBox
浮动float
浮动一节没有太多值得注意的地方。这里我补充一个老师没有提及的点：由于元素开启浮动后会脱离文档流，可能会导致其他没有开启浮动的元素位置发生变化，因此可以使用 clear 属性来消除浮动元素对位置的影响。其原理是：设置清除浮动clear以后，浏览器会自动为元素加上一个外边距，以使其位置不受其他元素的影响。 下面举一个例子：
<head>
<style>
div{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
/*
由于box1的浮动，box3上升.
如果不希望某个元素因为其他元素浮动的影响而改变位置，
可以通过clear属性清除浮动元素对当前元素所产生的影响
clear
- 清除浮动元素对当前元素所产生的影响
- 可选值：
left 清除左侧元素对当前元素的影响
right 清除右侧元素对当前元素的影响
*/
clear: left;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
在box3不开启 clear: left 时的效果：
box3开启 clear: left 时的效果：
绝对定位
position属性
static 默认值，非定位元素 relative 相对自身原本位置偏移，不脱离文档流 absolute 绝对定位，相对非 static 祖先元素定位 fixed 相对于视口绝对定位
CSS中的属性继承和初始值
CSS中的继承分为显式继承和隐式继承。
隐式继承
如果是默认允许继承的属性，如果子元素没有对该属性设置新的值，那么就会从父元素中继承该属性和它在父元素中的值。
显式属性
如果不是默认允许继承的属性（比如高度宽度、box-sizing等），那么子元素不会继承父元素中的该属性。此时，如果我们希望子元素继承父元素，那么就可以写 该属性: inherit; 使得该属性和属性的值可以从父元素中继承。下面是一个经典的例子：
// 全局所有选择器的box-sizing都继承自父元素
*{
box-sizing: inherit;
}
// 再配合html根标签的box-sizing: border-box; 使得所有的标签都会有 box-sizing: border-box;
html{
box-sizing: border-box;
}
// 个性化设置某个容器，那么该容器和该容器的子元素都会是 box-sizing: border-box;（因为有通配选择器*的配合）
.some-widget{
box-sizing: border-box;
}
初始值
当一个属性是不可继承的，且没有在对应的选择器中设置属性值；或者说是可继承的，但是一层层向上都找不到可以继承的值时。这两种情况下，CSS属性会选择它自己的初始值。
CSS中，每一个属性都有一个初始值。比如：background-color 的初始值为 transparent，margin-left 的初始值为 0。可以使用 initial 关键字显式重置为初始值，如：background-color: initial。
三、实践练习例子：
关于浮动的clear例子在上面已经详细说明。这里分享一个常见的解决高度塌陷和清除浮动元素影响的终极解决方案，即 clearfix。源自尚硅谷的CSS课程，非常好用，在此感谢。
/* 下面的代码既可以解决外边距重叠
content: '';
display: table;
又可以解决高度塌陷
content :'';
clear: both;
*/
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
四、课后个人总结：
本章的知识点特点便是理解简单，熟练掌握很难，而且容易忘记。这也是CSS学习的特点和难点。
五、引用参考：
我参考和引用的外部博客/笔记/文章在对应的地方均已经标注，这里就不赘述了。
