元素分類的類型：行內(nèi)元素，塊級元素，行內(nèi)塊元素

1。塊級元素：div，ul/ol，li，p，h

? ? -塊級元素可以直接設(shè)置寬高大小

? ? -塊級元素默認(rèn)從上到下排列，獨(dú)占一行

? ? -作用：通常是用來嵌套行內(nèi)元素或者元素類型的標(biāo)簽做頁面布局的（div可以嵌套一切）

2。行內(nèi)元素：span，a，i，em，b，string

? ? -行內(nèi)元素?zé)o法直接設(shè)置寬高大小

? ? -行內(nèi)元素默認(rèn)在一行逐個顯示

? ? -行內(nèi)元素的寬高由內(nèi)容決定

? ? -常見的BUG：行內(nèi)元素設(shè)置margin-top/bottom是沒有效果的

3。行內(nèi)塊元素：擁有塊和行內(nèi)的共同特點(diǎn)：input/img

? ? -輸入框可以設(shè)置寬高大小? -----塊級元素

? ? -輸入框在一行內(nèi)逐個顯示? -----行內(nèi)元素

? ? -所有行內(nèi)塊元素都是以基線對齊的? ?vertical-align：top/bottom/middle

元素類型的轉(zhuǎn)換

? ? 屬性：display

屬性值

block? ?塊? ? 將其他類型的元素類型轉(zhuǎn)化為塊級元素

inline? ? 行內(nèi)? ? 將其他類型的元素轉(zhuǎn)化為行內(nèi)元素

inline-block? ? 行內(nèi)塊元素? ? 將其他類型的元素轉(zhuǎn)化為行內(nèi)塊元素? ? （float也可以把元素轉(zhuǎn)化為行內(nèi)塊元素）

list-item? ? 列表項目? ? 將其他類型的元素轉(zhuǎn)化為列表屬性

none? ? 無，沒有? ? 刪除html結(jié)構(gòu)/隱藏

? ? list-style：none? ? 清除列表默認(rèn)樣式

? ? text-decoration? ? 清除默認(rèn)的下劃線樣式

? ? background：none? ? 清除背景

? ? border：none? ? 清除邊框

? ? clear：none? ? 清除浮動

拓展：block和none也也可以實(shí)現(xiàn)? ? block和none（顯示和隱藏）