html行內元素與塊級元素的區別總結

2021-08-30 08:29:08 字數 699 閱讀 7797

雖然自學了html很久了,但是對於小知識點記得總不是很清楚,最近被問到題目這個問題,當時我傻傻的讀題不清楚,看成行級元素和塊級元素,理解成,獨佔一行的元素和在行內一塊一塊的元素,結果錯的妥妥的,所以記下來這次錯誤。

行內元素。顧名思義指的是在行內的元素,預設不會單獨佔一行,會多個緊密排列,根據布局會按照情況進行調整。

其中常見的有(默寫啦):em、strong、input、img、span、a、br

塊級元素。級別很高,每個元素都是預設另起一行,

其中常見的有(默寫啦):div、p、from、table、tr、td、th、ol、ul、li、h1-h6、hr、address

二者區別:

型別行內元素

塊級元素

預設布局方向

水平布局

垂直布局

盒模型特性

無(image和input除外)

可以設定width、height、padding、margin、預設為父容器大小

內部元素

行內元素、文字

行內元素、文字、塊級布局

相互裝換

display:block

display:inline;

注意:img和input是比較特殊的行內元素可以設定width和height,因為他們是替換行內元素,可以理解成inline-block

html塊級元素與行內元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不...

html塊級元素與行內元素

塊級元素 1.獨佔一行 2.可以設定width height 3.預設width是父級元素100 4.塊級元素裡可以放塊級元素和行內元素 文字內標籤不能使用塊級元素 行內元素 1.一行可以顯示多個 2.width height設定無效 3.width預設內容的寬度 4.行內元素裡只能放文字或其他行內...

HTML中塊級元素 行內元素 行內塊元素的區別

塊級元素 1 多個元素存在一行 2 對寬高不生效 代表元素有 div p h1 h6 ul li dl dt dd ol table td th tr address caption field form hr legend noframes noscripts pre tbody tfoot th...