首页 > 代码库 > Web前端面试指导(十五):CSS样式-display有哪些作用?

Web前端面试指导(十五):CSS样式-display有哪些作用?

题目点评

其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情。

元素默认的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+css制作表格

      html代码

[html] view plain copy 技术分享技术分享

  1. <div class="table">  

  2.     <h2 class="table-caption">花名册:</h2>  

  3.     <div class="table-column-group">  

  4.         <div class="table-column"></div>  

  5.         <div class="table-column"></div>  

  6.         <div class="table-column"></div>  

  7.     </div>  

  8.     <div class="table-header-group">  

  9.         <ul class="table-row">  

  10.             <li class="table-cell">序号</li>  

  11.             <li class="table-cell">姓名</li>  

  12.             <li class="table-cell">年龄</li>  

  13.         </ul>  

  14.     </div>  

  15.     <div class="table-footer-group">  

  16.         <ul class="table-row">  

  17.             <li class="table-cell">footer</li>  

  18.             <li class="table-cell">footer</li>  

  19.             <li class="table-cell">footer</li>  

  20.         </ul>  

  21.     </div>  

  22.     <div class="table-row-group">  

  23.         <ul class="table-row">  

  24.             <li class="table-cell">1</li>  

  25.             <li class="table-cell">John</li>  

  26.             <li class="table-cell">19</li>  

  27.         </ul>  

  28.         <ul class="table-row">  

  29.             <li class="table-cell">2</li>  

  30.             <li class="table-cell">Mark</li>  

  31.             <li class="table-cell">21</li>  

  32.         </ul>  

  33.         <ul class="table-row">  

  34.             <li class="table-cell">3</li>  

  35.             <li class="table-cell">Kate</li>  

  36.             <li class="table-cell">26</li>  

  37.         </ul>  

  38.     </div>  

  39. </div>  

CSS代码

[html] view plain copy 技术分享技术分享

  1. ul{margin:0;padding:0;list-style:none;}  

  2. .table{display:table;border-collapse:collapse;border:1px solid #ccc;}  

  3. .table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}  

  4. .table-column-group{display:table-column-group;}  

  5. .table-column{display:table-column;width:100px;}  

  6. .table-row-group{display:table-row-group;}  

  7. .table-row{display:table-row;}  

  8. .table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}  

  9. .table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}  

  10. .table-header-group{display:table-header-group;background:#eee;font-weight:bold;}  

  11. .table-footer-group{display:table-footer-group;}  


效果图

技术分享

加分项

  •  行级元素浮动之后,display为block。

  • flex(弹性盒子)
     不过要结合相关的属性一起,flex-flow和flex。在响应式开发中flex非常有用。

        行式布局 flex-flow: row;

html代码

[html] view plain copy 技术分享技术分享

  1. <div class="div-flex-box">  

  2.     <div class="flex-1" ></div>  

  3.     <div class="flex-2"></div>  

  4.     <div class="flex-3"></div>  

  5. </div>  


css代码

[css] view plain copy 技术分享技术分享

  1. .div-flex-box {  

  2.     display: flex;  

  3.     flex-flow: row; /*行式布局*/  

  4. }  

  5. .flex-1{  

  6.     flex:1;  /*占1份,共4份*/  

  7.     height60px;  

  8.     background-color: aquamarine;  

  9. }  

  10. .flex-2{  

  11.     flex:2/*占2份,共4份*/  

  12.     height60px;  

  13.     background-color: chocolate;  

  14. }  

  15. .flex-3{  

  16.     flex:1/*占1份,共4份*/  

  17.     height60px;  

  18.    background-color: darkcyan;  

  19. }  


效果图

技术分享



  

-------------------------------------------------------------------------------------------


Web前端面试指导(十五):CSS样式-display有哪些作用?