五种前端布局之table布局

最新推荐文章于 2024-04-22 01:15:27 发布

小tenten

最新推荐文章于 2024-04-22 01:15:27 发布

阅读量2w

点赞数 23

分类专栏：前端页面布局文章标签： css

本文链接：https://blog.csdn.net/qq_39877681/article/details/109737777

版权

前端页面布局专栏收录该内容

5 篇文章 3 订阅

订阅专栏

五种前端基本布局---table布局、float布局、absolute布局、flexbox布局、grid布局

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.容易上手

小tenten

关注

23
点赞
踩
86

收藏

觉得还不错? 一键收藏
2
评论
五种前端布局之table布局

前端基本布局五种前端布局table布局float布局五种前端布局table布局、float布局、absolute布局、flexbox布局、grid布局table布局父级容器—display: table子级容器—display:table-cell(1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器；<body> <div class="box"> <div class="left"></div>
复制链接

扫一扫