display-table-table-cell :

display:block || display:none || display:inline || display:inline-block
display:list-item || display:inline-table || display:inherit

<div id="Dis" style="width:100%; height:400px;border: 1px solid blue; " > <div id="box1">display:block</div> <div id="box2">display:block</div> <div id="box3">display:block</div> <div id="box4">display:block</div> </div> <label class="container">display:block <input type="radio" checked="checked" name="radio" value="block" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:none <input type="radio" name="radio" value="none" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:inline <input type="radio" name="radio" value="inline" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:inline-block <input type="radio" name="radio" value="inline-block" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:list-item <input type="radio" name="radio" value="list-item" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:inline-table <input type="radio" name="radio" value="inline-table" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <label class="container">display:inherit <input type="radio" name="radio" value="inherit" onclick="Fflex(this)"> <span class="checkmark"></span> </label> <script> function Fflex(x) { box1.style.display = x.value; box2.style.display = x.value; box3.style.display = x.value; box4.style.display = x.value; box1.innerHTML ="display:" + x.value; box2.innerHTML ="display:" + x.value; box3.innerHTML ="display:" + x.value; box4.innerHTML ="display:" + x.value; } </script> <style> #box1, #box2, #box3, #box4{background-color: yellow;color:red; border: 1px solid blue;width:130px; height:80px; padding: 5px;font-size: 20px ;display:block; } </style> <style> .container { position: relative; padding-left: 25px; cursor: pointer; font-size: 22px; } .container input { opacity: 0; cursor: pointer;} .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #C0C0C0; border-radius: 50%;} .container:hover input ~ .checkmark { background-color: #808080; } .container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white;} </style>

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

<div style="display:table;width: 100%;font-size: 20px;"> <div style="display:table-row;height: 200px;"> <div style="width:33%;border: 1px solid #f00;text-align:center;vertical-align:top;display:table-cell;">text-align:center;<br>vertical-align:top;</div> <div style="width:33%;border: 1px solid #f00;text-align: center;vertical-align: middle;display: table-cell;height: 100%;">text-align: center;<br>vertical-align: middle;</div> <div style="border: 1px solid #f00;text-align: center;vertical-align: bottom;display: table-cell;height: 100%;">text-align:center;<br>vertical-align: bottom;</div> </div> <div style="display: table-row;height: 200px;"> <div style="width:33%;border: 1px solid #f00;text-align:left;vertical-align:top;display:table-cell;">text-align:left;<br>vertical-align:top;</div> <div style="width:33%;border: 1px solid #f00;text-align: center;vertical-align: middle;display: table-cell;height: 100%;">text-align: center;<br>vertical-align: middle;</div> <div style="border: 1px solid #f00;text-align:right ;vertical-align: bottom;display: table-cell;height: 100%;">text-align:right ;<br>vertical-align: bottom;</div> </div>

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

<style> #Dis {width: 750px; height:300px; border: 1px solid #c3c3c3; display: flex;flex-direction: row;} #Dis div { width: 50px; height: 50px;} #Ftxt {color:red;font-weight:bold;font-size:30px;margin: -200px 0px 0px 120px } </style> <div id="Dis"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> </div> <style> .container { //display: block; position: relative; padding-left: 30px; margin: 0px 15px ; cursor: pointer; font-size: 20px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } .container:hover input ~ .checkmark { background-color: #2196F3; } .container input:checked~ .checkmark { background-color: red; } .checkmark:after { content: ""; /* 圓中心點 */ position: absolute; display: none; } .container input:checked ~ .checkmark:after{display: block;} /* 圓中心點 */ .container .checkmark:after { top: 9px; /* 圓中心點 */ left: 9px; width: 8px; height: 8px; border-radius:50%; background: white; } </style> <label class="container">row <input type="radio" name="radio" checked="checked" value="row" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">row-reverse <input type="radio" name="radio" value="row-reverse" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">column <input type="radio" name="radio" value="column" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">column-reverse <input type="radio" name="radio" value="column-reverse" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container" >initial <input type="radio" name="radio" value="initial" onclick="Fflex(this)"> <span class="checkmark"></span></label> <div id="Ftxt">M-div{display:flex;flex-direction:row}</div> <script> function Fflex(x) { //alert(x.value); document.getElementById("Dis").style.flexDirection = x.value; Ftxt.innerHTML = "M-div{display:flex ; flex-direction: "+ x.value +"}" ; } </script>

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

<center><b> <span style="font-size: 25px ;color:blue"> 3 justify-content:flex-start / align-items:flex-start</<span> </b></center> <style> #flexA {height:250px; background-color: DodgerBlue; display: flex; justify-content: flex-start ; align-items:flex-start ; } #flexA div { background-color:pink; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> <div id="flexA"> <div>div 1</div> <div>div 2</div> <div>div 3</div> </div> <!--------------------------------------------------> <div id="Ftxt">M-div { display:flex ; justify-content : flex-start}</div> <label class="container">flex-start <input type="radio" name="radio" checked="checked" value="flex-start" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">flex-end <input type="radio" name="radio" value="flex-end" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">center <input type="radio" name="radio" value="center" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container">space-between <input type="radio" name="radio" value="space-between" onclick="Fflex(this)"> <span class="checkmark"></span></label> | <label class="container" >space-around <input type="radio" name="radio" value="space-around" onclick="Fflex(this)"> <span class="checkmark"></span></label> <label class="container" >initial <input type="radio" name="radio" value="initial" onclick="Fflex(this)"> <span class="checkmark"></span></label><br><br><br> <!--------------------------------------------------> <div id="Fttt">M-div { display:flex ; align-items : flex-start}</div> <label class="container">flex-start <input type="radio" name="radiob" checked="checked" value="flex-start" onclick="Falign(this)"> <span class="checkmark"></span></label> | <label class="container">flex-end <input type="radio" name="radiob" value="flex-end" onclick="Falign(this)"> <span class="checkmark"></span></label> | <label class="container">center <input type="radio" name="radiob" value="center" onclick="Falign(this)"> <span class="checkmark"></span></label> | <label class="container">stretch <input type="radio" name="radiob" value="stretch" onclick="Falign(this)"> <span class="checkmark"></span></label> | <label class="container" >initial <input type="radio" name="radiob" value="initial" onclick="Falign(this)"> <span class="checkmark"></span></label> <br><br><br> <!--------------------------------------------------> <script> function Fflex(x) { //alert(x.value); flexA.style.justifyContent= x.value; Ftxt.innerHTML = "M-div { display:flex ; justify-content: "+ x.value +"}" ; } function Falign(x) { //alert(x.value); flexA.style.alignItems = x.value; Fttt.innerHTML = "M-div { display:flex ; align-items : "+ x.value +"}" ; } </script> <style> .container { //display: block;line-height: 30px; position: relative; padding-left: 30px; margin: 0px 15px ; cursor: pointer; font-size: 20px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } .container:hover input ~ .checkmark { background-color: #2196F3; } .container input:checked~ .checkmark { background-color: red; } .checkmark:after { content: ""; /* 圓中心點 */ position: absolute; display: none; } .container input:checked ~ .checkmark:after{display: block;} /* 圓中心點 */ .container .checkmark:after { top: 9px; /* 圓中心點 */ left: 9px; width: 8px; height: 8px; border-radius:50%; background: white; } #Ftxt , #Fttt {font-size:25px;color:red;font-weight : bold ;} </style>

00

Edit