题目点评

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

元素默认的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. POJ1330 Nearest Common Ancestors (JAVA)

    经典LCA操作.. 贴AC代码 import java.lang.reflect.Array; import java.util.*; public class POJ1330 { // 并查集部分 ...

  2. CF1063F. String Journey（后缀数组＋线段树）

    题目链接 https://codeforces.com/contest/1063/problem/F 题解 虽然本题有时间复杂度较高但非常好写的做法...... 首先,若答案为 \(k\),则一定存在 ...

  3. STM32的GPIO工作原理 | 附电路图详细分析

    STM32的GPIO介绍 STM32引脚说明 GPIO是通用输入/输出端口的简称,是STM32可控制的引脚.GPIO的引脚与外部硬件设备连接,可实现与外部通讯.控制外部硬件或者采集外部硬件数据的功能. ...

  4. module.exports,exports,export和export default,import与require区别与联系

    还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...

  5. springboot整合jsp踩坑

    springboot以其高效的开发效率越来越多的用在中小项目的开发,并且在分布式开发中的使用也很广泛,springboot官方推荐的前端框架却是thymeleaf,并且默认不支持jsp,而大部分jav ...

  6. C++的引用本质上等同于C的指针

    本文给出一个很小的例子,通过反汇编后观察认为,C++的引用本质上等同于C的指针. o foo1.cpp v.s. foo2.cpp o 对foo1.cpp 和foo2.cpp进行编译 $ g++ -g ...

  7. CCF 201409-4 最优配餐

    问题描述 试题编号: 201409-4 试题名称: 最优配餐 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么 ...

  8. JQuery JSON Servlet

    <script type="text/javascript" src="js/jquery-1.10.2.js"></script> & ...

  9. Java绘制图片并进行合成

    以下代码可以生成六行两列的图片,代码改成了可以接受参数可循环的. package com.xgt.util; import com.sun.image.codec.jpeg.JPEGCodec; im ...

  10. 关于android studio2.3和android studio3.0

    今天又重新把androidstudio2.3重新装上了,实在是受不了android studio3.0了,太恶心人了 说一下为何改用android studio3.0: 优点: 1. 如果只是写纯应用 ...