标签：块级 行内 转换 标签 元素 模式 display 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>
标签：块级,行内,转换,标签,元素,模式,display,CSS 来源： https://www.cnblogs.com/pure3417/p/16355124.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。