这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天。
块级元素和行级元素的区别
- 块级元素：
- 一个元素单独占一行
- 使用所有盒模型的的属性
- 生成块级盒子
- 行级元素：
- 可以与其他行级盒子放在同一行，也可以拆分成多行放置
- 盒模型中的
width、height不能使用（此类元素盒子的宽度和高度是由其中的内容决定的） - 其中的内容分布在多个行盒（line box）中
- 生成行级盒子
此处元素的概念是html中的，盒子的概念是css中的
块级的盒子和行级的盒子可以互相转换，用到的是display属性。给任意一元素书写属性值为block（或者inline）可以指定元素是一个块级元素（或者行级元素）。
display属性
- 行内块级元素
- 是行级元素
- 可以设置宽高
- 作为整体不会被拆成多行
各种元素在排版时的规则
行级元素（
span）
块级元素（
div）
根元素即
html标签BFC内的排版规则:
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
常规流中一个盒子的子级元素要求都是行级或者都是块级。
子级元素既有行级元素（span）又有块级元素(div)时，有下图效果在对行级元素
span添加一个边框时，因为行级元素中的内容从左到右依次显示，又被一个块级元素div分隔成两行。观察可以发现span标签内的第一行内容只有上、左、下边框；第二行内容只有上、右、下边框。（因为行级元素是以行为单位排版的）
块级、行级只能实现一些简单的布局，因此css中还提出了更新的排版，这些内容将在下一篇青训营笔记中进行记录。
