这是我参与「第四届青训营 」笔记创作活动的的第2天
可认为每个html标签都是一个方块，如同盒子一层层的包裹着。在谷歌浏览器网页中按F12，拖动滑块后会找到这样一张图，这就是盒模型。
块级元素
display：block
特点：不与其他盒子并列摆放，适用于所有盒模型
常用的标签有：body，article，div，section，h1-6，ul，li等
某些容器会创建一个BFC，如根元素，flex子项，grid子项等
块级排版BFC规则
-
盒子从上到下摆放
-
垂直margin 合并 BFC内盒子的 margin不会与外面的合并
-
BFC不会和浮动元素重叠
-
每个块级元素都是独自占一行；
-
高度，行高，外边距（margin）以及内边距（padding）都可以控制；
-
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
-
多个块状元素标签写在一起，默认排列方式为从上至下；
行级元素
display：inline
特点：和其他行级盒子一起放在一行或者拆开成多行，盒模型中的width以及height不适用
常用的标签有：span，em，cite，code，strong等
只包含行级盒子的容器会创建一个IFC
行级排版IFC规则
-
盒子在一行内水平摆放·一行放不下时，换行显示
-
text-align决定一行内盒子的水平对齐
-
vertical-align决定一个盒子在行内的垂直对齐
-
避开浮动(float)元素
-
不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
-
设置高宽无效，行高有效，等同于给父级元素设置行高；
-
元素的宽度就是它包含的文字或图片的宽度，不可改变；
-
行内元素中不能放块级元素，a 链接里面不能再放链接；
