元素显示模式，是指元素以什么形式进行显示，比方 <div> 独占一行，而一行能够放多个<span>.

HTML 的标签有很多，依据元素显示模式，个别分为块元素和行内元素两种。

1、块元素

常见的块元素有：<h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>等，特点为：

  • 王道，独占一行
  • 高度、宽度、外边距及内边距能够管制
  • 宽度默认是父级宽度的 100%
  • 是一个容器及盒子，外面能够放行内元素或块元素

留神：文字类的元素内不能应用块级元素，比方 <p> 标签中不能放 <div>

2、行内元素

常见的行内元素有 &lta&gt、&ltstrong&gt、&ltb&gt、&ltem&gt、&lti&gt、<span> 等，特点为：

  • 相邻的行内元素在同一行上，一行能够显示多个
  • 高度、宽度间接设置是有效的
  • 默认宽度为元素自身内容的宽度
  • 行内元素外面只能蕴含文本或者其余行内元素

留神：<a> 标签外面不能再放 <a> 标签，非凡状况 <a> 外面能够放块级元素

3、行内块元素

在行内元素中有几个非凡的标签：<img/>、<input/>、<td>，它们同时具备块元素和行内元素的特点，有人称之为行内块元素，特点是：

  • 和相邻的行内元素在同一行上，然而它们之间会有空白缝隙，一行能够显示多个（行内元素特点）
  • 默认宽度就是它们自身内容的宽度（行内元素特点）
  • 高度、宽度、外边距及内边距能够管制（块元素特点）

4、元素显示模式转换

非凡状况下，咱们须要对元素模式进行转换

/*转换为块元素*/display: block;/*转换为行内元素*/display: inline;/*转换为行内块元素*/display: inline-block;