BOX類型會影響呈現和布局, 基本的BOX類型有兩種: 塊級(block-level)和行內級(inline-level). 事實上還有其他類型的BOX(如table, list-item等), 不過最終都會當作塊級BOX或者行內級BOX來處理.

塊極BOX的特征是從新的一行開始內容, 并且能包含其他塊級BOX和行內級BOX.

行內級BOX是那些不能形成新的內容塊的元素. 它不會從新行開始, 但能包含其他行內級BOX和數據.

HTML元素以及對應默認的BOX類型

BOX類型 對應的元素 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 其他元素默認值都是inline

?

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

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

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

????內容不會顯示?

????<p?style="display:block">此內容一樣不會顯示</p>?

</div>?

?

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

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

?

轉載于:https://blog.51cto.com/totop/1088172

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。