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

table布局

  1. 父级容器—display: table
  2. 子级容器—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.容易上手

# css
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign