CSS布局－案例分析

最近在用vue.js框架开发小程序，对于「前端知识」几乎为0的我，用html+css调整布局，真是让我分分钟有想拍桌子的冲动啊，但是工作毕竟是工作呀，拍完桌子还是要静下心来调布局对不对。

在经过几周各种挫折的开发，今天将一些项目中运用的常用布局做个整理 。

案例1: 「头像加V」

header.png

要点：

• 左右布局：

很自然想到使用盒子布局, 左右布局即：flex-direction:row

• 底边对齐

在盒子布局里，有一个属性 align-self ,
align-self：定义flex子项单独在「侧轴(纵轴)」方向上的对齐方式。所以 align-self:flex-end 即可。

主轴和侧轴.png

• 右边对齐

如果不设置加v图片的margin，那么就会是左右结构，所以设置margin-left : 图片的宽度，就可以保证右对齐。

• 图片圆角
  图片的四个角的圆角都可以单独设置，比如设置成下图的圆角： 不同的圆角.png 可以写成 border-radius:15rpx 30rpx 60rpx 120rpx; 中间用空格分开,顺序为（上，右，下，左）

「头像加V」的源码

<template>
    <div class="avatar-container">
        <img class="avatar" :src="url"></img>
        <img class="vip-icon" src="/static/drawable/icon_vip.png"></img>
    </div>
</template>

<style>
    .avatar-container {
        display:flex;
        flex-direction:row;
    }
    .vip-icon {
        width:24rpx;
        height:24rpx;
        align-self:flex-end;
        margin-left:-24rpx;
        
    }
    .avatar {
        width:80rpx;
        height:80rpx;
        border-radius:40rpx;
    }
</style> 

案例2: 「回放」

多张图片居中叠加.png

要点：

• 「图1」 宽度铺满留左右边距
  对于第一个要点，要注意的是，不要设置图片的宽度width(默认为auto），通过设置左右的margin，来让终端计算图片的宽度。

1. 当margin指定一个值，那么会作用到四个方向。
2. 当margin指定两个值，第一个值会应用到top和bottom,第二个值应用到left和right;
3. 当margin指定三个值，第一个值是top，第二个值是left和right， 第三个值是bottom;
4. 当margin指定四个值，则会按照top,right,bottom,left顺序依次应用到各个方向。（逆时针）

• 「图2」 在「图1」上方，且居中显示。
  这里要涉及到position, 对应的四个属性top,left,right,bottom来决定最终的位置。

1. static:默认值，没有定位, top,left,right,bottom不起作用
2. relative: top,left,right,bottom的值是相对于自身原有的位置做偏移。
3. absolute: top,left,right,bottom的值，对于static 定位以外的第一个父元素进行定位.
4. fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位，top,left,right,bottom来决定最终位置。

所以综合上述margin 和 position 可推出对应的属性进行如下设置时便可以居中显示。

   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;

最后放出整个效果的源码：

「回放」源码 ：

<template>
    <div class="vod-container">
      <img class="vod-cover" :src="url"></img>
      <img class="vod-play" src="/static/drawable/elvideo_icon_video_play.png"></img>
    </div>
</template>

<style>
  .vod-container {
    position: relative;
    height: 340rpx;
    margin-top:200rpx;
    margin-left: 12rpx;
    margin-right: 12rpx;
  }

  .vod-cover {
    position: absolute;
    width: 100%;
    height: 340rpx;
    border-radius: 8rpx;
  }
  
  .vod-play {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }  
</style>