在HTML和CSS中,元素根据其显示类型(display type)
被分为行内元素(inline elements)和块级元素(block-level elements)。以下是一些常见的行内和块级元素的列表:
行内元素(Inline Elements)
行内元素在页面上与其他内容同行显示,通常不会独占一行。
<span>
<a>
(当设置为display: inline;
或display: inline-block;
时)<img>
<br>
<i>
<b>
<u>
<small>
<sub>
<sup>
<label>
<input>
<textarea>
<button>
<select>
<option>
块级元素(Block-Level Elements)
块级元素在页面上通常独占一行,并且可以设置宽度和高度
。
<div>
<p>
<h1>
到<h6>
(标题元素)<blockquote>
<li>
<ul>
<ol>
<hr>
<pre>
<address>
<article>
<section>
<header>
<footer>
<table>
既可以是行内也可以是块级元素(根据上下文)
一些元素既可以表现为行内元素也可以表现为块级元素,这取决于它们的上下文或CSS样式。
<a>
(链接)可以是行内的,也可以是块级的,取决于display
属性的设置。<div>
默认是块级元素,但可以通过设置display: inline;
或display: inline-block;
来表现为行内元素。<span>
默认是行内元素,但可以通过设置display: block;
来表现为块级元素。
注意事项
行内元素不能包含块级元素,但块级元素可以包含行内元素
。display
属性可以覆盖元素的默认显示类型,允许你自定义元素的行为。- 一些元素,如
<input>
、<img>
和<br>
,虽然在大多数情况下表现为行内元素,但它们具有特殊的布局行为,可能不完全遵循行内元素的规则。
了解这些基本的行内和块级元素有助于你更好地控制页面布局和元素的显示方式。