这是我参与「第四届青训营 」笔记创作活动的的第3天
记录后半部分课堂笔记如下：
- 继承：某些属性会自动继承其父类元素的计算值，除非显示指定一个值
显式继承：把不可继承的属性变成可继承的属性
*{
Box-sizing:inherit
}
- 初始值
Css中，每个属性都有初始值:
background-color初始值为transport
3.布局
Width:
指定content box宽度
取值为长度，百分数，auto
Auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度
Length：
指定content box高度
取值为长度，百分数，auto
Auto由浏览器根据其他属性确定
百分数相对于容器的content box高度
容器具有指定的高度时，百分数才生效
Padding：
指定元素四个方向的内边距
百分数相当于容器的宽度
Border：
指定容器边框的样式，粗细和颜色
Margin（外边距）：
指定元素四个方向
取值为长度，百分数，auto
百分数相对于容器的宽度
Margin:auto水平居中
Margin collapse边距的合并（只发生在垂直方向）
box-sizing:border-box 使得块包含边框，在设置宽度时使用
overflow：
Visible:显示超出部分
Hidden：溢出的内容隐藏
Scroll: 隐藏增加滚动条
Auto：必要的时候出滚动条
块级：不和其他盒子并排摆放，适合所有盒模型属性
行级：和其他多级盒子一起放在一行或拆开成多行,盒模型中width，height不适用
块级元素:生成块级盒子
行级元素：生成行级元素，内容分散在多个行盒中
行级排版上下文：Inline Formatting Context
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
-
盒子在一行内水平摆放
-
一行放不下，换行显示
-
text-align决定一行内盒子水平对齐
-
vertical-align决定一个盒子在行内的垂直对齐
-
避开浮动元素
块级排版上下文： Block formatting context
Bfc内的排版规则：
-
盒子从上到下摆放
-
垂直margin合并
-
BFC内盒子的margin不会与外面的合并
-
BFC不会和浮动元素重叠
