日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSSdisplay（元素顯示類型）
display 屬性是 CSS 中最重要的屬性之一，主要用來控制元素的布局，通過 display 屬性您可以設(shè)置元素是否顯示以及如何顯示。

成都創(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ì)陽網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

根據(jù)元素類型的不同，每個(gè)元素都有一個(gè)默認(rèn)的 display 屬性值，例如

默認(rèn)的 display 屬性值為 block（塊級元素），而
默認(rèn)的 display 屬性值為 inline（行內(nèi)元素），您也可以手動(dòng)將元素的 display 屬性轉(zhuǎn)換為其它值。display 屬性的可選值如下：

值 描述
none 隱藏元素
block 將元素設(shè)置為塊級元素
inline 將元素設(shè)置為內(nèi)聯(lián)元素
list-item 將元素設(shè)置為列表項(xiàng)目
inline-block 將元素設(shè)置為行內(nèi)塊元素
table 將元素設(shè)置為塊元素級的表格（類似）
<sup id="wzfet"><button id="wzfet"><big id="wzfet"></big></button></sup>
          


          
 inline-table
 將元素設(shè)置為內(nèi)聯(lián)元素級的表格（類似）））））））
          


          
 table-caption
 將元素設(shè)置為表格的標(biāo)題（類似
          ）


          
 table-cell
 將元素設(shè)置為表格的單元格（類似和）

          

          
 table-row
 將元素設(shè)置為表格的行（類似
          

          

          
 table-row-group
 將元素設(shè)置為表格的內(nèi)容部分（類似 
          


          
 table-column
 將元素設(shè)置為表格的列（類似
          


          
 table-column-group
 將元素設(shè)置為表格中一個(gè)或多個(gè)列的分組（類似
          


          
 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 屬性的值

          


          

           伸縮盒子（彈性盒子）是 CSS3 中一種新的布局模式，引入伸縮盒子的目的是提供一種更加有效的方式來對頁面中的元素進(jìn)行排列、對齊和分配空間，當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)這種布局方式能夠確保元素?fù)碛星‘?dāng)尺寸和位置。
           下面通過幾個(gè)常用的屬性值來介紹以下 display 屬性的使用：
          
 
           display: none
          

           display 的屬性值 none 可以用來隱藏元素，與前面我們介紹《CSS visibility》時(shí)提到的
          
 visibility: hidden; 功能相似，不同的是
          
 display: none; 在隱藏元素的同時(shí)，它還會(huì)將元素所占的位置一并隱藏。
          
display: none; 通常會(huì)與 JavaScript 結(jié)合使用來隱藏或顯示某個(gè)元素，下面通過一個(gè)示例來演示一下：
          
 
          


    


    
           
          
    
    


          

           運(yùn)行上面的代碼，在頁面中點(diǎn)擊“顯示”或“隱藏”按鈕即可對頁面中指定的元素執(zhí)行顯示或隱藏操作，如下圖所示：
          
 
          
 
          圖：display: none; 屬性演示
          

           display: block
          

           display 屬性的屬性值 block 可以將元素強(qiáng)制轉(zhuǎn)換為塊級元素，示例代碼如下：
          
 
          


    


    這是一個(gè)鏈接


          

           運(yùn)行結(jié)果如下圖所示：
          
 
          
 
          圖：display: block; 屬性演示
          

           display: inline
          

           display 屬性的屬性值 inline 可以將元素強(qiáng)制轉(zhuǎn)換為行內(nèi)元素，讓元素?fù)碛行袃?nèi)元素的特性，例如可以與其他行內(nèi)元素共享一行等，示例代碼如下：
          
 
          


    


    
          
    
          
    
          display: inline;
          
    
          display: inline;
          


          

           運(yùn)行結(jié)果如下圖所示：
          
 
          
 
          圖：display: inline; 屬性演示
          

           display: inline-block
          

           display 屬性的屬性值 inline-block 可以將元素強(qiáng)制轉(zhuǎn)換為行內(nèi)塊元素，inline-block 既具有 block 能夠設(shè)置寬高的特性又具有 inline 不獨(dú)占一行的特性，示例代碼如下：
          
 
          


    


    
          
    
          
    
          display: inline-block;
          
    
          display: inline-block;
          


          

           運(yùn)行結(jié)果如下圖所示：
          
 
          
 
          圖：display: inline-block; 屬性演示
                                                          
          
                                                分享名稱：CSSdisplay（元素顯示類型）                                                
          
                                                文章地址：http://www.dlmjj.cn/article/cdhjsgi.html