CSS的元素显示模式与转换

  • A+
所属分类:Web前端
摘要

<div>标签是最典型的块元素。另外常见的块元素有h1~h6、p、ul、ol、li等。


CSS的元素显示模式与转换

1. CSS的元素显示模式

1.1 块元素

<div>标签是最典型的块元素。另外常见的块元素有h1~h6、p、ul、ol、li等。

特点:

  1. 独占一行
  2. 高度、宽度、外边距和内边距都可以控制
  3. 宽度默认是父级宽度的100%
  4. 是一个容器及盒子,里面可以放行内元素或块级元素

注:文字类的元素内不能使用块级元素,例如p、h1~h6等。

1.2 行内元素(内联元素)

<span>标签是最典型的行内元素。另外常见的行内元素有a、strong、em、i、del、ins等。

特点:

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

注:

  • 链接里面不能再放链接
  • 特殊情况链接a里可以放块级元素,但是给a转换一下块级模式更安全

1.3 行内块元素

img、input、td标签同时具有块元素和行内元素的特点,称为行内块元素。

特点:

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

1.4 元素显示模式总结

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 父级元素的100% 可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 可以容纳文本或其它行内元素
行内块元素 一行可以放多个行内块元素 可以设置宽度高度 它本身内容的宽度

2. CSS的元素显示模式转换

行内元素要先转换模式,才能设置宽度、高度。

转换为 样式
块级元素 display: block;
行内元素 display: inline;
行内块元素 display: inline-block;