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

布局中居中是很重要的技術(shù)，掌握居中的技巧，對(duì)布局相當(dāng)重要

  /* flex 垂直 居中 */
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        height: 100vh; /* 重要語(yǔ)法 */
        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; /* 去除內(nèi)邊距 */
}
/* 使用 number 時(shí)，安卓下可以調(diào)出數(shù)字鍵盤，并且只能輸入數(shù)字，蘋果手機(jī)不可以。 */
input[type="number"] {
    outline : none; /* 去除外邊框 */
    padding : 0; /* 去除內(nèi)邊距 */
    -moz-appearance: textfield; /* 去除 上下自旋按鈕 */
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance: none; /* 去除 上下自旋按鈕 */
}

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

/**
*  使用 background-image 可以指定多圖片， 需要分別使用指定相關(guān)屬性，如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; /* 背景色與背景圖片 復(fù)合寫法*/ 
}

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

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

說(shuō)明：
1.h-shadow 與 v-shadow 都為 0 時(shí)表示不偏移，表示四周擴(kuò)散
2.blur : 表示模糊長(zhǎng)度，實(shí)際模糊距離是設(shè)置值的一半
3.設(shè)置指定邊，主要控制水平和垂直陰影的位置，可以分別指定沒(méi)有個(gè)方向的陰影位置如分別指定四邊：
.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 的邊框?qū)傩?，好處是陰影不占空間，動(dòng)效不會(huì)出現(xiàn)移動(dòng)
如：
box{background:green;width:200px;height:200px;}
// 做了位置處理，否則會(huì)對(duì)布局造成影響
.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 ： 設(shè)置字體在小字體時(shí)更易讀，
比如，設(shè)置字體為100px，那么設(shè)置值為0.58，也就是小尺寸時(shí)是58px，這樣顯示更易讀。詳情

2.-webkit-text-size-adjust手機(jī)默認(rèn)是 auto, 自動(dòng)調(diào)節(jié)字體大小，一般情況需要關(guān)閉該功能，設(shè)置 none 或 100% 值，否則可能會(huì)導(dǎo)致樣式出問(wèn)題。

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

與opacity區(qū)別在于，當(dāng)使用時(shí)屬性設(shè)置為hidden，占據(jù)空間，但是不會(huì)影響事件的觸發(fā)。比如一個(gè)使用了hidden屬性的元素完全遮蓋了另外的元素，被遮蓋的元素事件依然正常觸發(fā)。并且自己本身的事件不會(huì)觸發(fā)。通過(guò)設(shè)置visible屬性顯示元素

理解 flex 布局首先明白抓住2點(diǎn)

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

水平方向

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

flex-wrap : 默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
    nowrap : （默認(rèn)）不換行，盒子會(huì)自適應(yīng)
    wrap : 換行，第一行在上方
    wrap-reverse : 換行，第一行在下方

flex-flow ： ||  合并寫法

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

垂直方向

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

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

第二：子盒子屬性

order : 指定元素權(quán)重，默認(rèn)為 0，權(quán)重越大，對(duì)應(yīng)的元素越靠后。在使用時(shí)注意 flex-direction 的屬性值

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

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

flex-basis ：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。
瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小

flex : 是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

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

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

    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 );