CSS元素显示模式

Mr.ZhaoAbout 3 min

定义：元素显示模式就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

1. 元素显示模式的分类

1.1 块元素

<!-- 主体结构标签 -->
<html>、<body>
<!-- 排版标签 -->
<h1>~<h6>、<hr>、<p>、<pre>、<div>
<!-- 列表标签 -->
<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<!-- 表格相关标签 -->
<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
<!-- 表单相关标签 -->
<form>与<option>

块级元素的特点：

  1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的
  2. 默认宽度：撑满父元素
  3. 默认高度：由内容撑开
  4. 可以通过 CSS 设置宽高

注意：

  • 文字类的元素内不能放块级元素
  • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>
  • <h1>~<h6> 等都是文字类块级标签，里面也不能放其他块级元素

1.2 行内元素

<!-- 文本标签 -->
<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
<!-- 其它标签 -->
<a>与<label>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
  2. 默认宽度：由内容撑开
  3. 默认高度：由内容撑开
  4. 无法通过 CSS 设置宽高

注意：

  • 链接里面不能再放链接
  • 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换成块级模式最安全

1.3 行内块元素

<!-- 图片 -->
<img>
<!-- 单元格 -->
<td>、<th>
<!-- 表单控件 -->
<input>、<textarea>、<select>、<button>
<!-- 框架标签 -->
<iframe>

它们同时具有块元素和行内元素的特点

行内块元素的特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排 列
  2. 默认宽度：由内容撑开
  3. 默认高度：由内容撑开
  4. 可以通过 CSS 设置宽高

1.4 总结

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

2. 元素显示模式的转换

通过 CSS 中的 display 属性可以修改元素的默认显示模式

转换方式：

  • 转换为块元素：display: block;
  • 转换为行内元素：display: inline;
  • 转换为行内块：display: inline-block;
  • 隐藏：display: none;