流式布局(百分比布局)

本文链接： https://blog.csdn.net/weixin_45674894/article/details/102531078

流式布局

布局特征:

高度写死，宽度自适应。并不是百分百还原设计图

比如：设计图是针对320px屏幕设计的，那么只有在320设备的屏幕中，才是完美的效果，其他情况都会拉伸
小图片、小图标、文字大小一般写死
大图片一般宽度自适应，高度等比例缩放(例如:轮播图)

经典的流式布局：

左侧固定，右侧自适应

方法有很多种,简单例举3种。

//html结构如下:
 <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>

一、左侧固定右侧自适应-定位
步骤:
1、左侧宽度写死——》定位——》给父元素设置左padding即可
2、右侧宽度不用设置（自适应）

  /* css代码如下 */
 .father {
      height: 300px;
      position: relative;
      border: 3px solid #000;
      /* 左padding */
      padding-left: 300px;
    }

    /* 左侧固定 */
    .left {
      width: 300px;
      height: 300px;
      background-color: blue;
      /* 定位 */
      position: absolute;
      top: 0px; 
      right: 0px;
    }

    /* 右侧自适应 */
    .right {
      /* width: 不需要设置  默认自适应 */
      height: 310px;
      background-color: yellow;
    }

二、浮动+触发BFC
拓展：想详细了解BFC戳这里

overflow:hidden 会触发盒子的BFC

触发BFC的盒子的特点：

解决margin的塌陷
清除浮动
不会在浮动元素下面，会被挤到一边去

步骤:
1、左侧宽度固定——》左浮动
2、右侧宽度是自适应——》触发bfc——》overflow：hidden

  /* css代码如下 */
   .father {
      height: 300px;
      border: 3px solid #000;
    }

    /* 左侧固定 */
    .left {
      width: 300px;
      height: 300px;
      background-color: blue;
      /* 左浮动 */
      float: left;
    }

    /* 右侧自适应 */
    .right {
      /* width: 不需要设置  默认自适应 */
      height: 310px;
      background-color: yellow;
      /* 触发bfc：块级格式化上下文 */
      overflow: hidden;
    }

三、display:flex(对flex布局不太了解的朋友可以去看看我的另一篇关于flex布局的博客)flex布局(弹性布局、伸缩布局)

步骤:
1、给父盒子设置为弹性盒子
1、左侧宽度写死
2、右侧宽度按照份数分配父元素主轴（宽度）的剩余空间

  /* css代码如下 */
.father {
      height: 300px;
      border: 3px solid #000;
       /* 让盒子变为弹性盒子 */
      display: flex;
    }

    /* 左侧固定 */
    .left {
      width: 300px;
      height: 300px;
      background-color: blue;
    }

    /* 右侧自适应 */
    .right {
      /* width: 不需要设置  默认自适应 */
      flex: 1;
      height: 310px;
      background-color: yellow;
    }
/* 甚至子元素的高度也不用设置,默认拉伸显示 */

右侧固定，左侧自适应

注意:在右侧固定，左侧自适应的布局中如果要使用浮动+触发BFC的方法,在html结构中需要先写右边的盒子!!!
原因:浮动元素受到上面元素边界的影响,导致盒子上不去

 <div class="father">
    <div class="right"></div>//先写右边盒子
    <div class="left"></div>
  </div>

两侧固定，中间自适应（圣杯布局、双飞翼布局）

在这里插入图片描述
注意:同样在两侧固定，中间自适应（圣杯布局、双飞翼布局）中如果要使用浮动+触发BFC的方法,在html结构中需要先写左边的盒子,在写右边盒子,中间盒子最后写
原因:浮动元素受到上面元素边界的影响,导致盒子上不去

等分布局
按照宽度百分比可以完成，但是当给每一个盒子设置border之后，会发现盒子掉下来了
只要进行移动端布局，盒子约定俗成都需要加上自动内减。

//html结构代码
<div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <div class="son">4</div>
    <div class="son">5</div>
</div>

  /* css代码如下 */
  .father {
      width: 600px;
      height: 600px;
      border: 3px solid #000;
    }

    .son {
      width: 20%;
      height: 100px;
      background-color: lime;
      float: left;
      /* border会撑大盒子 */
      border: 1px solid blue;

      /* 自动内减——》在写移动端布局中，一般会给所有的盒子设置自动内减 */
      box-sizing: border-box;
    }

’

流式布局(百分比布局)

流式布局

猜你喜欢