居中

規劃中居中是很重要的手藝，掌握居中的技能，對規劃相稱重要

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