display屬性在網頁佈局中非常常見,但經常用到的僅僅是block、inline-block、inline和none等寥寥幾個屬性值,本文將詳細介紹display屬性的各個方面
定義
display屬性用於規定元素生成的框類型,影響顯示方式
值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit
初始值: inline
應用於: 所有元素
繼承性: 無
注意:IE7-瀏覽器不支持table類屬性值及inherit
分類
block
【特徵】
1、不設置寬度時,寬度爲父元素寬度
2、獨佔一行
3、支持寬高
【標籤】
<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
注意:menuitem標籤只有firefox支持
【不支持的樣式】
1、vertical-align
inline
【特徵】
1、內容撐開寬度
2、非獨佔一行
3、不支持寬高
4、代碼換行被解析成空格
【標籤】
<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
【不支持的樣式】
1、background-position
2、clear
3、clip
4、height | max-height | min-height
5、width | max-width | min-width
6、overflow
7、text-align
8、text-indent
9、text-overflow
inline-block
【特徵】
1、不設置寬度時,內容撐開寬度
2、非獨佔一行
3、支持寬高
4、代碼換行被解析成空格
【標籤】
<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>
要注意的是,這裏說的是inline-block元素是指它們具有inline-block特性,而不是指他們的默認值是display:inline-block
如果以默認值爲基準,只有表單類元素是純的inline-block元素,audio、canvas、iframe、img、keygen、object、video都應該算是inline元素
【不支持的樣式】
1、clear
【IE兼容】
IE7-瀏覽器不支持給塊級元素設置inline-block樣式,解決方法如下:首先將其變成行內元素,使用具有行內元素的特性,然後觸發haslayout,使其具有塊級元素的特性,如此就可以模擬出inline-block的效果
div{
display:inline-block;
*display: inline;
zoom: 1;
none
【特徵】
隱藏元素並脫離文檔流
【標籤】
<base><link><meta><title><datalist><dialog><param><script><source><style>
list-item
【特徵】
1、不設置寬度時,寬度撐滿一行
2、獨佔一行
3、支持寬高
run-in
run-in是一個有意思的塊/行內元素混合,可以使某些塊級元素成爲下一個元素的行內部分。如果一個元素生成run-in框,而且該框後面是一個塊級框,那麼該run-in元素將成爲塊級框開始處的一個行內框,run-in框格式化成另一個元素中的行內框,但它們仍從文檔中的父元素繼承屬性
注意:只有safari和IE8+支持
run-in test</h3>
<p>paragraph</p>
若run-in框後面不是塊級框時,run-in框本身將成爲塊級框
run-in test</span>
<span>paragraph</span>
表格類元素
table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}
專門建立的學習Q-q-u-n: 731771211,分享學習方法和需要注意的小細節,不停更新最新的教程和學習技巧
(從零基礎開始到前端項目實戰教程,學習工具,全棧開發學習路線以及規劃)
表格類元素的display共有以上幾種,<thead><tbody><tfoot><tr><col><colgroup>
因爲無法設置margin和padding用的較少,下面將着重介紹下<table>、<td>、<th>、<caption>
這四個標籤對應的display屬性
table
【特徵】
1、不設置寬度時,寬度由內容撐開
2、獨佔一行
3、支持寬高
4、默認具有表格特徵,可設置table-layout、border-collapse、border-spacing等表格專有屬性
注意:對於display爲table和inline-table,若處於分隔邊框模型即border-collapse:separate;,margin和padding都可設置;若處於合併邊框模型即border-collapse:collapse,只可設置margin
inline-table
【特徵】
1、不設置寬度時,寬度由內容撐開
2、非獨佔一行
3、支持寬高
4、默認具有表格特徵,可設置table-layout、border-collapse、border-spacing等表格專有屬性
table-cell
【特徵】
1、不設置寬度時,寬度由內容撐開
2、非獨佔一行
3、支持寬高
4、垂直對齊
5、同級等高
注意:display:table-cell的元素不可以設置margin,但可以設置padding
table-caption
【特徵】
1、不設置寬度時,寬度由內容撐開
2、獨佔一行
3、支持寬高
注意:display:table-caption的元素margin和padding都可設置
注意事項
【1】如果一個元素是絕對定位元素,float的值設置爲none,對於浮動元素或絕對定位元素,計算值由聲明值確定
【2】對於根元素,如果聲明爲值inline-table或table,都會得到計算值table,聲明爲none時則會得到同樣的計算值none,所有其他display值都計算爲block