零碎小知识

1.文字与icon对齐
两个div要垂直居中，可以设置这两个块为行内样式，并设置垂直对其

.block {
	display: inline-block;
	vertical-align: middle;
}

一个<div>和一个<i>同一个层级
使用vertical-align: middle;可以竖直方向对齐

2.white-space用法
white-space属性指定元素内的空白怎样处理，默认值为normal，空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

实现元素一行显示，内容超过一行就可滑动

	.name-list {
      width: 100%;
      white-space: nowrap;
      overflow: scroll;
    }
    .used-name {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      margin: 0 15px 10px 0;
      font-size: 12px;
      color: #646464;
      border: 1px solid #646464;
      &:last-child {
        margin-right: 0;
      }
      &.active {
        color: #fb8800;
        border: 1px solid #fb8800;
      }
    }

<div class="name-list">
	<div class="used-name active">name1</div>
	<div class="used-name">name2</div>
	<div class="used-name">name3</div>
	<div class="used-name">name4</div>
</div>

3.安卓手机固定底部的部分在弹出键盘时上移了
iPhone在弹出键盘时，页面会自动向上滑动到合适的距离，安卓手机不会自动滑，固定在底部的那部分就移到了键盘上面，挡住页面其他内容，所以要增加一个事件。

componentDidMount () {
    const windowHeight = window.innerHeight
    window.addEventListener('resize', () => {
      if (window.innerHeight < windowHeight) {
        this.setState({ resize: true })
      }
    })
}

<div className="read-login-protocol text-center" style={{ position: this.state.resize ? 'static' : 'fixed' }}>
hhh</div>

4.手机号码中间数字用*隐藏

function fixmobile (mobile) {
    mobile = String(mobile)
    const result = []
    for (let i = 0; i < mobile.length; i++) {
        result.push(i > 2 && i < 8 ? '*' : mobile[i])
    }
    return result.join('')
}

fixmobile(18812345008)
// "188*****008"

// 另一种方式
var phone = '18812345008';
phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
"188****5008"
`${phone.substr(0, 3)}****${phone.substr(7)}`

5.小程序获取当前时间戳，设置storage存储的时间

const now = Date.parse(new Date())
const popupTime = wx.getStorageSync('storageTimestamp')
// 设置存储一天的时间
if (popupTime && now < popupTime + 24 * 60 * 60 * 1000) return false
// 执行某些操作
wx.setStorageSync('storageTimestamp', Date.parse(new Date()))

// 拓展：获取当前年月日时分秒
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
const hour = now.getHours()
const minute = now.getMinutes()
const second = now.getSeconds()

6.HTML5 DOM

ele.scrollIntoView()

默认为true，ele移到屏幕中间；若为false，ele移到屏幕底部。

7.盒子模型
标准盒模型 box-sizing: content-box;

• 元素的 width、height 只包含内容 content，不包含 border 和 padding 值；
• 盒子的大小由元素的宽高、边框和内边距决定。

IE盒模型 box-sizing: border-box;

• 元素的 width、height 不仅包括 content，还包括 border 和 padding；
• 盒子的大小取决于 width、height，修改 border 和 padding 值不能改变盒子的大小。

给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；在上下方向不会占据空间。
8.CSS calc()函数
CSS函数calc()可以用在任何一个需要、, 、、、或的地方。有了calc()，你就可以通过计算来决定一个CSS属性的值了。

你还可以在一个 calc() 内部嵌套另一个 calc() ，里面的 calc() 会被简单地视为加了括号。
运用场景：两个div元素排列在同一行显示
思路：inline-block 兼具块级元素可以设置宽高和行内元素不独占一行的特性，设置了 inline-block 的两个 div 之间会有间距，记得消除。由于左边是固定的，总的宽度是 100%，要计算右边的宽度，可以使用 calc 来计算**（+ 和 - 运算符的两边必须始终要有空白符）**。

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

刚开始这两个div元素都是各占一行的，CSS样式如下：

.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    height: 150px;
    background-color: #94E8FF;
}

.container {
    font-size: 0;    /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);   /* 计算宽度，运算符号左右一定要有空格 */
}