五种前端布局之table布局_小tenten_table布局

irpas 02-07 3485

五种前端基本布局---table布局、float布局、absolute布局、flexbox布局、grid布局 table布局table布局的优缺点缺点优点

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>

(2) 设置其中一个table-cell为固定宽度：如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器；

<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{ width: 100px; background: yellowgreen; } .right{ background: skyblue; } </style>

(3) 设置每一个table-cell为固定宽度；

(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就可以实现了。

<body> <div class="content"> <div class="img-box"> [图片上传失败...(image-5e66ac-1553415098492)] </div> <div class="text-box"> <span> 王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，>有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。 </span> </div> </div> </body> <style type="text/css"> *{ box-sizing:border-box; } .content{ display: table; border:1px solid #06c; padding:15px 15px; max-width: 1000px; margin:10px auto; min-width:320px; width:100%; } .img-box{ height:150px; width:100px; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color: #4679bd; } .text-box{ margin-left: 20px; border:1px solid #ddd; padding:10px; } </style>

table布局的优缺点缺点

1.table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。 2.table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。 3.灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。 4.不利于搜索引擎抓取信息，直接影响到网站的排名。

优点

1.兼容性好. 2.容易上手