块级元素与行内元素

一、任务目标

理解块级元素与行内元素的区别

掌握块级元素与行内元素的转换

二、任务背景

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

三、任务内容

1、块级元素

• 在浏览器显示时总是独占一行

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

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

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

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

• 设置display属性为display: block可将元素转换为块级元素

2、行内元素

• 不独占一行，默认不自动换行

• 宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响

• 一般只能包含内容和其他行内元素，不可包含块级元素

• 设置宽高无效，宽高默认为内容的宽高

• 常见行内元素：span、label、a、em、strong、img

• 设置display属性为display: inline可将元素转换为行内元素
  ps: img元素为可替换元素，宽高是由其加载的内容决定的，可以使用CSS覆盖其宽高等样式

3、行内块级元素

• 综合块级元素与行内元素的特性

• 不独占一行

• 元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响

• 宽高未设置时默认为内容宽高

• 常见行内块级元素：button、input、textarea、select

• 设置display属性为display: inline-block可将元素设置为行内块级元素