html哪些標簽塊級元素和行內元素


一、塊級標簽 

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

HTML5:header、section、article、footer等

    • 塊級元素獨占一行,當沒有設置寬高時,它默認設置為100%(其寬度自動填滿其父元素寬度)
    • 塊級元素允許設置寬高,width、height、margin、padding、border都可控制
      注:塊級元素設置了width寬度屬性后仍然獨占一行
    • 塊級元素可以包行內元素、塊級元素

二、行內元素 

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、u

button(display:inline-block)

    • 行內元素不能獨占一行,與其他行內元素排成一行,其寬度隨元素的內容變化而變化
    • 行內元素不能設置width、height、margin、padding
    • 行內元素默認寬度為其content寬度
    • 行內元素只能包括文字或行內元素、行內塊元素,不能包括塊級元素
    • display:inline-block:行內塊元素與行內元素屬性基本相同即不能獨占一行,但是可以設置width及height
    • 行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果

有一些特別的行內元素可設置寬高
替換元素:< img>、< input>、< textarea>、< select>、< object>

這些元素與其他行內元素不同的是,它有內在尺寸。因為它像是一個框,比如img元素,它能顯示出圖片是由於src的值,在審查元素時就不能直接看到圖片,而input是輸入框或是復選框也是因為其type的不同。

這種需要通過屬性值顯示的元素,其本身是一個空元素,像一個空的框架

 

將行內元素分行顯示或將塊級元素同行顯示

display:block -- 顯示為塊級元素(塊級元素默認樣式)

display:inline -- 顯示為行內元素(行內元素默認樣式)

display:inline-block -- 顯示為行內塊元素,表現為同行顯示並可修改寬高內外邊距等屬性(行內塊元素默認屬性)

常將<ul>元素加上display:inline-block樣式,原本垂直的列表就可水平顯示

 

有些特殊的塊級元素不能包含塊級元素,只能包含行內元素:h1~h6、p、dt

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM