window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

display-table-table-cell :

display:block || display:none || display:inline || display:inline-block
display:list-item || display:inline-table || display:inherit
00
描述
none此元素不會被顯示。
block此元素將顯示為塊級元素,此元素前後會帶有換行符。
inline默認。此元素會被顯示為內聯元素,元素前後沒有換行符。
inline-block行內塊元素。(CSS2.1 新增的值)
list-item此元素會作為列表顯示。
inline-table此元素會作為內聯表格來顯示(類似 <table>),表格前後沒有換行符。
inherit規定應該從父元素繼承 display 屬性的值。
#html #script #display:none #display:block #display:inline #display:inline-block
#display:inline-table
#display:inherit
display:table-cell || display:table-row || display:table-cell
text-align:left/center/right || vertical-align:top/middle/bottom
00
描述
display:table 顯示 表格(類似 <table>)
display:table-row-group 行的分組 (類似 <tbody>)
display:table-header-group 表格頭組 (類似 <thead>)
display:table-footer-group 表格尾組(類似 <tfoot>)
display:table-row 表格換行(類似 <tr>)
display:table-column-group 列的分組 (類似 <colgroup>)
display:table-column 格列顯示(類似 <col>)
display:table-cell 表格單元格(類似 <td> 和 <th>)
display:table-caption 表格標題(類似 <caption>)
#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom
display:flex || flex-direction:row || flex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial
00
描述
flex-direction 改變主軸顯示方向,水平反轉、轉為垂直、垂直反轉等
flex-direction:row 主軸從左至右
flex-direction:row-reverse 主軸從右至左
flex-direction:column 主軸由上至下
flex-direction:column-reverse主軸由下至上
flex-direction: initial 最初的
#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom
display:flex || flex-direction:row || lex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial
00

沒有留言:

張貼留言