BOX類型會(huì)影響呈現(xiàn)和布局, 基本的BOX類型有兩種: 塊級(jí)(block-level)和行內(nèi)級(jí)(inline-level). 事實(shí)上還有其他類型的BOX(如table, list-item等), 不過(guò)最終都會(huì)當(dāng)作塊級(jí)BOX或者行內(nèi)級(jí)BOX來(lái)處理.

塊極BOX的特征是從新的一行開(kāi)始內(nèi)容, 并且能包含其他塊級(jí)BOX和行內(nèi)級(jí)BOX.

行內(nèi)級(jí)BOX是那些不能形成新的內(nèi)容塊的元素. 它不會(huì)從新行開(kāi)始, 但能包含其他行內(nèi)級(jí)BOX和數(shù)據(jù).

HTML元素以及對(duì)應(yīng)默認(rèn)的BOX類型

BOX類型 對(duì)應(yīng)的元素 block html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre
下面是HTML5新增的元素:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section list-item li none head table table table-row tr table-header-group thead table-row-gruop tbody table-footer-group tfoot table-column col table-column-group colgroup table-cell td, th table-caption caption inline-block input, select inline 其他元素默認(rèn)值都是inline

?

使用CSS的display屬性可以定義BOX類型, 也可以改變一個(gè)元素的默認(rèn)BOX類型.

當(dāng)定義樣式屬性display:none時(shí), 這個(gè)BOX與其所包含的其他BOX會(huì)在瀏覽器上消失, 它并不是生成一個(gè)不可見(jiàn)的BOX, 而是根本不生成BOX(即該元素對(duì)布局沒(méi)有影響), 派生的元素也不生成任何BOX, 該行為不能由派生元素設(shè)置的diplay屬性覆蓋.
例如:

<div?style="display:none">?

????內(nèi)容不會(huì)顯示?

????<p?style="display:block">此內(nèi)容一樣不會(huì)顯示</p>?

</div>?

?

display屬性的屬性值及其功能描述

屬性值 功能描述 block 指定為塊級(jí)BOX compact 這個(gè)屬性定義的BOX類型要基于上下文環(huán)境來(lái)確定, 要么作為塊級(jí)BOX, 要么作為標(biāo)記型BOX none 隱藏BOX. 與visibility屬性的hidden值不同, 其不為被隱藏的BOX保留其物理空間 inline 指定為行內(nèi)級(jí)BOX inline-block 將BOX呈現(xiàn)為行內(nèi)級(jí)BOX, 但是BOX的內(nèi)容作為塊級(jí)BOX呈現(xiàn). 與旁邊的行內(nèi)級(jí)BOX會(huì)被呈現(xiàn)在同一行內(nèi) run-in 這個(gè)屬性定義的BOX類型要基于上下文環(huán)境來(lái)確定, 要么生成塊級(jí)BOX, 要么生成行內(nèi)級(jí)BOX marker 標(biāo)記型BOX, 指定的內(nèi)容在容器BOX之前或者之后, 一般作為標(biāo)記. 要使用此參數(shù), BOX必須和::after及::before偽元素一起使用. IE瀏覽器未支持 inline-table 將表格顯示為無(wú)前后換行的行內(nèi)級(jí)BOX或者行內(nèi)級(jí)容器. IE瀏覽器未支持 list-item 指定為列表項(xiàng)BOX, 并可以添加可選項(xiàng)目標(biāo)志 ruby ruby結(jié)構(gòu)型BOX ruby-base bugy基型BOX ruby-text ruby文本型BOX ruby-base-group bugy基容器型BOX, 包含多個(gè)ruby基 ruby-text-group bugy文本容器型BOX, 包含多個(gè)ruby文本 table 將BOX作為塊級(jí)元素的表格顯示. IE瀏覽器未支持 table-caption 將BOX作為表格標(biāo)題顯示. IE瀏覽器未支持 table-cell 將BOX作為表格單元格顯示. IE瀏覽器未支持 table-column 將BOX作為表格列顯示. IE瀏覽器未支持 table-column-group 將BOX作為表格列組顯示. IE瀏覽器未支持 table-header-group 將BOX作為表格標(biāo)題組顯示 table-footer-group 將BOX作為表格腳注組顯示 table-row 將BOX作為表格行顯示. IE瀏覽器未支持 table-row-group 將BOX作為表格行組顯示. IE瀏覽器未支持 <template> 自定義的模板, 由CSS3增強(qiáng)布局模塊定義

?

轉(zhuǎn)載于:https://blog.51cto.com/totop/1088172

總結(jié)

以上是生活随笔為你收集整理的CSS BOX类型和display属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。