移动端流式布局(百分比布局)

流式布局

布局特征:

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

    比如:设计图是针对320px屏幕设计的,那么只有在320设备的屏幕中,才是完美的效果,其他情况都会拉伸

  • 小图片、小图标、文字大小一般写死

  • 大图片一般宽度自适应,高度等比例缩放(例如:轮播图)

经典的流式布局:

  • 左侧固定,右侧自适应
    移动端流式布局(百分比布局)_第1张图片

方法有很多种,简单例举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;
    }
/* 甚至子元素的高度也不用设置,默认拉伸显示 */
  • 右侧固定,左侧自适应
    移动端流式布局(百分比布局)_第2张图片

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

 <div class="father">
    <div class="right"></div>//先写右边盒子
    <div class="left"></div>
  </div>
  • 两侧固定,中间自适应(圣杯布局、双飞翼布局)

移动端流式布局(百分比布局)_第3张图片
注意:同样在两侧固定,中间自适应(圣杯布局、双飞翼布局)中如果要使用浮动+触发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;
    }

你可能感兴趣的:(HTML+CSS)