经典的流式布局实现方法总结(一)

前言:今天总结一下经典的流式布局的几种实现方法,方便以后查看.

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

流式布局的特征：

• 宽度自适应，高度写死，并不是百分百还原设计图。
• 图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
• 一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。

经典的流式布局结构:

1. 左侧固定，右侧自适应
2. 右侧固定，左侧自适应
3. 两侧固定，中间自适应（圣杯布局，双飞翼布局）
4. 等分布局

左侧固定右侧自适应的三种实现方法:

1.利用bfc块级格式化上下文, 实现左侧固定右侧自适应
(1) 让左边的盒子 float: left;
(2) 让右边的盒子 overflow: hidden;

具体css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 400px;
      background-color: pink;
    }
    .left {
      height: 300px;
      width: 200px;
      background-color: orange;
      float: left;
    }
    .right {
      height: 350px;
      background-color: blue;
      /* 触发了bfc的盒子, 不与浮动的元素重叠 */
      overflow: hidden;
    }
  </style>

html结构

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>

2.利用定位实现左侧固定右侧自适应

(1) 给父盒子设置padding-left 值

(2) 给左侧子盒子设置width = padding-left ,并定位到父盒子的padding-left上.

(3) 右侧盒子自适应

具体css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 400px;
      background-color: pink;
      position: relative;
      padding-left: 200px;
    }
    .left {
      height: 300px;
      width: 200px;
      background-color: orange;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right {
      height: 350px;
      background-color: blue;
    }
  </style>

html结构

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>

3.利用flex布局 实现左侧固定右侧自适应

(1) 给父盒子设置display:flex ;

(2) 左侧盒子设置固定宽高 ,右侧盒子设置flex:1 ;

具体css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 400px;
      background-color: pink;
      display: flex;
    }
    .left {
      height: 300px;
      width: 200px;
      background-color: orange;
    }
    .right {
      flex: 1;
      height: 350px;
      background-color: blue;
    }
  </style>

html结构

<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>

扩展

BFC 块级格式化上下文

Block Formatting Context: 页面上一个隔离的独立渲染区域

触发成为 BFC 盒子的特点:

1. 触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素
   应用: 解决塌陷问题, 清除浮动
2. 触发了BFC的普通盒子, 不会与浮动元素重叠
   应用: 圣杯布局, 左侧固定右侧自适应

如何触发 BFC

• float: left; float: right;
• overflow的值不为visible。
• display的值为inline-block、table-cell、table-caption
• position的值absolute, fixed