html左右两栏布局实现

左右两栏布局实现

前言： 两栏布局在html 十分常见而且实现非常简单，是一项需要熟练的技巧。
实现思路： 1. 两个块级元素在一行显示 2.一个元素宽度固定另一个元素宽度分配剩余空间

第一种 position:absolute + margin:auto 来实现

1. position:absolute 可以实现两个块级元素 一行显示 ｛注：float浮动也可以实现一行显示但是开发中通常不用float浮动布局而是position定位替换 因为定位优先级更高而且不用清除浮动，开发中float浮动其实只是用来实现图文环绕 ｝
2. 理解 margin:auto auto关键字就是分配剩余空间 比如: div 父盒子 宽度是1000px div自身宽度是500px 那么剩余空间就是500px ｛div块级元素本身独占一行所以才有剩余空间，内联元素不存在剩余空间｝
   margin:auto可以实现元素在父元素中水平居中 等同于 margin:0 auto； 等同于 margin：0px auto 0px auto； 其实 margin-left,margin-right平分剩余空间

<style>
.vessel{
  width:600px;
  height:400px;
  border:1px solid blue;
  margin:auto;
  /*子元素绝对定位 父元素需要设置为相对定位 方便位置定位*/
  position:relative;
  /*小知识点：父元素设置z-index 子元素无论怎样设置z-index 都会在父元素之上，
  想要子元素在父元素之下则父元素不能设置z-index*/
  z-index:0;
}
.left_box{
  width:60px;
  height:100%;
  background-color: #B4F8C8;
  position:absolute;
  top:0;
  left:0;
}
.right_box{
 /* 在开发中子元素都是计算像素确定十分不可取不方便维护 */
   width:calc(100% - 60px); 
  width:inher
  height:100%;
  /* margin-left 与 left_box width 一致 */
  margin:0px auto 0px 60px;
  background-color: #9B59B6;
}
</style>
 <section class="vessel">
    <div class="left_box"></div>
    <div class="right_box"></div>
   </section>

第二种 display:flex 来实现

1. 弹性布局 **flex-flow:row nowrap ** 实现一行显示
2. flex-grow 实现一个元素占据剩余空间

<style>
.flex_row_line{
  width:600px;
  height:400px;
  border:1px solid blue;
  margin:20px auto;
  display: flex;
  flex-flow: row nowrap;
  /* 水平两端对齐 可省 子元素宽度和 100% */
  justify-content: space-between;
  /* 垂直居中对齐 可省 子元素宽度100%  */
  align-items: center;
  /* css3 本身支持级联写法 */
  .left{
    width:60px;
    height:100%;
    background-color: #B4F8C8;
  }
  .right{
    /* 宽度占据剩余空间 */
    flex-grow: 1;
    height:100%;
    background-color: #9B59B6;
  }
}
</style>
<section class="flex_row_line">
    <div class="left"></div>
    <div class="right"></div>
   </section>
   效果：如上图 这里就不重复了

推荐

1. 建议使用第二种方法来实现两栏布局，第一用固定宽度，计算剩余宽度 不利用后期修改维护，第二种无需计算即可让元素占据剩余空间
2. 不建议使用float 来实现元素一排显示 原因：1 有更好的替换方案 position 2.更简单无需清除浮动 浮动应该只是图文环绕才使用布局则应该禁止使用