航栈
发布
技术实践

三栏布局—左栏、右栏各300像素，中间自适应

最近在编写框架，有些编写技巧忘记了，回顾一下，其实这也是一些面试官常问的面试题，我很少去问

羊先生的头像
羊先生2021.07.28 · 8 分钟阅读 · 37 阅读
三栏布局—左栏、右栏各300像素，中间自适应封面
文章正文还需 8 分钟

最近在编写框架，有些编写技巧忘记了，回顾一下，其实这也是一有些面试官常问的面试题

Float浮动布局

html 复制代码 
<style>
    *{padding: 0;margin: 0;text-align: center;}
    .layout article div {min-height: 100px}
</style>
<style>
    .layout.float .left{
      float: left;
      width: 300px;
      background: red;
    }
    .layout.float .right{
      float: right;
      width: 300px;
      background: blue;
    }
    .layout.float .center{
      background: yellow;
    }
</style>
<section class="layout float">
    <h3>float浮动布局</h3>
    <article class="left-right-center">
      <div class='left'>left</div>
      <div class="right">right</div>
      <div class="center">center</div>
    </article>
</section>
image.png

浮动布局缺点： 浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等，如果中间内容较多，则会溢出到左侧div下面。
浮动布局优点： 浮动布局的优点就是比较简单，兼容性也比较好(像ie浏览器)。只要清除浮动做的好，是没有什么问题的。
清除浮动
clear清除浮动： clear:both 不允许元素的左边或右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间

利用伪元素清除浮动：

css 复制代码 
// clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 最佳实践方案
// 加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

注释： zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的
zoom在非IE浏览器中表现为支持放大或者缩小，但是由于这个属性是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来实现div 的缩放效果，现在要放大或者缩小直接用css3的transform属性。

BFC容器清除浮动： BFC(Block Formatting Context)既块状格式化上下文，它是按照块级盒子布局的
BFC的主要特征：

  • BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
  • BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
  • 给浮动元素的父元素添加浮动，但是这样需要一直浮动到 body ，不建议采取该方法。
image.png

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

html 复制代码 
// 给父元素添加以下属性来触发BFC
1. float: left | right
2. overflow: hidden | auto | scorll
3. display: table-cell | table-caption | inline-block | flex | inline-flex
4. position: absolute | fixed

absolute绝对定位布局

html 复制代码 
<style>
    .layout.absolute{
      position: relative;
    }
    .layout.absolute .left-center-right{
      height: 100px;
    }
    .layout.absolute .left-center-right >div{
      position: absolute;
    }
    .layout.absolute .left{
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right: 0px;
      width: 300px;
      background: blue;
    }
  </style>
  <section class="layout absolute">
    <h3>absolute绝对定位布局</h3>
    <article class="left-center-right">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </article>
  </section>
image.png

浮动布局优点： 很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式
浮动布局缺点： 绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的

flex布局

html 复制代码 
<style>
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background:red;
    }
    .layout.flexbox .center{
      flex: 1;
      background: yellow
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }
</style>
  <section class="layout flexbox">
    <h3>flex布局</h3>
    <article class="left-center-right">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </article>
  </section>
image.png

flex布局优点： felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox；内容会自动撑开。
flex布局缺点： felxbox的缺点就是不能兼容IE8及以下浏览器

table布局

html 复制代码 
<style>
    .layout.table .left-center-right{
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-center-right >div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background:red;
    }
    .layout.table .center{
      background: yellow
    }
    .layout.table .right{
      width: 300px;
      background: blue;
    }
  </style>
  <section class="layout table">
    <h3>table布局</h3>
    <article class="left-center-right">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </article>
  </section>
image.png

表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局;内容会自动撑开

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用（写于2016年8月24日：时代在变，当下，是时候登上舞台了）。
我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了

Grid网格布局

html 复制代码 
<style>
    .layout.grid .left-center-right{
      display: grid;
      width: 100%;
      //行
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background: yellow
    }
    .layout.grid .right{
      background: blue;
    }
  </style>
  <section class="layout grid">
    <h3>网格布局</h3>
    <article class="left-center-right">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </article>
  </section>

可以发展到Grid布局就是在弥补之前css布局上的一些缺陷，网格布局功能很强大，截止目前支持度也还良好

目前我是可以建议使用，只要不用考虑IE浏览器

后面我也会出grid使用的教程，也可以参考https://css-tricks.com/snippets/css/complete-guide-grid/