题目点评

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

元素默认的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. Echo团队Alpha冲刺随笔 - 第七天

    项目冲刺情况 进展 服务器部署完成.小程序改了几个BUG,WEB端大部分完成,后端主体功能大致完成. 问题 交接的时候出现很多新问题 心得 软工实践真棒!yeah!!! 今日会议内容 黄少勇 今日进展 ...

  2. 阿里云服务主机部署Thinkphp系统错误解决方案

    最近在阿里云上购买了虚拟主机,于是有了把自己的网站挂在云上的冲动,那就行动呗.本来想的很简单,以为在修改数据库配置之后,将文件打包上传,然后就可以了,可在实际操作过程中,出现了很多问题,找了很多资料, ...

  3. JAVA泛型方法与类型限定

     泛型方法可以定义在普通类中,也可以定义在泛型类中 class ArrayAlg{ public static <T> T getMiddle(T...a){ return a[a.len ...

  4. 洛谷 P3227 [HNOI2013]切糕（最小割）

    题解 Dinic求最小割 题目其实就是求最小的代价使得每个纵轴被分成两部分 最小割!!! 我们把每个点抽象成一条边,一个纵轴就是一条\(S-T\)的路径 但是题目要求\(|f(x,y)-f(x',y' ...

  5. Shiro在SpringBoot中的使用

    Demo代码请参考:https://github.com/roostinghawk/ShiroDemo 以下为主要代码(经过验证,测试) 1. pom.xml:引用shiro <dependen ...

  6. linux下获取系统时间 和 时间偏移

    获取linux时间  并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]={"Sun","Mon",&q ...

  7. Java 的多态

    1    多态的概念 多态(?) 可以理解为多种状态/多种形态 同一事物,由于条件不同,产生的结果不同   程序中的多态 同一引用类型,使用不同的实例而执行结果不同的. 同:同一个类型,一般指父类. ...

  8. 差分ADC到单端ADC

    单片机可以处理单端ADC(不在电压范围内要进行分压),也可以处理差分ADC(但需要双路输入).差分信号在传输过程中抗共模干扰能力很强,所以传输中都用差分传输,到ADC时可以差分也可以单端(需要放大器处 ...

  9. 同步FIFO学习

    在网上找的一个经典同步FIFO例子. 一.前言 FIFO (First-In-First-Out) 是一种先进先出的数据交互方式,在数字ASIC设计中常常被使用.FIFO按工作时钟域的不同又可以分为: ...

  10. JAVA学习4：用Maven创建Struts2项目

    采用struts版本:struts-2.3.8 一.创建一个web项目 参考前面文章,项目名:maven-struts-demo. 二.配置pom.xml文件添加struts2依赖   <pro ...