国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS基礎篇--你知道的display的值有多少？用了多少？

wangdai / 970人閱讀

摘要：與屬性的值不同，其不為被隱藏的對象保留其物理空間指定對象為內聯元素。指定對象作為塊元素級的表格。類同于標簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更，僅供參考。

它的語法如下：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |run-in |box | inline-box | flexbox | inline-flexbox | flex | inline-flex

當然默認值是inline。

取值：

none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內聯元素。
block：指定對象為塊元素。
list-item：指定對象為列表項目。
inline-block：指定對象為內聯塊元素。（CSS2）
table：指定對象作為塊元素級的表格。類同于html標簽

（CSS2）
inline-table：指定對象作為內聯元素級的表格。類同于html標簽
（CSS2）
table-caption：指定對象作為表格標題。類同于html標簽（CSS2）
table-row-group：指定對象作為表格行組。類同于html標簽（CSS2）
table-column：指定對象作為表格列。類同于html標簽（CSS2）
table-column-group：指定對象作為表格列組顯示。類同于html標簽（CSS2）
table-header-group：指定對象作為表格標題組。類同于html標簽（CSS2）
table-footer-group：指定對象作為表格腳注組。類同于html標簽（CSS2）
run-in：根據上下文決定對象是內聯對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

CSS3新增屬性可能存在描述錯誤及變更，僅供參考。

說明：常用的display屬性值如下：none，block，inline-block，table，table-cell，table-row，box，flex

注：IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，所以非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，然后觸發hasLayout，以此來獲得和inline-block類似的效果；可以這樣：

全兼容的inline-block:

div { display: inline-block; *display: inline; *zoom: 1; }

兼容性如下：

Basic Support包含值：none | inline | block | list-item | inline-block
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group
IE6,7只支持inline元素設置為inline-block，其它類型元素均不可以

下面給個運用table的例子：

html代碼：

css代碼：

nav{
    display:table;
}
nav ul{
    display:table-row;
}
nav ul li{
    display:table-cell;
}
nav ul li:last-child{
    text-align:right;
}
nav ul li:first-child{
    text-align:left;
}

實現導航如圖：

導航效果地址：http://www.andthewinnerisnt.com/

相關文章：
《CSS筆記：css3中box-flex屬性的使用》
《CSS筆記：css3中的多列布局columns詳解》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111141.html

相關文章

  • 圣杯布局中對left盒子設置負內邊距-100%的一點解釋

    摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置存在疑惑，大致是不清楚為什么這樣設置就會使盒子爬升到盒子的左側，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學，文中如有謬誤，歡迎指出。 圣杯布局算是一個古老的話題了，關于其來源網上資料眾多，在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置 margin-left:...

    JellyBool 評論0 收藏0

  • 圣杯布局中對left盒子設置負內邊距-100%的一點解釋

    摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置存在疑惑，大致是不清楚為什么這樣設置就會使盒子爬升到盒子的左側，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學，文中如有謬誤，歡迎指出。 圣杯布局算是一個古老的話題了，關于其來源網上資料眾多，在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置 margin-left:...

    LdhAndroid 評論0 收藏0

  • CSS Grid 讀書筆記

    摘要：和絕對定位和絕對定位如果父容器有定位標識等，那么下面的子會根據原始它們應該布局的位置定位，反之如果父容器沒有定位標識，那么應用了會脫離布局，并且按照傳統的方式布局。基本概念 MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

    liuhh 評論0 收藏0

  • 前端面試每日3+1（周匯總2019.08.11）

    摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量！！！ 項目...

    Baoyuan 評論0 收藏0

  • 前端面試每日3+1（周匯總2019.08.11）

    摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量！！！ 項目...

    馬永翠 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
（CSS2）
table-cell：指定對象作為表格單元格。類同于html標簽
（CSS2）
table-row：指定對象作為表格行。類同于html標簽















           
               
                                           
                       
                 
            
                     
             
               
                      
               
              
              
              
               
              
           
           
        
       
    
    
     
    
    
    
       
       
      
  
    
    












    • <strike id="2csw0"><input id="2csw0"></input></strike>
      

<