html5行级标签,8、html5哪些标签时块级、行内、行内块?2021-01-30
一、塊級(jí)標(biāo)簽
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等
塊級(jí)元素獨(dú)占一行,當(dāng)沒有設(shè)置寬高時(shí),它默認(rèn)設(shè)置為100%(其寬度自動(dòng)填滿其父元素寬度)
塊級(jí)元素允許設(shè)置寬高,width、height、margin、padding、border都可控制
注:塊級(jí)元素設(shè)置了width寬度屬性后仍然獨(dú)占一行
塊級(jí)元素可以包行內(nèi)元素、塊級(jí)元素
二、行內(nèi)元素
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、u
button(display:inline-block)
行內(nèi)元素不能獨(dú)占一行,與其他行內(nèi)元素排成一行,其寬度隨元素的內(nèi)容變化而變化
行內(nèi)元素不能設(shè)置width、height、margin、padding
行內(nèi)元素默認(rèn)寬度為其content寬度
行內(nèi)元素只能包括文字或行內(nèi)元素、行內(nèi)塊元素,不能包括塊級(jí)元素
display:inline-block:行內(nèi)塊元素與行內(nèi)元素屬性基本相同即不能獨(dú)占一行,但是可以設(shè)置width及height
行內(nèi)元素的水平方向的padding-left和padding-right都會(huì)產(chǎn)生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會(huì)產(chǎn)生邊距效果
有一些特別的行內(nèi)元素可設(shè)置寬高(行內(nèi)塊元素:1行上可以顯示多個(gè)元素、默認(rèn)寬度就是本身的寬度、可以設(shè)置寬高)
替換元素:< img>、< input>、< textarea>、< select>、< object>
這些元素與其他行內(nèi)元素不同的是,它有內(nèi)在尺寸。因?yàn)樗袷且粋€(gè)框,比如img元素,它能顯示出圖片是由于src的值,在審查元素時(shí)就不能直接看到圖片,而input是輸入框或是復(fù)選框也是因?yàn)槠鋞ype的不同。
這種需要通過屬性值顯示的元素,其本身是一個(gè)空元素,像一個(gè)空的框架
將行內(nèi)元素分行顯示或?qū)K級(jí)元素同行顯示
display:block -- 顯示為塊級(jí)元素(塊級(jí)元素默認(rèn)樣式)
display:inline -- 顯示為行內(nèi)元素(行內(nèi)元素默認(rèn)樣式)
display:inline-block -- 顯示為行內(nèi)塊元素,表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性(行內(nèi)塊元素默認(rèn)屬性)
常將
- 元素加上display:inline-block樣式,原本垂直的列表就可水平顯示
有些特殊的塊級(jí)元素不能包含塊級(jí)元素,只能包含行內(nèi)元素:h1~h6、p、dt
與50位技術(shù)專家面對(duì)面20年技術(shù)見證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的html5行级标签,8、html5哪些标签时块级、行内、行内块?2021-01-30的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2021略阳天津高级中学高考成绩查询,2
- 下一篇: js 字符和html和数值拼接,js中s