题目点评

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

元素默认的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代码
  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代码
  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代码

  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代码
  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. }

效果图

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

Web前端面试指导(十五)：CSS样式-display有哪些作用？的更多相关文章

  1. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  2. Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  3. Web前端面试指导(十)：元素定位有哪些？

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  4. Web前端面试指导(十六)：为什么要初始化CSS样式？

    题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...

  5. Web前端面试指导(十九)：CSS样式-如何清除元素浮动？

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  6. Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  7. Web前端面试指导(十二)：::before 和:before有什么区别？

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...

  8. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  9. web前端（7）—— 了解CSS样式，引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

随机推荐

  1. 2016级算法第三次上机-D.双十一的抉择

    915 双十一的抉择 思路 中等题.简化题目:一共n个数,分成两组,使得两组的差最接近0,就是说要使两组数都尽可能的接近sum/2. 思路还是很混乱的,不知道如何下手,暴力也挺难的,还不能保证对.想一 ...

  2. 04day->python列表和元祖

    一.列表 1.索引.切片     索引:根据索引值获取,里表里的值     切片:和字符串相似 2.增     1)append(object),在列表的末端添加     2)insert(index ...

  3. NSInvocation 调用block clang代码转换c++

    NSInvocation 调用block cpp 转换 fatal error: 'UIKit/UIKit.h' file not found https://blog.csdn.net/yst199 ...

  4. Object类和包装类的一些方法

    一.instanceof关键字的使用: a instanceof A:判断对象a是否是类A的实例.如果是,返回true:如果不是,返回false. 使用场景:为了避免在向下转型时出现ClassCast ...

  5. next_permutation（全排列）

    废话不多说,直接上代码,谁测试,谁知道 C++: #include<bits/stdc++.h> using namespace std; typedef long long ll; in ...

  6. （转）Go语言核心36讲之Go语言入门基础知识

  7. $bzoj1019-SHOI2008$ 汉诺塔 $dp$

    题面描述 汉诺塔由三根柱子(分别用\(A\ B\ C\)表示)和\(n\)个大小互不相同的空心盘子组成.一开始\(n\)个盘子都摞在柱子\(A\)上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...

  8. 关于DES加密强制更新版(4.22)

    数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...

  9. Linux 远程登录ssh服务器

    1.安装ssh服务器 sudo apt-get install openssh-server 2.在另一端输入ssh  IP及密码(或ssh 用户名@IP)就可以远程登录到IP所在计算机

  10. init_config_file.lua

    --[[ 读取限流配置 --]] --获取共享内存 local limit_req_store = ngx.shared.limit_req_store --初始化拒绝 URI 列表 reject_u ...