• 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 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    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;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 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    1. .div-flex-box {  
    2.     display: flex;  
    3.     flex-flow: row; /*行式布局*/  
    4. }  
    5. .flex-1{  
    6.     flex:1;  /*占1份，共4份*/  
    7.     height: 60px;  
    8.     background-color: aquamarine;  
    9. }  
    10. .flex-2{  
    11.     flex:2; /*占2份，共4份*/  
    12.     height: 60px;  
    13.     background-color: chocolate;  
    14. }  
    15. .flex-3{  
    16.     flex:1; /*占1份，共4份*/  
    17.     height: 60px;  
    18.    background-color: darkcyan;  
    19. }  

    效果图



      
    --------------------------------------------------------------------------------------------------------------------
  • 相关阅读:
    华为实习日记——第二十三天
    华为实习日记——第二十二天
    华为实习日记——第二十一天
    华为实习日记——第二十天
    HDU 5102 The K-th Distance（模拟）
    HDU 4113 Construct the Great Wall（插头dp）
    UVALive 4849 String Phone（2-sat、01染色）
    HDU 4859 海岸线（最大流最小割）
    HDU 3879 Base Station（最大权闭合子图）
    POJ 3155 Hard Life（最大密度子图）
  • 原文地址：https://www.cnblogs.com/zxwy/p/6122329.html
Copyright © 2020-2023  润新知