table布局
- 父级容器—display: table
- 子级容器—display:table-cell
- (1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器；
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
.box{
width: 600px;
height: 100px;
display: table;
}
.left,.right{
display: table-cell;
}
.left{
background: yellowgreen;
}
.right{
background: skyblue;
}
</style>
(4) 把此元素放置在父元素的中部,即垂直居中—vertical-align:middle
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</body>
<style>
.box{
width: 600px;
height: 100px;
display: table;
}
.a,.b,.c,.d{
display: table-cell;
}
.a{
background: yellowgreen;
vertical-align: middle;
text-align: center;
}
.b{
background: skyblue;
vertical-align: middle;
text-align: center;
}
.c{
background: palevioletred;
vertical-align: middle;
text-align: center;
}
.d{
background: hotpink;
vertical-align: middle;
text-align: center;
}
</style>
(5) 等高对齐
下面的案例是不对右侧的box设置display:table-cell，只对左侧，所以就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。
1、table布局：
父级容器 display: table；
子级容器 display:table-cell；
(1)、空间平均划分：子级容器默认是自动平分宽度沾满父级容器；
(2)、设置其中一个table-cell为固定宽度：如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器；
(3)、设置每一个table-cell为固定宽度；
(4)、把此元素放置在父元素的中部,即垂直居中—>vertical-align:middle
(5)、等高对齐：
不对右侧的box设置display:table-cell，只对左侧，就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。
2、table布局的优缺点：
缺点
(1)、table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
(2)、table 会阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
(3)、灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
(4)、不利于搜索引擎抓取信息，直接影响到网站的排名。
优点
(1)、兼容性好。
(2)、容易上手。
扫一扫
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
