聊聊三栏布局

闲时要有吃紧的心思，忙时要有清闲的趣味。

目录

• 前言

• 正文

  • 1、Float布局
  • 2、Position布局
  • 3、Table布局
  • 4、Flex布局
  • 5、Grid布局

• 总结

前言

返回目录

 对于前端来讲，布局是必须掌握的，一个好的布局可让页面看起来更美观。提到布局，那就不得不说CSS三栏布局。

 三栏布局通常多指左右两栏宽度固定，中间栏宽度自适应的布局。在能实现效果的状况下，尽量的中间栏内容优先渲染。面试的时候常常被问到，在这里总结一下

正文

 咱们不妨假定这样一个布局：高度已知((设高度为200px))，其中左栏、右栏宽度各为300px,中间自适应，能够经过几种方法来实现？以及各自的优缺点是什么？

 常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局

方便起见，先写一些公用的样式：

<!-- 公共样式 -->
<style>
  .clear_fix:after {
    content: '';
    display: flex;
    clear: both;
  }

  .left,
  .middle,
  .right {
    height: 200px;
  }

  .left {
    background-color: red;
    width: 300px;
  }

  .middle {
    background-color: green;
  }

  .right {
    background-color: yellow;
    width: 300px;
  }
</style>
复制代码

1、Float布局

返回目录

方案

左右中三列，左列左浮动，右列右浮动，中间列设置左右margin

原理

float属性定义元素在哪一个方向浮动，它最初的设计的初衷是为了解决文字环绕的问题 ，即给一个图片设置float属性以后会使文字环绕在图片周围显示。
float之因此能够实现文字环绕，是由于设置float属性的元素能够脱离文档流，使父元素高度塌陷。
若是浮动非替换元素，则要指定一个明确的宽度；不然，它们会尽量地窄。

 话很少说上代码：

<!-- float解决方案 -->
<main class="content_float main_content clear_fix">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>float解决方案</h1>
  </div>
</main>
<style> .content_float { min-width: 700px; } .content_float .left { float: left; } .content_float .middle { margin-left: 300px; margin-right: 300px; } .content_float .right { float: right; } </style>
复制代码

注意事项

1. 父元素设置最小宽度

   若是父元素的宽度小于两侧子元素固定宽度的和（600px），右侧元素就会被挤到下面去，因此咱们须要设置最小宽度。

2. 中间元素设置margin-left、和margin-right

   若是动手写这个代码的小伙伴会发现不设置这两个属性效果在中间元素内容比较少的时候效果是正常的，可是若是若是中间元素的子元素内容特别多的时候会挤到左右元素的下面去

3. 清除浮动

   因为咱们使用了float, 因此为了避免影响其余元素的显示这里须要为父元素添加clear_fix的类名用来清除浮动(具体代码见公共样式)。

2、Position布局

返回目录

方案

左中右三列（无顺序），根据定位属性去直接设置各个子元素位置

原理

position能够设置元素定位类型，其属性有5种 :

inherit: 继承父元素的position属性值

  static: 默认值，没有定位

  fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位（无论屏幕内容怎么滑动,其位置不会改变）

  relative:生成相对定位,相对于其正常位置进行定位

  absolute:生成绝对定位的元素,至关于static定位之外的第一个父元素进行定位。
复制代码

根据以上内容咱们能够看出咱们须要选择给 左 中 右 都使用 absolute 绝对定位，因为absolute 是至关于static定位之外的第一个父元素进行定位，因此咱们要给其父元素添加 position:relative属性, 这样这三个子元素能够相对于父元素进行绝对定位。

 话很少说上代码：

<!-- posstion解决方案 -->

<main class="content_posstion main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>position解决方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_posstion { position: relative; } .content_posstion .left { position: absolute; left: 0; } .content_posstion .right { position: absolute; right: 0; } .content_posstion .middle { position: absolute; left: 300px; right: 300px; } </style>
复制代码

3、Table布局

返回目录

方案

左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度

原理

table是一种常见的布局方式,他能够将整个页面按照表格的方式设置为多行多列,可是因为书写table标签比较麻烦尤为是涉及到table内嵌table的时候，因此CSS给咱们提供了display: table的方式可让咱们方便的使用table布局, 设置子元素为列的属性display:table-cell

 话很少说上代码：

<!-- table解决方案 -->

<main class="content_table main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>table解决方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_table { width: 100%; display: table; } .content_table>div { display: table-cell; } </style>
复制代码

4、Flex布局

返回目录

方案

左中右三列，父元素display: flex;居中子元素flex: 1;

原理

flex布局是W3C提出了一种新的方案，能够简便、完整、响应式地实现各类页面布局。
当给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每一个项目默认按照从左到右方式排列。
详情可参考阮一峰老师的——Flex 布局教程

 话很少说上代码：

<!-- flex解决方案 -->

<main class="content_flex main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>flex解决方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_flex { display: flex; } .content_flex .middle { flex: 1; } </style>
复制代码

注意事项

5、Grid布局

返回目录

概要

方案

左中右三列，父元素display: grid;利用网格实现

原理

网格布局（Grid）是最强大的 CSS 布局方案。
网格它将网页划分红一个个网格，能够任意组合不一样的网格，作出各类各样的布局。
将属性 display 值设为grid 或 inline-grid, 就建立了一个网格容器，全部容器直接子结点自动成为网格项目。
gird提供了gird-template-columns、grid-template-rows属性让咱们设置行和列的高、宽，只须要四行CSS代码就能够实现三栏布局,是否是感受到了gird的强大之处呢
详情可参考阮一峰老师的——CSS Grid 网格布局教程

 话很少说上代码：

<!-- grid解决方案 -->

<main class="content_grid main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>grid解决方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_grid { width: 100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } </style>
复制代码

总结

返回目录

 以上提供了5种实现三栏布局的方式那么他们的优缺点呢？咱们作张表格对比一下

布局方案	优势	缺点
Float布局	比较简单，兼容性也比较好	浮动元素脱离文档流，使用的时候只须要注意必定要清除浮动。
Position布局	快捷，设置很方便	元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可以使用性比较差
Table布局	使用起来方便,兼容性也不存在问题	①没法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一块儿变高的
Flex布局	比较完美	存在IE上兼容性问题，只能支持到IE9以上
Grid布局	最强大和最简单	兼容性很差

 经过介绍五种布局的优缺点，在实际开发中最优选择哪一种布局？相信你们心中会有本身的答案。

 我以为flex和grid布局就能够搞定实际开发中的布局，假设浏览器都支持这两个模块，你将选择grid仍是flexbox来给页面布局？

 flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。前面也简单说到，你能够根据你的设计需求，将内容区块放置到任何你想要放的地方。此外，若是要兼容低版本的IE(好比IE8+)，能够考虑table布局。

 最后问你们一个问题，若是中间部分被内容高度撑开，须要左右栏也撑开，这五种布局哪些布局还能够用？

 答案：flex布局和table布局

• 参考文献：

1. CSS实现三栏布局(5种)
2. css实现三栏布局的几种方法及优缺点

后记：Hello 小伙伴们，若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库 由 http://www.javashuo.com/tag/db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。