題目點評
其實就是要你說清楚該屬性有哪些值,每個值都有什麼作用,這個題目可以答得很簡單,但要答全也並非是一件容易的事情。
元素默認的display值的情況如下(這個一般很少人注意這一點)
- block(塊級元素)
<div>、<p> <ul> <ol> <form> ……
- inline(內聯元素)
<span> <a> <img> <input> <select> <label> ……
- list-item(項目列表)
<li>
- none(不顯示)
<head>(頭部元素都是) <title> <br> <thead> <tbody> <tfoot>
常見的屬性值(屬性值太多,只要說常用的就好)
- none:元素隱藏
- block:塊級元素
- inline-block:內聯塊級元素
- list-item:列表項目
- 表格系列方面的顯示
- table
- table-row
- <div class="table">
- <h2 class="table-caption">花名冊:</h2>
- <div class="table-column-group">
- <div class="table-column"></div>
- <div class="table-column"></div>
- <div class="table-column"></div>
- </div>
- <div class="table-header-group">
- <ul class="table-row">
- <li class="table-cell">序號</li>
- <li class="table-cell">姓名</li>
- <li class="table-cell">年齡</li>
- </ul>
- </div>
- <div class="table-footer-group">
- <ul class="table-row">
- <li class="table-cell">footer</li>
- <li class="table-cell">footer</li>
- <li class="table-cell">footer</li>
- </ul>
- </div>
- <div class="table-row-group">
- <ul class="table-row">
- <li class="table-cell">1</li>
- <li class="table-cell">John</li>
- <li class="table-cell">19</li>
- </ul>
- <ul class="table-row">
- <li class="table-cell">2</li>
- <li class="table-cell">Mark</li>
- <li class="table-cell">21</li>
- </ul>
- <ul class="table-row">
- <li class="table-cell">3</li>
- <li class="table-cell">Kate</li>
- <li class="table-cell">26</li>
- </ul>
- </div>
- </div>
CSS代碼
- ul{margin:0;padding:0;list-style:none;}
- .table{display:table;border-collapse:collapse;border:1px solid #ccc;}
- .table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}
- .table-column-group{display:table-column-group;}
- .table-column{display:table-column;width:100px;}
- .table-row-group{display:table-row-group;}
- .table-row{display:table-row;}
- .table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}
- .table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}
- .table-header-group{display:table-header-group;background:#eee;font-weight:bold;}
- .table-footer-group{display:table-footer-group;}
效果圖
加分項
- 行級元素浮動之後,display爲block。
- flex(彈性盒子)
不過要結合相關的屬性一起,flex-flow和flex。在響應式開發中flex非常有用。
html代碼
- <div class="div-flex-box">
- <div class="flex-1" ></div>
- <div class="flex-2"></div>
- <div class="flex-3"></div>
- </div>
css代碼
- .div-flex-box {
- display: flex;
- flex-flow: row; /*行式佈局*/
- }
- .flex-1{
- flex:1; /*佔1份,共4份*/
- height: 60px;
- background-color: aquamarine;
- }
- .flex-2{
- flex:2; /*佔2份,共4份*/
- height: 60px;
- background-color: chocolate;
- }
- .flex-3{
- flex:1; /*佔1份,共4份*/
- height: 60px;
- background-color: darkcyan;
- }
效果圖