题目点评

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

元素默认的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. python库安装如：requests,selenium等

    安装方式: 1.pip安装: 如:pip install requests 2.wheel安装: 在PyPI上下载对应的wheel文件:如要下载requests的wheel文件,打开:http://p ...

  2. git 常用口令

    版本管理 svn git   cd d 切换目录 cd www cd git git clone 一个地址 git status 获取修改的内容 git add * 上传修改的内容 git commi ...

  3. JavaWeb学习笔记（十五）—— 使用JDBC进行批处理

    一.什么是批处理 批处理就是一批一批的处理,而不是一个一个的处理! 当你有10条SQL语句要执行时,一次向服务器发送一条SQL语句,这么做效率上很差!处理的方案是使用批处理,即一次向服务器发送多条SQ ...

  4. HihoCoder - 1513 bitset处理五维偏序

    题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...

  5. axios简单介绍

    axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...

  6. SQL基础语法select|insert|update|delete(增删改查) 简单使用

    以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select  字段名  from  表名 此种查询只列出你所需要查询的字段, ...

  7. Linux - 组管理和权限管理

    l Linux组基本介绍 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 1) 所有者 2) 所在组 3) 其它组 4) 改变用户所在的 ...

  8. oracle 中关于null的操作

    空值 空值一般用NULL表示 一般表示未知的.不确定的值,也不是空格 一般运算符与其进行运算时,都会为空 空不与任何值相等 表示某个列为空用:IS NULL  不能使用COMM＝NULL这种形式 某个 ...

  9. c#,利用WPF的ScaleTransform和TranslateTransform实现图片的缩放效果

    一.缩放要求 1.缩放对象在可视区域内,已对象的中心点进行缩放. 2.缩放对象比可视区大,并且对象各边界都在可视区外围,那么已鼠标位置进行缩放. 3.缩放对象比可视区大,但是缩放后某一边界在可视区的对 ...

  10. CentOS6.5安装Mysql数据库

    一.卸载原有mysql    # rpm -e --nodeps mysql 二.安装mysql    # yum install mysql-server mysql mysql-devel 三.查 ...