笔记22....2021-09-04

C1任务-22：块级元素与行内元素

任务背景
HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。

任务目标
理解块级元素与行内元素的区别
掌握块级元素与行内元素的转换

任务训练
一、块级元素
1.在浏览器显示时总是独占一行

2.宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响

3.可以包含内容、行内元素和其他块级元素

4.宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度

5.常见块级元素：div、form、footer、h1-h6、ol、ul、p、video

6.设置display属性为【display:block】可将元素转换为块级元素

二、
行内元素
1.不独占一行
2.宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
3.一般只能包含内容和其他行内元素，不可包含块级元素
4.宽高未设置时默认为内容的宽高
5.常见行内元素：span、label、a、em、strong、img
6.设置display属性为【display:inline】可将元素转换为行内元素

三、
行内块级元素
1.综合块级元素与行内元素的特性
2.不独占一行
3.元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
4.宽高未设置时默认为内容宽高
5.常见行内块级元素：button、input、textarea、select
6.设置display属性为【display:inline-block】可将元素设置为行内块级元素

练习
现需要设置a的顶部外边距，请补齐代码片段

a元素为行内元素
行内元素设置水平方向的外边距可以起作用
设置垂直方向的外边距，外边距存在，但是不会对周围的元素产生影响，实际上是不起作用
要使行内元素垂直方向的外边距起作用，需要将行内元素设置为行内块级元素或块级元素
答：block或inline-block