table：会作为块级表格来显示（类似 <table>）
table-row：浏览器会默认创建一个表格行（类似<tr>）
table-cell：作为一个表格单元格显示（类似 <td> 和 <th>）
使用场景
1. 如何使元素垂直居中（table-cell）
display: table-cell;
vertical-align: middle;
具体实现
<style>
.table1{
display: table-cell;
vertical-align: middle;
height: 200px;
width: 200px;
background-color: pink;
}
</style>
<div class="table1">
<div>aa</div>
<div>bb</div>
<div>cc</div>
</div>
结果：
2.实现两列布局
左边宽度固定，右边自适应
<style>
.main {
display: table;
background-color: greenyellow;
}
.left {
background-color: pink;
float: left;
width: 200px;
height:100px;
}
.right {
background-color: blue;
display: table-cell;
width: 100%;
vertical-align: top;
}
</style>
<div class="main">
<div class="left">aaa</div>
<div class="right">bbb</div>
</div>
结果：
3.实现一行平分
<style>
.main {
display: table;
background-color: greenyellow;
width: 100%;
}
.left {
background-color: pink;
display: table-cell;
width:50%;
}
.right {
background-color: blue;
display: table-cell;
width:50%;
}
</style>
<body>
<div class="main">
<div class="left">aaa</div>
<div class="right">bbb</div>
</div>
</body>
结果：
4. table 和 inline-block
<style>
.content {
display: table;
/*padding: 10px;*/
width: 400px;
height: 200px;
}
.left {
display: table-cell;
background-color: greenyellow;
}
.right {
display: table-cell;
background-color: red;
text-align: right;
}
.box{
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
}
</style>
<body>
<div class="content">
<div class="left">
<div class="box">A</div>
</div>
<div class="right">
<div class="box">B</div>
</div>
</div>
</body>
结果：
我们要<div class="box">B</div>"整个可以使用text-align: right属性，也就是整个B框要在红色背景的右边，需要先将他们设置inline-block属性
5.改变li标签
<style>
.content ul{
display: table;
}
.content ul li{
display: table-cell;
line-height: 200px;
width: 200px;
background-color:pink;
border: 1px solid blue;
text-align: center;
}
</style>
<body>
<div class="content">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
结果：
网友评论