概述
HTML中存在許多元素,如<h1>
,<p>
,<a>
,<block>
,<image>
,這些元素可分為三類(lèi),依次是塊級(jí)元素超棺,內(nèi)聯(lián)元素舍肠,塊級(jí)內(nèi)聯(lián)元素搀继。
每種元素都有著各自的特點(diǎn):
塊級(jí)元素特點(diǎn)
- 每個(gè)塊級(jí)元素都從新的一行開(kāi)始,并且其后的元素也另起一行翠语。(一個(gè)塊級(jí)元素獨(dú)占一行)
- 元素的高度(
height
)叽躯,寬度(width
),行高(line-height
)以及頂和底邊距(margin
,padding
)都可設(shè)置肌括。 - 元素寬度在不設(shè)置的情況下点骑,是它本身父容器的100%(和父元素的寬度一致)
常用的塊元素有:
<div>
,<p>
,<h1>
...<h6>
,<ul>
,<ol>
,<dl>
,<table>
,<address>
,<blockquote>
,<form>
設(shè)置display:block,可以將元素轉(zhuǎn)換塊級(jí)元素谍夭。
內(nèi)聯(lián)元素特點(diǎn)
- 和其它元素都在一行上黑滴;
- 元素的高度,寬度及頂部和底部邊距不可設(shè)置慧库;
- 元素的寬度就是他包含的文字和圖片的寬度跷跪,不可改變。
常用的內(nèi)聯(lián)元素有:
<a>
,<span>
齐板,<br>
,<strong>
,<em>
設(shè)置display:inline吵瞻;可以將塊級(jí)元素轉(zhuǎn)換為內(nèi)聯(lián)元素
內(nèi)聯(lián)塊級(jí)元素特點(diǎn)(同時(shí)具備內(nèi)聯(lián)元素葛菇、塊狀元素的特點(diǎn))
- 和其他元素都在一行上;
- 元素的高度橡羞、寬度眯停、行高及頂和底邊距都可設(shè)置。
常用的內(nèi)聯(lián)塊狀元素有:
<img>
,<input>
display:inline-block; float:left/right; position: absolute/fixed;可以將元素設(shè)置為內(nèi)聯(lián)塊級(jí)元素