display:table的几个妙用：垂直居中、浮动……
一、为什么不用table系表格元素？
目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？
1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
3、非表格内容用table来装，不符合标签语义化要求，不利于SEO
4、table的嵌套性太多，用DIV代码会比较简洁
……
二、但我想要一个表格的布局方式怎么办？
好处很多，但是有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决
display:table系列几乎是和table系的元素相对应的，请看下表：
| table | （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。 |
| inline-table | （类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。 |
| table-row-group | （类似 <tbody>）此元素会作为一个或多个行的分组来显示。 |
| table-header-group | （类似 <thead>）此元素会作为一个或多个行的分组来显示。 |
| table-footer-group | （类似 <tfoot>）此元素会作为一个或多个行的分组来显示。 |
| table-row | （类似 <tr>）此元素会作为一个表格行显示。 |
| table-column-group | （类似 <colgroup>）此元素会作为一个或多个列的分组来显示。 |
| table-column | （类似 <col>）此元素会作为一个单元格列显示。 |
| table-cell | （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。 |
| table-caption | （类似 <caption>）此元素会作为一个表格标题显示。 |
目前display:table的应用场景也是比较广泛的，Google地图在搜索路线时，左侧的路线详情就是用的display:table来实现的。
三、如何使用display:table？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>模拟表格</title>
</head>
<body> <style type="text/css" rel="stylesheet">
.table {
display: table;
border: 1px solid #cccccc;
margin: 5px;
/*display: table时padding会失效*/
}
.row {
display: table-row;
border: 1px solid #cccccc;
/*display: table-row时margin、padding同时失效*/
}
.cell {
display: table-cell;
border: 1px solid #cccccc;
padding: 5px;
/*display: table-cell时margin会失效*/
}
</style>
<div class="table">
<div class="row">
<div class="cell">张三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
<div class="row">
<div class="cell">张三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
</div>
</body>
</html>
由此，我们可以用display:table系列在做一些常用的布局设计
1、让块级标签实现行内效果，即浮动至同一横轴
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table实现浮动效果</title>
</head>
<body> <style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 1000px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
}
</style>
<div class="table">
<div class="row">
<div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</div>
</body>
</html>
2、实现垂直居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table实现垂直居中</title>
</head>
<body> <style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 500px;
height: 300px;
background-color: #ccc;
} .cell {
display: table-cell;
padding: 10px;
vertical-align: middle;/*该属性是定义行内元素垂直对齐的，只有行内元素会生效。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。*/
}
</style>
<div class="table">
<div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</body>
</html>
今天先这么多，以后发现有新的妙用继续补充
display:table的几个妙用：垂直居中、浮动……的更多相关文章
- display:table和display:table-cell的妙用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...
- 垂直居中display:table;
父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:
- Display:table;妙用，使得左右元素高度相同
我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
- display:table和display:table-cell结合使用
.GoodList{ display :table; height :54px; width :56px; line-height: 14px padding: 0 1 ...
- CSS：display:table
使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...
- display:table布局总结
1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- display:table
display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样.使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界.背景等样式,而不会产生因为使用了table那 ...
随机推荐
- 20155209 2016-2017-2 《Java程序设计》第1周学习总结
20155209 2016-2017-2 <Java程序设计>第1周学习总结 初读教材对每章节的提问 第一章:为什么java被广泛使用,java这样的平台相比其它语言有什么实质的好处? 第 ...
- 20155213 实验一《Java开发环境的熟悉》实验报告
20155213 实验一<Java开发环境的熟悉>实验报告 一. 实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 输入cd Code进入Code文件夹里 ...
- 20155236 2016-2017-2《Java程序设计》课程总结
20155236 2016-2017-2<Java程序设计>课程总结 作业链接汇总 预备作业1:对专业学习的展望,课程方面.师生关系的建议 预备作业2:在实践中学习,自己的相关经验以及C语 ...
- 20155337祁家伟 2016-2017-2 《Java程序设计》第2周学习总结
20155337 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 这周我学习了从JDK到IDE的学习内容,简单来说分为以下几个部分 使用命令行和IDE两种方式 ...
- js获取上月的最后一天
一.问题: 在最近的开发中遇到一个需求,需要初始化默认时间为上月的最后一天 而在日历中这个值在每个月都不是固定的 二.分析: 问题可以转化为,获取指定月份时间的月末最后一天,下边是代码,供大家参考 f ...
- 关于快速沃尔什变换（FWT）的一些个人理解
定义 FWT是一种快速完成集合卷积运算的算法. 它可以用于求解类似 $C[i]=\sum\limits_{j⊗k=i}A[j]*B[k]$ 的问题. 其中⊗代表位运算中的|,&,^的其中一种. ...
- RHCSA-day4
硬盘分区 1.硬盘的物理组成 硬盘实际上是由很多的盘片.磁臂.磁头与主轴马达所组成的. 那么实际的数据当然是写在具有磁性物质的盘片上了.数据的读写主要是通过在磁臂上的磁头来完成的.实际运转时,主轴马达 ...
- Drupal8 使用模块的配置文件
D8中移除了variable表及相关方法 (variable_get(),variable_set()等) .用config表取代了. 新的方法该如何使用? 以D8的Youtube模块为例 配置文件要 ...
- 解决老项目中 Timer运行一段时间后失效的问题
那是因为Timer中的代码出现了异常未被捕获,所以线程被挂起 只需要加入 try catch即可 推荐使用 Quartz 2018-08-08 03:50:44 [ Timer-1:39366015 ...
- Entity Framework for Oracle 基本配置
1.需要安装ODAC 如果不安装ODAC,在数据源连接的配置中,看不到Oracle的选项 我下载安装的组件是32-bit Oracle Data Access Components (ODAC) w ...