CSS（九）：CSS的元素显示模式
什么是元素显示模式
元素显示就是元素（标签）以什么方式进行显示。比如，<div>自己独占一行，一行可以放多个<span>。
作用：网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面。
元素显示模式的分类
HTML元素一般分为块元素和行内元素（内联元素）两种。
常见的块级元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块级元素。
常见的行内元素有<a>、<strong>、<b>、<em>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。
在行内元素中有几个特殊的标签 <img>、 <input>、 <td>，它们同时具有块级元素和行内元素的特点。可以称之为行内块元素。
三种元素模式的特点：
| 块级元素 | 行内元素 | 行内块元素 |
|---|---|---|
| 比较霸道，自己独占一行。 | 相邻行内元素在同一行上，一行可以显示多个。 | 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）。 |
| 高度、宽度、外边框以及内边距都可以控制。 | 高、宽直接设置无效。 | 高度、行高、外边框以及内边距都可以控制（块级元素特点）。 |
| 宽度默认是容器（父级）宽度的100%。 | 默认跨度就是它本身内容的宽度。 | 默认宽度就是它本身内容的宽度（行内元素特点）。 |
| 是一个容器或盒子，里面可以放行内或者块级元素。 | 行内元素只能容纳文本或其他行内元素。 |
块级元素和行内元素需要注意的地方：
| 块级元素 | 行内元素 |
|---|---|
| 文字类的元素内不能使用块级元素。 | 链接里面不能放链接。 |
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是<div>。 |
特殊情况<a>里面可以放块状元素，但是给<a>转换以下块级元素最好。 |
同理，<h1>~<h6>等文字类块级元素，里面也不能放其他块级元素。 |
元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性
- 转换为块级元素：
display:block; - 转换成行内元素：
display:inline; - 转换成行内块：
display:inline-block;
-
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素显示模式转换</title> <style> a { width: 150px; height: 50px; background-color: pink; /* 把行内元素 a 转换为 块级元素 */ display: block; } div { width: 300px; height: 100px; background-color: purple; /* 把 div 块级元素转换为行内元素 */ display: inline; } span { width: 300px; height: 30px; background-color: skyblue; display: inline-block; } </style> </head> <body> <a href="#">金老师</a> <a href="#">金老师</a> <div>我是块级元素</div> <div>我是块级元素</div> <span>行内元素转换为行内块元素</span> <span>行内元素转换为行内块元素</span> </body> </html>
