1痢毒、塊級元素(block-level element):一個水平流上只能顯示一個塊級元素,多個塊級元素則換行顯示
也就是說塊級元素橫向默認充滿其父元素的內(nèi)容區(qū)域向挖,自帶換行特性蝌以,其左右兩邊沒有其他元素,即塊級元素默認是獨占一行的何之。
但是要注意的是:"塊級元素"和"display為block的元素"不是一個概念跟畅,例如<li>元素默認的display值為list-item,<table>默認的display值默認為table,但他們都是塊級元素
2、行內(nèi)元素:行內(nèi)元素不形成新內(nèi)容塊溶推,即在其左右可以有其他元素徊件。
3奸攻、 替換元素
替換元素就是瀏覽器根據(jù)元素的標簽和屬性,來決定元素的具體顯示內(nèi)容虱痕,在其顯示中生成了框睹耐。
HTML中的<img>、<input>部翘、<textarea>硝训、<select>、<object>都是替換元素新思。這些元素往往沒有實際的內(nèi)容窖梁,即是一個空元素。
Example:
- <img src=”path/to/picture.jpg”/>
瀏覽器根據(jù)<img>標簽的src屬性的值來讀取圖片信息并顯示出來夹囚,而如果查看HTML代碼纵刘,則看不到圖片的實際內(nèi)容。 - <input type="submit" name="submit" value="提交"/>
瀏覽器根據(jù)<input>標簽的type屬性來決定是顯示輸入框荸哟,還是按鈕假哎。
- 4、 不可替換元素
HTML的大多數(shù)元素是不可替換元素敲茄,即其內(nèi)容直接表現(xiàn)在瀏覽器位谋。
Example:
<p>段落的內(nèi)容</p>
<label>label的內(nèi)容</label>
- 5、 替換的行內(nèi)元素:具有“內(nèi)在尺寸”堰燎,尺寸是由自身決定的掏父,而不會受周圍環(huán)境的影響,如<img>和<input>等秆剪,但是如果同時定義<img>標簽的width屬性赊淑,和css的width屬性,根據(jù)層疊原理仅讽,css的屬性將優(yōu)先于<img>標簽的width屬性;替換的行內(nèi)元素的高度是有height屬性決定
- 6陶缺、非替換的行內(nèi)元素:(如 a,span等元素)的寬度是其內(nèi)容經(jīng)過瀏覽器解釋后實際的寬度,而不能通過設(shè)定width屬性為非替換的行內(nèi)元素設(shè)置寬度洁灵,非替換的行內(nèi)元素的高度是由框高度的行高決定的饱岸。