【转】CSS：table-cell详解
table-cell这个家伙在国外的⽹站中偶有露头，天朝由于IE6、7这两个货泛滥成灾，难有发挥，那么，这个家伙到底能⼲些什么呢？先让我们来研究下table，那些年曾经使⽤的
table布局为何如此辉煌荡漾呢？她的特点有哪些呢？抛弃table的兼容性、seo、加载等与本⽂⽆关的内容不谈，只看属性，那么就两个特点：
1.同⾏等⾼。
2.宽度⾃动调节。
那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有⼀个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的
时候，如果她的⽗节点不是display：table-row，爷爷节点不是display:table，那么下⾯就是见证奇迹的时候，这个⼉⼦⽣出了他的爸爸和爷爷（浏览器会⾃动创建者两个匿名盒
对象）虽然你不到你的father 和 grandfather，但这确实发⽣了，这真的是不可思议的事情，哪⾥不可思议，没有掌声最不可思议。^_^
那么下⾯来看⼏种情况，帮助我们了解这个不可思议的事情。我先编写代码如下：
<style type="text/css">
div{padding:10px 0;}
.classtd,
td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;}
.classtd{display:table-cell; border-color:#cc0;}
</style>
<div class="classtd">tom</div>
<div class="classtd">jack</div>
<div>普通 div</div>
<div class="classtd">angel</div>
<div>======= 上⾯是div 下⾯是table ========</div>
<table cellpadding="0" cellspacing="0">
css布局左边固定右边自适应<tr>
<td class="dtc">tom</td>
<td class="dtc">jack</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>angel</td>
</tr>
</table>
然后，我预测浏览器显⽰如下：
好吧，我承认我先看了效果，然后就可以下结论了：tom 和 jack 搞基，⽣出了⽗亲和爷爷（浏览器会创建⼀个表格来包裹相邻的display:table-cell元素），表现和第⼀个表格相
同。angel⾃⼰⽣出了⽗亲和爷爷表现和第⼆个表格相同。
既然是这样，那么想了解table-cell，就是变相了解表格的td了。那就回到了前⾯所说的两个特点：同⾏等⾼，宽度⾃动调节。
既然是这样，那么我们就可以拿这个货来作等⾼布局：
<style type="text/css">
.classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}
.classtd{display:table-cell; border-color:#cc0;}
</style>
<div class="classtd">
<p>⼤⼈。<br />其实我觉得⼤家别问元芳，元芳不是神⼈，<br />也不会武功，也许还是个智障，<br />我就不信我在这⾥⿊元芳<br />他会突然飞檐⾛壁来到我⾝后<br />把我的头按在键盘上yu7jhklhgjkfgt;/.";. yujh bnujm798u7jrtb5 tq1qwsewr </p>
</div>
<div class="classtd"><p>我和左边等⾼</p></div>
把这货和vertical-align：middle搞在⼀起可以进⾏⼤⼩不固定元素的垂直居中布局（还有多⾏⽂本垂直居中）：
<style type="text/css">
.classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}
.classtd div{ display: inline-block; vertical-align: middle;}
</style>
<div class="classtd">
<div >div+css</div>
<div >javascript</div>
<div >HTML5</div>
<div >CSS3</div>
</div>
利⽤列宽度⾃动调节这个特点可以作左固定右⾃适应布局：
<style type="text/css">
.left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}
.classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}
</style>
<div class="left">我是左边栏⽬</div>
<div class="classtd">
我是⾃适应的右边
</div>
有童鞋可能会对这个布局中的width:3000px感到迷惑。那么下⾯就贴上这个布局的原理
display:table-cell 元素⽣成的匿名table默认table-layout:auto。宽度将基于单元格内容⾃动调整。所以设置width:3000px的⽤途是尽可能的宽的意思。这样就可以达到⾃适应的效果。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论