深刻理解display屬性

時間 2019-11-29

標籤深刻理解 display 屬性欄目 CSS 简体版

原文原文鏈接

前面的話

　　display屬性在網頁佈局中很是常見，但常常用到的僅僅是block、inline-block、inline和none等寥寥幾個屬性值，本文將詳細介紹display屬性的各個方面html

定義

　　display屬性用於規定元素生成的框類型，影響顯示方式canvas

　　初始值: inlineruby

　　應用於: 全部元素ide

　　繼承性: 無佈局

　　[注意]IE7-瀏覽器不支持table類屬性值及inheritui

分類

block

【特徵】spa

　　[1]不設置寬度時，寬度撐滿一行firefox

　　[2]獨佔一行code

　　[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>

【不支持的樣式】

　　[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+支持

<h3 style="display:run-in">run-in test</h3>
<p>paragraph</p>

　　若run-in框後面不是塊級框時，run-in框自己將成爲塊級框

<span style="display: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;}

　　表格類元素的display共有以上幾種，<thead><tbody><tfoot><tr><col><colgroup>由於沒法設置margin和padding用的較少，下面將着重介紹下<table>、<td>、<th>、<caption>這四個標籤對應的display屬性