• 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. }  

    效果图



      
    --------------------------------------------------------------------------------------------------------------------
  • 相关阅读:
    上传文件
    vue 动态数据请求
    Layui——layerjs 用法汇总（持续更新）
    以插入排序为例子带你彻底理解算法中的时间复杂度和各种渐进符号
    flappy pig小游戏源码分析(4)——核心pig模块(未完待续)
    flappy pig小游戏源码分析(3)——解剖util
    flappy pig小游戏源码分析(2)——解剖option
    flappy pig小游戏源码分析(1)——主程序初探
    Express细节探究(1)——app.use(express.static)
    部分常用Express方法详解
  • 原文地址：https://www.cnblogs.com/zxwy/p/6122329.html
Copyright © 2020-2023  润新知