css樣式

居中

佈局中居中是很重要的技術，掌握居中的技巧，對佈局至關重要

/* 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

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

/**
*  使用 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

/* 
* 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;}

font

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

2.-webkit-text-size-adjust手機默認是 auto, 自動調節字體大小，通常狀況須要關閉該功能，設置 none 或 100% 值，不然可能會致使樣式出問題。

user-modify

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

visibility

與opacity區別在於，當使用時屬性設置爲hidden，佔據空間，可是不會影響事件的觸發。好比一個使用了hidden屬性的元素徹底遮蓋了另外的元素，被遮蓋的元素事件依然正常觸發。而且本身自己的事件不會觸發。經過設置visible屬性顯示元素

flex

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

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

水平方向

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

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

flex-flow ：<flex-direction> || <flex-wrap> 合併寫法

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