table
布局 在我刚开始学习前端的时候(2015年),我看的很多教程都说让我避免使用 table
布局,有人还列出了 table
布局的 九宗罪 ,基本的观点就是 table
布局会有一堆 table
tbody
tr
td
这些乱七八糟的标签,另外也不符合语义。
但是, display: table-*
这个属性的出现以及普及,让 table
布局又重新换发了生机,这个属性 IE8+
的浏览器都支持。
下面我们来看一下强大的 table
布局的各种使用场景。
我们使用几行代码就可以轻松地实现垂直水平居中了,子元素可以自适应宽高。
/* 实现水平居中的核心代码 */.parent { text-align: center;}.child { display: inline-block;}/* 实现垂直居中的核心代码 */.parent { display: table-cell; vertical-align: middle;}
但是这样的话,会有一个很致命的缺点,就是 .parent
元素无法设置百分比的宽高,这样我们就没有办法让 .parent
撑满其父元素。
不过,我们可以这样修改以上代码。
<!-- parent 元素外面先加一层 wrap --><div class="wrap"> <div class="parent"> <div class="child"> <p>自适应宽高的垂直、水平居中</p> <p>支持 IE8+</p> </div> </div></div>
/* 给 wrap 设置 display: table; *//* 这样就可以给 wrap 设置百分比宽高了 */.wrap { display: table;}
这样就可以给 .wrap
设置百分比宽高了, .parent
会自动充满 .wrap
.child { display: table; margin: auto;}
.parent { display: table; table-layout: fixed;}.child { display: table-cell;}
main body
的时候,页脚固定在页面底部 main body
的时候,页脚跟在 main body
后面 /* 核心代码 */.parent { display: table; height: 100%; width: 100%;}.main { height: 100%;}.footer { display: table-row; height:1px;}
/* 核心代码 */.parent { display: table; table-layout: fixed;}.parent > div { display: table-cell;}.left,.right { width: 200px;}
/* 核心代码 */.parent { display: table;}.parent > div { display: table-cell;}.left { text-align: left;}.right { text-align: right;}
联系客服