概念

指元素标签以什么方式显示（div独占一行等）

分类

• 块元素
• 内联元素
• 内联块元素

块级元素

一个元素单独占据一行

常见块级元素

div ul ol li h1-h6(标题标签) p(段落标签) table(表格) rowspan(占几行) colspan(占几列)

特点：

1. 独占一行
2. 宽度、高度、外边距和内边距都可以控制
3. 宽度默认是容器(父级宽度)的100%
4. 高度具有子集属性
5. 是一个容器盒子，内部还可以存放行内或块级元素
6. p中不能放任何块元素

注意

1. 文本类的元素内部不能存放块级元素[Eg: p标签中不能放div等]

行内元素

一行内可以同时排列多个元素

常见行内元素

span a(超链接) img(图片标签) em b ins del input的属性 placeholder(占位符) value(值) type(类型) name(给服务器用的 名字) button

特点：

1. 相邻的行内元素在一行上可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度为自身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意

1. 链接中不能再放链接
2. a标签中还可以存放块级元素
3. 内联元素设置width、height无效
4. 行内元素margin左右生效，上下不生效，padding水平生效

行内块元素

在行内元素中有部分标签同时具有行内元素和块元素的特点，所以称为行内块元素

常见行内块元素

img、input、td

特点

1. 和相邻行内块元素在一行上，但是它们之间会有空白间隙（元素本身自带的边距），一行可以显示多个(行内元素特点)
2. 默认宽度为自身内容宽度(行内元素)
3. 高度、宽度、外边距和内边距都可以控制 (块级元素特点)

显示模式汇总

元素模式	元素排列	设置样式	默认宽高	包含	margin	padding
块级元素	一行只能放一个块级元素	可以设置宽高	容器(父级)的100%	可以包含任何标签	四周都可以	四周都可以
行内元素	一行可以放多个行内元素	不可以直接设置宽高	自身内容的宽高	文本或其他行内元素	水平有效、上下方向无效	四周都有效
行内块元素	一行可以放多个行内块元素	可设置宽高	自身内容宽高		四周都可以	四周都可以

显示模式的转换

特殊情况下，需要一个模式的元素添加另一个元素的模式 【Eg：a标签增加触发范围】

语法

• 素转换为块级元素

css
  a {
      display: block;
  }

• 转换为内联元素

css
  div {
      display: inline;
  }

• 转换为内联块元素

css
  div {
      display: inline-block;
  }