好久都没有写博客了,似乎总是觉得少了些什么……
刚好最近在工作中遇到了一个新的东西display:table,这个也是css的布局的一种,而且又是display的,之前已经写过了display的flex,grid,现在又来一个table,是不是觉得有点多呢,哈哈,没关系,不怕多,就怕不够你用,希望你们之后在写网页的时候能够根据不同的结构选择最适合最方便最顺手的布局方式,不仅可以i提高效率还可以耍哈帅,是吧
一、display
说了那么多display的值了,那他的值到底有多少呢?
首先来看一下display的中文意思就是陈列,展示,在页面中元素是怎么排列的呢?以行内的方式(display:inline),以块的方式(display:block),以行内块的方式(display:inline-block),以不显示的方式(display:none),这些都是最最常用的,之后比这个复杂一点儿点儿的就是以弹性布局的方式(display:flex),以网格的方式(display:grid),以表格的方式(display:table),以行内表格的方式(display:inline-table),继承父元素的方式(display:inherit)
二、display:table
现在就是今天的重点display:table(相当于<table></table>),一起配合使用的还有
display: table-header-group;(相当于<thead></thead>)
display: table-row-group;(相当于<tbody></tbody>)
table-footer-group;(相当于<tfoot></tfoot>)
display: table-row;(相当于<tr></tr>)
display: table-cell;(相当于td)
来吧,先来看看是啥效果:
例子一:
html:
<div> <div>nav……</div> <div> extras…… extras…… extras…… <br /> extras…… extras…… extras…… </div> <div>content……</div> </div>