这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天，今天深入学习了CSS盒模型——行级、块级。
CSS盒模型块级VS行级：
Block Level BOX:
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
- 生成块级盒子
- body,article,div,main,section,h1-6,p,ul,li等
- display:block
Inline Level Box:
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width,height不适用
- 生成行级盒子
- 内容分散在多个行盒（line box）中
- span,em,strong,cite,code
- display:inline
display属性：
block:块级盒子
inline:行级盒子
inline-block:本身是行级，可以放在行盒中：可以设置宽高；作为一个整体不会被拆成多行
none:排版时完全被忽略
常规流normal flow
根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文参与布局
行级排版上下文：
Inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则：
盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素*
<div>
This is a paragraph of text with long word Honorificabilitudinitatbus.Here is an image
<img src="https://assets.codepen.io/59477/cat.png" alt="cat">
And <em>Inline block</em>
</div>
<style>
div {
width:10em;
//overflow-wrap: break-word;
background:#411;
}
em {
display:inline-block;
width:3em;
background:#33c;
}
</style>
块级排版上下文：
Block Formatting Context(BFC)
某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display:flow-root;
BFC内的排版规则：
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
Flex Box是什么？
一种新的排版上下文
它可以控制子级盒子的
摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行
Flexibility:
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度
position属性：
static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对于static祖先元素定位
fixed 相对于视口绝对定位
position:relative
position:absolute
学习CSS的建议：
-
充分利用MDN和W3C CSS规范
-
保持好奇心，善用览器的开发工具
-
持续学习，CSS新特性还在不断出现
