css布局规范

[douzi8]

页面架子

• page-top和page-bottom和固定屏幕的元素 都不能放page-content里面
• 页面模板必须有个根元素
• 小程序的模板可以不需要根元素，也就是说小程序不需要page-root

  
  <!-- 1 -->
  <div class="page-root">
  <!-- 可缺省 -->
  <div class="page-top"></div>
  <!-- 必须有 -->
  <div class="page-content"></div>
  <!-- 可缺省 -->
  <div class="page-bottom"></div>
  </div>

## 左 中 右
```css
.left {
  float: left;
}

.right {
  float: right;
}

.center {
  over: hidden;
}

<div class="clearfix">
   <!-- 可缺省 -->
   <div class="left"></div>
   <!-- 可缺省 -->
   <div class="right"></div>
   <!-- 自适应宽度，注意html元素一定要放float元素的下面 -->
   <div class="center"></div>
</div>

A: left
B: right
C: center (宽度自适应)

---------------------
|  A  |    C    |  B  |
---------------------

---------------------
|  A  |     C     |
---------------------

---------------------
|       C       |  B  |
---------------------

图标和文字对齐模式

<style>
.icon {
  position: relative;  
  top: .02rem; /* 通过控制top来使图标和文字对齐 */
}
</style>
<span class="icon"></span>我的订单

元素和文字靠拢，去掉间隙

<span class="font-xs">¥</span>6

position: absolute,fixed;

规范： 凡是使用absolute或者fixed的元素，必须指明至少两个组合值，比如left和top

.voucher-hint {
  position: absolute;
  left: 0;
  top: -10px;
   // left, right同时为0，表示宽度百分百 
  right: 0;
}

flex布局场景

在线demo

1. 高度自适应

   <style>
   .wrap {
   height: 100px;
   }
   </style>
   <div class="flex-wrap">
   <!-- 假如删掉top这个标签，content高度自动变成100px -->
   <div class="top"></div>
   <div class="flex"></div>
   </div>

2. 宽度自适应

   <div class="flex-wrap">
   <!--  flex宽度自适应 -->
   <div class="left">1</div>
   <div class="flex"></div>
   <div class="right">3</div>
   </div>

3. tabBar布局

   ---------------------
   |  首页  | 头条  |  我的  |
   ---------------------

   <div class="flex-wrap">
   <div class="flex">首页 </div>
   <div class="flex">头条 </div>
   <div class="flex">我的 </div>
   </div>

4. 多排布局

   ------------------
   |   A   B   C   D   |
   |   E   F   G   H   |
   -----------------

   <style>
   .item {
   float: left;
   width: 25%;
   }
   </style>
   <div class="clearfix">
   <div class="item">A</div>
   ...
   </div>