css3新手入门(7)元素的块元素，行内元素，行内块元素显示区别

今天学习下html元素的显示模式，为了之后做页面布局做好铺垫，记住了这些元素的显示模式方式，可以少走很多弯路。

元素的显示模式

1，块元素

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

2. 默认宽度：撑满父元素。

3. 默认高度：由内容撑开。

4. 可以通过 CSS 设置宽高。

常见的块级元素有：

• <div>：最常用的块级容器。
• <p>：段落。
• <h1>到<h6>：标题。
• <ol>、<ul>：有序和无序列表。
• <li>：列表项。
• <header>、<footer>、<nav>、<section>、<article>、<aside>：HTML5新增的语义化标签，用于构建页面结构。
• <table>、<thead>、<tbody>、<tfoot>、<tr>：表格相关元素。

2，行内元素

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排

列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 无法通过 CSS 设置宽高。

常见的内联元素有：

• <span>：最常用的内联容器。
• <a>：超链接。
• <img>：图像。
• <strong>、<b>：加粗文本。
• <em>、<i>：斜体文本。
• <br>：换行。
• <label>：表单标签。

3，行内块元素

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排

列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 可以通过 CSS 设置宽高。

常见的行内块元素有：

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