这是我参与「第五届青训营 」伴学笔记创作活动的第2天
CSS中，块级元素与行级元素有一定的区别
块级不和其它盒子并列摆放，适用所有的盒模型属性。
生成块级盒子
常用的标签有<body>,<article>,<div>,<main>,<section>,<h1-h6>,<p>,<ul>
display:block
块级的排版上下文
某些容器会创建一个BFC
根元素
浮动，绝对定位，inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display：flow-root；
BFC内的排版规则是1.盒子从上到下摆放，2.垂直margin合并3.BFC内盒子的margin不会与外面的合并 4.BFC不会和浮动元素重叠
行级和其他行级盒子一起放在一行或拆开成多行，盒模型中的width，height不适用。
内容分散在多个行盒中
常用的标签有<span>,<em>,<strong>,<cite>,<code>
display：inline
display属性中
block是块级盒子
inline是行级盒子，inline-block本身是行级，可以放在行盒中；可以设置宽高，作为一个整体不会被拆散成多行
行级排版只包含行级盒子的容器会创建一个IFC
IFC排班规则是指
盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动(float)元素*
Flex Box是一种的排版上下文 他可以控制子集盒子的：1.摆放的流向，2.摆放顺序，3.盒子宽度和高度，4.水平和垂直方向的对齐，5.是否允许折行。
position属性默认值为static，还有relative是相对自身原本位置偏移，absolute是绝对定位，以及fixed是相对于视口的绝对定位。
grid area网格区域和grid line网格线可以很好的美化样式
flex-direction将元素按水平或垂直方式排列
align-items是垂直方向的对齐
display：grid是元素生成一个块级的Grid容器，且使用grid-template相关属性将容器划分为网格
