CSS display 標簽 區塊 @ div,

CSS display 屬性

CSS display 屬性 : 設定網頁元素的顯示類型，HTML 元素本身的顯示類型就是預設的，而且每一種不同的元素都會有自己的預設值，常見的顯示類型有「區塊元素」與「內行元素」。
display:block display:none

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
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 屬性的值。

<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> <center><b> <span style="font-size: 25px ;color:blue">2 flex-direction:row</<span> </b></center> <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

<center><b> <span style="font-size: 25px ;color:blue"> 3 justify-content:flex-start / align-items:flex-start</<span> </b></center> <style> #flexA { display: flex;height:250px; justify-content: flex-start; align-items:flex-start ; background-color: DodgerBlue; } #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> <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; } #Ftxt , #Fttt {font-size:25px;color:red;font-weight : bold ;} </style> <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> <script> function Fflex(x) { //alert(x.value); document.getElementById("flexA").style.justifyContent = x.value; Ftxt.innerHTML = "M-div { display:flex ; justify-content: "+ x.value +"}" ; } function Falign(x) { //alert(x.value); document.getElementById("flexA").style.alignItems = x.value; Fttt.innerHTML = "M-div { display:flex ; align-items : "+ x.value +"}" ; } </script>

00

<center><b> <span style="font-size: 25px ;color:blue"> 4 display: table-cell</<span> </b></center> <div style="display:table;height:200px;width: 100%;"> <div style="text-align: center;vertical-align: top;display: table-cell;height: 100%;padding: 10px;background-color: #666;"> vertical-align:top</div> <div style="text-align: center;vertical-align: middle;display: table-cell;height: 100%;padding: 10px;background-color: #777;"> vertical-align:middle</div> <div style="text-align: center;vertical-align: bottom;display: table-cell;height: 100%;padding: 10px;background-color: #888;"> vertical-align:bottom</div> </div>

00

<center><b> <span style="font-size: 25px ;color:blue"> 5 display:inline / display:inline-block / display:block</<span> </b></center> <style> div.a , div.b , div.c { background-color: yellow;color:red; border: 1px solid blue; padding: 5px;font-size: 20px ; } div.a { display: inline;width:100px; height:100px; } div.b { display: inline-block;width:150px; height:150px; } div.c { display: block;width:100px; height:100px; } </style> <div class="a">display: inline</div> <div class="a">display: inline</div> <div class="b"> display: inline-block;</div> <div class="b"> display: inline-block;</div> <div class="c">display: block;</div> <div class="c">display: block;</div> </div>

00

#CSS display #CSS 標簽 區塊 #html標簽 區塊 #CSS div #html div