HTML+CSS 元素的显示模式

深碍√TFBOYSˉ_ 2022-12-09 03:28 159阅读 0赞

### 什么是元素显示模式 ###

在了解元素显示模式前，我们先来举个不恰当的例子：比如在世界上的人有成万上亿，那么归根结底只有两种人就是男人和女人，偶尔还有可能有第三种人-人妖。无论是男人还是女人甚至人妖，虽然都是人但是不同的人也有着不同的特点或者说不同的分工。

其实在HTML中也跟我们人类相似，html中同样也有多种多样的元素标签，但归根结底可以分为两大类：块元素和行内元素。而不同的元素又有着不同的特点和作用，了解了它们的特点我们就可以很好的对网页进行布局。

谈到了网页的布局其实就涉及到了元素的显示模式。html中有那么多元素并且在一般情况下又分为了块元素和行内元素，而这些元素在网页中的显示方式就是元素的显示模式。比如div要自己独占一行，而span在同一行中就可以放置多个。

上面说HTML元素分为块元素和行内元素，那么哪些是块元素哪些是行内元素，它们又有什么特点呢，接下来我们逐一分析：

### 块元素（男人） ###

常用的块元素有<h1>~<h6>、<p>、<div>、<ol>、<ul>、<li>等，其中<div>是最典型的块元素

**块元素的特点：**

1.  比较霸道，独占一行
2.  可以设置宽度、高度、内边距和外边距
3.  宽度默认是容器（父级元素宽度）的100%
4.  是一个容器及盒子，里面可以放行内或块级元素

**注意点：**

*  文字类的元素内不同放块级元素，如<h>系列、<p>等
 *  <p>标签主要用于存放文字，因此里面不能放块级元素，尤其是div

### 行内元素（女人） ###

常见的行内元素又<a>、<i>、<strong>、<b>、<em>、<ins>、<del>、<s>、<u>、<span>等，其中<span>标签时最典型的行内元素，有的地方也称为内联元素。

**行内元素特点：**

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

**注意点：**

*  链接里不能再放链接<a>
 *  但是链接中可以放置块级元素，但是给<a>转换成块级模式会更安全（后面讲转换）

### 行内块元素（人妖） ###

本来在HTML元素中分为两大类行内和块级元素，但是在行内元素中有几个特殊的标签，<img>、<input>、<td>，它们同时具有块元素和行内元素的特点，我们称它们为行内块元素。

行内块元素特点：

1.  和相邻行内元素（行内块）在同一行上，但是它们之间会有间隙，一行可以显示多个（行内元素特点）
2.  默认宽度就是它本身内容的宽度（行内元素）
3.  宽度、高度、行高和边距可以设置（块级元素特点）

### 元素显示模式总结 ###

<table> 
 <thead> 
  <tr> 
   <th style="width:103px;">元素模式</th> 
   <th style="width:213px;">元素排列</th> 
   <th style="width:218px;">设置样式</th> 
   <th style="width:144px;">默认宽度</th> 
   <th style="width:177px;">包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:103px;">块级元素</td> 
   <td style="width:213px;">一行只能放一个块级元素</td> 
   <td style="width:218px;">可以设置宽度和高度</td> 
   <td style="width:144px;">容器宽度的100%</td> 
   <td style="width:177px;">容器类可以包含任何标签</td> 
  </tr> 
  <tr> 
   <td style="width:103px;">行内元素</td> 
   <td style="width:213px;">一行可以放多个行内元素</td> 
   <td style="width:218px;">不可以直接设置宽度高度（需转换）</td> 
   <td style="width:144px;">本身内容的宽度</td> 
   <td style="width:177px;">容纳文本或其它行内元素</td> 
  </tr> 
  <tr> 
   <td style="width:103px;">行内块元素</td> 
   <td style="width:213px;">一行可以放多个行内块元素</td> 
   <td style="width:218px;">可以设置宽高</td> 
   <td style="width:144px;">本身内容宽度</td> 
   <td style="width:177px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 元素显示模式转换 ###

特殊情况下，我们需要元素模式的转换，简单来说，一个模式的元素需要另外一种模式的特性，这时就需要元素转换。

比如想要设置行内元素a的宽度和高度，就需要将a转换为块元素，这样就可以设置宽和高了。

**display**：在css中用display就可以实现元素模式的互相转换，从而使元素的一种模式具有另一种模式的特点

*  block 转换为块元素
 *  inline 转换为行内元素
 *  inline-block 转换为行内块元素