题目点评

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

元素默认的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. css modules

    https://juejin.im/post/5aa727fc518825364001159b http://www.ruanyifeng.com/blog/2016/06/css_modules.h ...

  2. P3648 [APIO2014]序列分割

    传送门 首先容易证明,得分和切的顺序没有关系 所以直接默认先切左边再切右边就好了 然后显然可以 $dp$ 一开始想的是设 $f[i][j]$ 表示切了 $i$ 次,此次把 $j$ 和 $j+1$ 分开 ...

  3. js高级程序设计 笔记 --- 错误处理、json和ajax

    1,错误处理 1,try-catch语句 try{可能导致错误的代码} catch(error) {在错误发生时该怎么处理} error.message是所有浏览器都支持的属性. finally语句是 ...

  4. 如何正确且高效地中文汉化Spyder 2 或 Spyder3（图文详解）（博主推荐）

    不多说,直接上干货!   汉化下载和教程页面 : https://github.com/kingmo888/Spyder_Simplified_Chinese 汉化文件最新版直接下载 : https: ...

  5. 卸载oracle10g

    网上搜集的.暂时先用着完全卸载Oracle方法:软件环境: 1.Windows XP + Oracle 10g 2.Oracle安装路径为:d:\Oracle 1.如果数据库配置了自动存储管理(ASM ...

  6. orcale 之 数据完整性约束

    数据完整性约束是对数据描述的某种约束的条件,在关系型数据库中一般有:完整性约束,实体完整性约束,参照完整性约束和用户自定义完整性约束. 实体完整性约束 在数据库中一张表一般对应一个现实生活中的实体,比 ...

  7. D3介绍

    D3介绍 D3是用来做web页面可视化的组件,其官方网址为http://d3js.org 安装 D3类库的文件只有一个d3.js.下载后直接在html的<script>标签中引用此js就可 ...

  8. JavaScript弹出层

    1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...

  9. js 屏蔽浏览器事件汇总

    //js 屏蔽 window.document.oncontextmenu = function () { event.returnValue = false; }//屏蔽鼠标右键 window.do ...

  10. 跨文件代码跳转插件：Ctags

    1.通过package control搜索Ctags 2.Enter安装,等待其安装完成 3.下载ctags可执行程序,链接:https://pan.baidu.com/s/1jIINAxo 密码:4 ...