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