摘要：注意換行默認值上對齊下對齊垂直居中文本基線對齊設置所有的其他去除蘋果點擊事件的灰色陰影有些元素需要設置背景色。

布局中居中是很重要的技術，掌握居中的技巧，對布局相當重要

  /* flex 垂直 居中 */
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        height: 100vh; /* 重要語法 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item{
        width: 200px;
        height: 200px;
        background: green;
        line-height: 200px;
        text-align: center;
        font-size: 40px;
        color: #ffffff;
    }

input[type="text"] {
    outline : none; /* 去除外邊框 */
    padding : 0; /* 去除內邊距 */
}
/* 使用 number 時，安卓下可以調出數字鍵盤，并且只能輸入數字，蘋果手機不可以。 */
input[type="number"] {
    outline : none; /* 去除外邊框 */
    padding : 0; /* 去除內邊距 */
    -moz-appearance: textfield; /* 去除 上下自旋按鈕 */
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance: none; /* 去除 上下自旋按鈕 */
}

/* 在蘋果手機中需要 使用 form */
input[type="search"]::-webkit-search-cancel-button{
    display:none; /* 去除小差號 */
    -webkit-appearance: textfield; /* 去除默認樣式 */
}

/**
*  使用 background-image 可以指定多圖片， 需要分別使用指定相關屬性，如position、repeat  
*/
E{
    background-image: url(xxx.jpg), url(xxx.png), ...; /* 圖片路徑*/
    background-position: 0 0, 10 10, ...; /* 與圖片路徑一致 */
    background-repeat: no-repeat, repeat-x, repeat-y, ...; /* 與圖片路徑一致 */
    background: #fff url(xxx.png) center no-repeat; /* 背景色與背景圖片 復合寫法*/ 
}

/* 
* box-shadow: h-shadow v-shadow blur spread color inset; 
*/
E{
  box-shadow: 0 0   
}

1.h-shadow : 必需。水平陰影的位置。允許負值。[ 相對于最近邊界的位置 ]
2.v-shadow : 必需。垂直陰影的位置。允許負值。[ 相對于最近邊界的位置 ]
3.blur : 可選。模糊長度 [ 實際長度是給定長度的一半 ]
4.spread : 可選。陰影的尺寸。[ 可以為負值 ]
5.color : 可選。陰影的顏色。請參閱 CSS 顏色值。
6.inset : 可選。將外部陰影 (outset) 改為內部陰影。

說明：
1.h-shadow 與 v-shadow 都為 0 時表示不偏移，表示四周擴散
2.blur : 表示模糊長度，實際模糊距離是設置值的一半
3.設置指定邊，主要控制水平和垂直陰影的位置，可以分別指定沒有個方向的陰影位置如分別指定四邊：
.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4.可以使用該屬性替代 border 的邊框屬性，好處是陰影不占空間，動效不會出現移動
如：
box{background:green;width:200px;height:200px;}
// 做了位置處理，否則會對布局造成影響
.box1:hover{border:2px solid #ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px; }
.box2:hover{box-shadow:0 0 0 2px #ffffff;}

1.font-size-adjust ： 設置字體在小字體時更易讀，
比如，設置字體為100px，那么設置值為0.58，也就是小尺寸時是58px，這樣顯示更易讀。詳情

2.-webkit-text-size-adjust手機默認是 auto, 自動調節字體大小，一般情況需要關閉該功能，設置 none 或 100% 值，否則可能會導致樣式出問題。

user-modify有三個屬性值：write-only(只寫)、read-write(讀寫)、read-only(只讀)，用于普通元素的可編輯性和concenteditable屬性功能類似。使用時需要加瀏覽器前綴。測試發現火狐并不支持

與opacity區別在于，當使用時屬性設置為hidden，占據空間，但是不會影響事件的觸發。比如一個使用了hidden屬性的元素完全遮蓋了另外的元素，被遮蓋的元素事件依然正常觸發。并且自己本身的事件不會觸發。通過設置visible屬性顯示元素

理解 flex 布局首先明白抓住2點

第一：父盒子屬性。在父盒子中理解 2 個軸。

水平方向

flex-direction : 屬性決定主軸的方向（即項目的排列方向）
    row : 橫向，按元素順序，居左[主軸為水平方向，起點在左端]
    row-reverse ：橫向，倒序，居右[主軸為水平方向，起點在右端]
    column ：縱向，按元素順序，[主軸為垂直方向，起點在上沿]
    column-reverse : 縱向，倒序[主軸為垂直方向，起點在下沿]

flex-wrap : 默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
    nowrap : （默認）不換行，盒子會自適應
    wrap : 換行，第一行在上方
    wrap-reverse : 換行，第一行在下方

flex-flow ： ||  合并寫法

justify-content : 屬性定義了項目在主軸上的對齊方式，控制水平方向
    flex-start : 左對齊
    flex-end : 右對齊
    center : 水平居中
    space-between : 子元素間隔相等并自適應
    space-around : 子元素兩端間隔自適應 

垂直方向

align-items : 屬性定義項目在交叉軸上如何對齊，控制垂直方向
    flex-start : 上對齊
    flex-end : 下對齊
    center : 垂直居中
    baseline : 文字低端對齊
    stretch : 如果項目未設置高度或設為auto，將占滿整個容器的高度( 默認值 )

align-content ：屬性定義了多根軸線的對齊方式。
 如果項目只有一根軸線，該屬性不起作用。( 多個軸 )，控制垂直方向
    flex-start : 多軸上對齊
    flex-end : 多軸上下對齊
    center : 多軸居中
    space-between ： 兩端對齊，均分剩余空間

第二：子盒子屬性

order : 指定元素權重，默認為 0，權重越大，對應的元素越靠后。在使用時注意 flex-direction 的屬性值

flex-grow ：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
        分配空間的權重，按權重比均分剩余空間(注意是寬度，不包含 padding 和 margin )

flex-shrink : 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
        值為 0 ：不縮小

flex-basis ：定義了在分配多余空間之前，項目占據的主軸空間（main size）。
瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小

flex : 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

align-self : 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
 默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。[注意換行]
    auto ：默認值
    flex-start ：上對齊
    flex-end ：下對齊
    center : 垂直居中
    baseline : 文本基線對齊(設置所有的item)

 1. 去除蘋果點擊事件的灰色陰影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要設置背景色。
 2. 溢出出現省略號 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定寬度數字不換行，需要指定換行屬性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 無抗鋸齒；subpixel-antialiased (default): 次像素平滑 常見于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移動設備的

    var dpr = window.devicePixelRatio; // 密度
    var scale = 1 / dpr; // 縮放比
    var metaEle = document.createElement("meta");
    var headEle = document.querySelector("head");
    var rootEle = document.querySelector(":root");
    metaEle.setAttribute("name", "viewport");
    metaEle.setAttribute("content", "width=device-width,initial-scale=" + scale + ",maximum-scale="+ scale +",user-scalable=no");
    headEle.appendChild( metaEle );
    (setFontSize = function (){
        rootEle.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
    })();
    window.addEventListener( "resize", setFontSize );