新聞中心

成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的濟陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
根據(jù)元素類型的不同,每個元素都有一個默認的 display 屬性值,例如 伸縮盒子(彈性盒子)是 CSS3 中一種新的布局模式,引入伸縮盒子的目的是提供一種更加有效的方式來對頁面中的元素進行排列、對齊和分配空間,當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時這種布局方式能夠確保元素擁有恰當(dāng)尺寸和位置。 下面通過幾個常用的屬性值來介紹以下 display 屬性的使用: display 的屬性值 none 可以用來隱藏元素,與前面我們介紹《CSS visibility》時提到的 運行上面的代碼,在頁面中點擊“顯示”或“隱藏”按鈕即可對頁面中指定的元素執(zhí)行顯示或隱藏操作,如下圖所示: display 屬性的屬性值 block 可以將元素強制轉(zhuǎn)換為塊級元素,示例代碼如下: 運行結(jié)果如下圖所示: display 屬性的屬性值 inline 可以將元素強制轉(zhuǎn)換為行內(nèi)元素,讓元素擁有行內(nèi)元素的特性,例如可以與其他行內(nèi)元素共享一行等,示例代碼如下: 運行結(jié)果如下圖所示: display 屬性的屬性值 inline-block 可以將元素強制轉(zhuǎn)換為行內(nèi)塊元素,inline-block 既具有 block 能夠設(shè)置寬高的特性又具有 inline 不獨占一行的特性,示例代碼如下: 運行結(jié)果如下圖所示:
默認的 display 屬性值為 inline(行內(nèi)元素),您也可以手動將元素的 display 屬性轉(zhuǎn)換為其它值。display 屬性的可選值如下:
值
描述
none
隱藏元素
block
將元素設(shè)置為塊級元素
inline
將元素設(shè)置為內(nèi)聯(lián)元素
list-item
將元素設(shè)置為列表項目
inline-block
將元素設(shè)置為行內(nèi)塊元素
table
將元素設(shè)置為塊元素級的表格(類似 )
inline-table
將元素設(shè)置為內(nèi)聯(lián)元素級的表格(類似 )
table-caption
將元素設(shè)置為表格的標題(類似
)
table-cell
將元素設(shè)置為表格的單元格(類似 和
)
table-row
將元素設(shè)置為表格的行(類似 )
table-row-group
將元素設(shè)置為表格的內(nèi)容部分(類似 )
table-column
將元素設(shè)置為表格的列(類似
)
table-column-group
將元素設(shè)置為表格中一個或多個列的分組(類似
)
table-header-group
將元素設(shè)置為表格的頭部(類似 )
table-footer-group
將元素設(shè)置為表格的腳(類似 )
box
CSS3 中新增的屬性值,表示將對象設(shè)置為彈性伸縮盒(伸縮盒的最老版本)
inline-box
CSS3 中新增的屬性值,表示將對象設(shè)置為內(nèi)聯(lián)元素級的彈性伸縮盒(伸縮盒的最老版本)
flexbox
CSS3 中新增的屬性值,表示將對象設(shè)置為彈性伸縮盒(伸縮盒的過渡版本)
inline-flexbox
CSS3 中新增的屬性值,表示將對象設(shè)置為內(nèi)聯(lián)元素級的彈性伸縮盒(伸縮盒的過渡版本)
flex
CSS3 中新增的屬性值,表示將對象設(shè)置為彈性伸縮盒(伸縮盒的最新版本)
inline-flex
CSS3 中新增的屬性值,表示將對象設(shè)置為內(nèi)聯(lián)元素級的彈性伸縮盒(伸縮盒的最新版本)
run-in
根據(jù)上下文來決定將元素設(shè)置為塊級元素或內(nèi)聯(lián)元素
inherit
從父元素繼承 display 屬性的值
display: none
visibility: hidden; 功能相似,不同的是
display: none; 在隱藏元素的同時,它還會將元素所占的位置一并隱藏。
display: none; 通常會與 JavaScript 結(jié)合使用來隱藏或顯示某個元素,下面通過一個示例來演示一下:
圖:display: none; 屬性演示 display: block
這是一個鏈接
圖:display: block; 屬性演示 display: inline
圖:display: inline; 屬性演示 display: inline-block
圖:display: inline-block; 屬性演示
網(wǎng)站欄目:CSSdisplay(元素顯示類型)
瀏覽地址:http://m.5511xx.com/article/cdhjsgi.html


咨詢
建站咨詢
