按照顯示元素分類: 行內元素(lnline-element):元素的高度,行高,頂底邊距由元素所包含的圖片或文字所決定,不可改變;其寬度為內容文字或圖片的寬度所決定,而其左右邊距可人為設置。 行內元素的水平方向的padding-left,padding-right,margin-left,margi ...
按照顯示元素分類:
- 行內元素(lnline-element):元素的高度,行高,頂底邊距由元素所包含的圖片或文字所決定,不可改變;其寬度為內容文字或圖片的寬度所決定,而其左右邊距可人為設置。 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。(水平方向有效,豎直方向無效)(<a>、<span>、<strong>)
- 塊級元素(block-element):總是獨占一行,元素占據的高度,頂底左右邊距可以人為設置;其寬度預設為所在容器的100%,可人為設置;(<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>)
- 空元素(void-element):即沒有內容的HTML元素,例如:br、meta、hr、link、input、img
按照元素是否可替換分類:
- 替換元素:瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容。
比如:<input type="text" />,這是一個文本輸入框,換一個其他的時候,瀏覽器顯示就不一樣
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素,這些元素都沒有實際的內容。
- 非替換元素: (X)HTML 的大多數元素是不可替換元素,他們將內容直接告訴瀏覽器,將其顯示出來。
比如<p>wanmei.com</p>
瀏覽器將把這段內容直接顯示出來。
- 備註:行內替換元素的屬性和行內塊元素一致,豎直方向也能產生效果,幾乎所有的可替換元素都是行內元素,例如<img>、<input>等等