成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

wangdai / 981人閱讀

摘要：與屬性的值不同，其不為被隱藏的對(duì)象保留其物理空間指定對(duì)象為內(nèi)聯(lián)元素。指定對(duì)象作為塊元素級(jí)的表格。類(lèi)同于標(biāo)簽指定對(duì)象作為表格行組。伸縮盒過(guò)渡版本將對(duì)象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯(cuò)誤及變更，僅供參考。

它的語(yǔ)法如下：

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

當(dāng)然默認(rèn)值是inline。

取值：

none：隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
inline：指定對(duì)象為內(nèi)聯(lián)元素。
block：指定對(duì)象為塊元素。
list-item：指定對(duì)象為列表項(xiàng)目。
inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）
table：指定對(duì)象作為塊元素級(jí)的表格。類(lèi)同于html標(biāo)簽

（CSS2）
inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類(lèi)同于html標(biāo)簽
（CSS2）
table-caption：指定對(duì)象作為表格標(biāo)題。類(lèi)同于html標(biāo)簽（CSS2）
table-row-group：指定對(duì)象作為表格行組。類(lèi)同于html標(biāo)簽（CSS2）
table-column：指定對(duì)象作為表格列。類(lèi)同于html標(biāo)簽（CSS2）
table-column-group：指定對(duì)象作為表格列組顯示。類(lèi)同于html標(biāo)簽（CSS2）
table-header-group：指定對(duì)象作為表格標(biāo)題組。類(lèi)同于html標(biāo)簽（CSS2）
table-footer-group：指定對(duì)象作為表格腳注組。類(lèi)同于html標(biāo)簽（CSS2）
run-in：根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）
box：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
flex：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

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

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

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

全兼容的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元素設(shè)置為inline-block，其它類(lèi)型元素均不可以

下面給個(gè)運(yùn)用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;
}

實(shí)現(xiàn)導(dǎo)航如圖：

導(dǎo)航效果地址：http://www.andthewinnerisnt.com/

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111141.html

相關(guān)文章

  • 圣杯布局中對(duì)left盒子設(shè)置負(fù)內(nèi)邊距-100%的一點(diǎn)解釋

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

    JellyBool 評(píng)論0 收藏0

  • 圣杯布局中對(duì)left盒子設(shè)置負(fù)內(nèi)邊距-100%的一點(diǎn)解釋

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

    LdhAndroid 評(píng)論0 收藏0

  • CSS Grid 讀書(shū)筆記

    摘要：和絕對(duì)定位和絕對(duì)定位如果父容器有定位標(biāo)識(shí)等，那么下面的子會(huì)根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒(méi)有定位標(biāo)識(shí)，那么應(yīng)用了會(huì)脫離布局，并且按照傳統(tǒng)的方式布局?；靖拍?MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

    liuhh 評(píng)論0 收藏0

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

    摘要：前端面試每日題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)讓努力成為一種習(xí)慣，讓奮斗成為一種享受相信堅(jiān)持的力量項(xiàng)目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識(shí)，目前正在折騰，打算打通算法與數(shù)據(jù)結(jié)構(gòu)的任督二脈。 《論語(yǔ)》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)！ 讓努力成為一種習(xí)慣，讓奮斗成為一種享受！相信 堅(jiān)持 的力量?。。?項(xiàng)目...

    Baoyuan 評(píng)論0 收藏0

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

    摘要：前端面試每日題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)讓努力成為一種習(xí)慣，讓奮斗成為一種享受相信堅(jiān)持的力量項(xiàng)目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識(shí)，目前正在折騰，打算打通算法與數(shù)據(jù)結(jié)構(gòu)的任督二脈。 《論語(yǔ)》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)！ 讓努力成為一種習(xí)慣，讓奮斗成為一種享受！相信 堅(jiān)持 的力量?。?！ 項(xiàng)目...

    馬永翠 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看

    <
    （CSS2）
    table-cell：指定對(duì)象作為表格單元格。類(lèi)同于html標(biāo)簽
    （CSS2）
    table-row：指定對(duì)象作為表格行。類(lèi)同于html標(biāo)簽