CSS——display屬性
阿新 • • 發佈:2019-02-10
div,span
{
background-color: #00aaee;
border: 1px #666 solid;
}
div{display: inline;}
/*使塊級元素變為內聯元素 就不能設定寬高了,同時也沒有上下外邊距,但可以設定左右margin*/
span{display: block;}
/*使行內元素變成塊級元素*/
.yc{display: none;}
/*none為設定隱藏元素*/
/*如何顯現呢?可以這樣*/
a:hover span{display: inline;}
none
此元素不會被顯示。
block
此元素將顯示為塊級元素,此元素前後會帶有換行符。
inline
預設。此元素會被顯示為內聯元素,元素前後沒有換行符。
inline-block
行內塊元素。(CSS2.1 新增的值)
list-item
此元素會作為列表顯示。
run-in
此元素會根據上下文作為塊級元素或內聯元素顯示。
table
此元素會作為塊級表格來顯示(類似 <table>
),表格前後帶有換行符。
inline-table
此元素會作為內聯表格來顯示(類似 <table>
),表格前後沒有換行符。
table-row-group
此元素會作為一個或多個行的分組來顯示(類似 <tbody>
)。
table-header-group
此元素會作為一個或多個行的分組來顯示(類似 <thead>
)。
table-footer-group
此元素會作為一個或多個行的分組來顯示(類似 <tfoot>
)。
table-row
此元素會作為一個表格行顯示(類似 <tr>
)。
table-column-group
此元素會作為一個或多個列的分組來顯示(類似 <colgroup>
)。
table-column
此元素會作為一個單元格列顯示(類似 <col>
)
table-cell
此元素會作為一個表格單元格顯示(類似 <td>
和 <th>
)
table-caption
此元素會作為一個表格標題顯示(類似 <caption>
)
inherit
規定應該從父元素繼承 display 屬性的值。
flex
響應式佈局會用到