css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

下面是所有值的用法描述。display本身意思是“显示、阵列”的意思值 描述

none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。

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>) inherit 规定应该从父元素继承 display 属性的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
.table{ 
  display:table; 
} 
.tr{ 
  display:table-row; 
  width:200px; 
  height:200px; 
} 
.td{ 
  display:table-cell; 
  width:100px; 
  height:100px; 
  background-color:green; 
  border:1px solid red; 
} 
tr{ 
  width:200px; 
  height:200px; 
} 
td{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  border:1px solid red; 
} 
</style> 
</head> 
<body> 
<div class="table"> 
  <div class="tr"> 
    <div class="td"></div> 
    <div class="td"></div> 
  </div> 
</div> 
<br/> 
<table cellpadding="0" cellspacing="0"> 
  <tr> 
    <td></td> 
    <td></td> 
  </tr> 
</table> 
</body> 
</html>

从以上代码的表现来看,为div添加了相关属性值之后,差不多完全具有了表格的相关特性,当然上面的演示并不能够完全说明表格所具有的相关特性,以上代码只是说明三个属性值的作用。到这里可能会有朋友提出这样的疑问:在众多的实际应用中并没有完整的定义类似表格这样的层次关系,而是往往只有display:table-cell,这是因为,如果一个对象具有display:table-cell,而它的父元素和祖父元素没有定义display:table-row和display:table-cell,那么就会匿名的创建这两个父元素,尽管外观没有任何变化。代码实例如下:

.parent{ 
  width:200px; 
  height:200px; 
  background-color:green; 
  display:table-cell; 
  vertical-align:middle; 
} 
.children{ 
  width:60px; 
  height:60px; 
  background-color:red; 
  font-size:12px; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
   <div class="children">蚂蚁部落</div> 
</div> 

以上代码中,父元素中具有display:table-cell,但是它并没有父元素或者祖父元素定义display:table-row和display:table-cell。这个时候就会匿名创建两个具有此属性的对象,当然外观是看不出来的。以上代码中之所以子元素可以垂直居中对齐,是因为td元素具有valign属性,而vertical-align:middle只会在具有valign属性的对象中生效,所以上面代码就成功实现了垂直居中效果。在兼容各个浏览器的位置高度div垂直居中效果中,middle对象中使用了display:table-cell,它的父对象parent中也显示声明了display:table-cell,否则会匿名创建两个具有此属性的对象,middle对象的尺寸就会根据内容自适应了,这样在标准浏览器中就不能达到垂直居中效果了。

既然是这样,那么我们就可以拿这个货来作等高布局

[html] view plain copy

  1. <style type="text/css">
  2.     .classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}  
  3.     .classtd{display:table-cell; border-color:#cc0;}  
  4. </style>
  5. <div class="classtd">
  6. <p>大人。<br />其实我觉得大家别问元芳,元芳不是神人,<br />也不会武功,也许还是个智障,<br />我就不信我在这里黑元芳<br />他会突然飞檐走壁来到我身后<br />把我的头按在键盘上yu7jhklhgjkfgt;/.";. yujh bnujm798u7jrtb5 tq1qwsewrt5  
  7. </p>
  8. </div>
  9. <div class="classtd"><p>我和左边等高</p></div>

把这货和vertical-align:middle搞在一起可以进行大小不固定元素的垂直居中布局(还有多行文本垂直居中):

[html] view plain copy

  1. <style type="text/css">
  2.     .classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}  
  3.     .classtd div{ display: inline-block; vertical-align: middle;}  
  4. </style>
  5. <div class="classtd">
  6. <div style="padding:40px 80px 10px 10px; background: #639146; color:#fff;">div+css</div>
  7. <div style="padding:60px 80px 10px 10px; background: #2B82EE; color:#fff;">javascript</div>
  8. <div style="padding:70px 80px 10px 10px; background: #F57900; color:#fff;">HTML5</div>
  9. <div style="padding:80px 80px 10px 10px; background: #BC1D49; color:#fff;">CSS3</div>
  10. </div>

利用列宽度自动调节这个特点可以作左固定右自适应布局

[html] view plain copy

  1. <style type="text/css">
  2.     .left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}  
  3.     .classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}  
  4. </style>
  5. <div class="left">我是左边栏目</div>
  6. <div class="classtd">
  7.     我是自适应的右边  
  8. </div>

有童鞋可能会对这个布局中的width:3000px感到迷惑。布局的原理

display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

2075
来自专栏Flutter入门到实战

10分钟学会ikvStockChart制作K线图(股票走势图)

OK,Show me your code!Go!Go!Go! 先来看一波效果图:

8832
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

2992
来自专栏闻道于事

JavaScript对象之document对象

DOM对象之document对象 DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM ...

3037
来自专栏calmound

JavaScript基础2---控制权DOM操作

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素,属性和文本的树结构(...

3464
来自专栏互联网软件技术

添加标签——给定标签选项

1304
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

4579
来自专栏HTML5学堂

详析获取标签

在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互...

3249
来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

2079
来自专栏向治洪

微信小程序基本组件概述

为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

21810

扫码关注云+社区

领取腾讯云代金券