摘要：關(guān)于書(shū)寫(xiě)順序位置自身文本動(dòng)畫(huà)當(dāng)然網(wǎng)上還有其他推薦的寫(xiě)法，差別在于在文本前還是后。

關(guān)于CSS 書(shū)寫(xiě)順序

位置  display float position transform 
自身  width height margin padding border background
文本  font text
動(dòng)畫(huà)  transition animation

當(dāng)然網(wǎng)上還有其他推薦的寫(xiě)法，差別在于background在文本前還是后。

考慮原因

提高CSS的可閱讀性（團(tuán)隊(duì)）
減少冗余代碼（手一抖或者中途被打斷，前后寫(xiě)了一樣的屬性）
快速定位代碼塊，易維護(hù)
減少實(shí)現(xiàn)UI稿的疏漏點(diǎn)

實(shí)際感受下

/*思考下這段代碼是干嘛的*/
.pop-btn{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 49%;
    text-align: center;
    color: #3295f2;
    margin: 10px 0;
    font-size: 16px;
    float: left;
}

/*調(diào)整*/
.pop-btn{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    height: 100%;
    width: 49%;
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #3295f2;
}

理論依據(jù)

和瀏覽器解析過(guò)程有關(guān)：先對(duì)DOM定位，然后解析自身屬性，然后解析內(nèi)部現(xiàn)象
和Mozilla官方建議的書(shū)寫(xiě)順序類(lèi)似

以上英文資料并未找到，技術(shù)博客中的兩種觀點(diǎn)供參考

帶瀏覽器前綴

-webkit-border-radius: 50px 20px;
border-radius: 50px 20px;

對(duì)調(diào)下順序會(huì)產(chǎn)生什么問(wèn)題？

瀏覽器對(duì)某些CSS3屬性的實(shí)現(xiàn)和標(biāo)準(zhǔn)有些差異
未來(lái)這些瀏覽器可能會(huì)修復(fù)這些差異，向標(biāo)準(zhǔn)靠齊

精簡(jiǎn)代碼

與瀏覽器默認(rèn)的一致

div{
    width: 200px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
}

height的默認(rèn)值就是auto

一般在需要抹掉前面的height定值才會(huì)用到

/*倫家奏是塊級(jí)元素*/
li{
    display: block;
}

/*偶是行內(nèi)替換元素，本身就可以設(shè)置寬高*/
input{
    display: inline-block;
    width: 100%;
    height: 24px;   
}   

行內(nèi)元素不能設(shè)置寬高，這種說(shuō)法是不嚴(yán)謹(jǐn)?shù)?/p>

行內(nèi)替換元素 input img 
行內(nèi)非替換元素 span i strong

/*多個(gè)屬性組合出現(xiàn)，部分屬性會(huì)失效*/
span{
    display: inline;
    position: absolute;
    left: 20px;
    width: 50px;
    height: 20px; 
    border: 1px solid #DFDFDF;
}

Demo

類(lèi)似的組合還有：

position: fixed; display: block;
position: absolute; float: left;

詳細(xì)判定規(guī)則：

減少一些令人迷惑，冗余的代碼，有助于日后的維護(hù)工作

精簡(jiǎn)CSS代碼更是建立在對(duì)CSS屬性的充分熟悉的基礎(chǔ)上

移動(dòng)端1px邊框問(wèn)題

先說(shuō)是不是

border:1px solid #DF;在移動(dòng)端線條會(huì)比較粗，不能很好的還原UI。和原生應(yīng)用對(duì)比下便可發(fā)現(xiàn)。另外截圖用PS放大測(cè)量，發(fā)現(xiàn)確實(shí)有2或3個(gè)像素

再說(shuō)為什么

設(shè)備像素

設(shè)備中一個(gè)最微小的物理部件，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值

CSS像素

CSS像素是一個(gè)抽象的單位

與設(shè)備無(wú)關(guān)
標(biāo)準(zhǔn)的顯示密度下，一個(gè)CSS像素對(duì)應(yīng)著一個(gè)設(shè)備像素

繼續(xù)深入：設(shè)備獨(dú)立像素 設(shè)備像素比(devicePixelRatio） 深入理解viewport
UI經(jīng)常說(shuō)的圖有點(diǎn)糊原因是什么 為什么IOS要用2x,3x圖 如何讓canvas繪圖更清晰 SVG為什么放大后也很清晰

該如何解決

在線Demo

原理：利用scale進(jìn)行縮放

針對(duì)不同情形可以做特殊處理

固定寬度與自適應(yīng) 嘗試使用CSS做簡(jiǎn)單的圖形 CSS3動(dòng)畫(huà)性能

使用3D變換來(lái)開(kāi)啟GPU，或will-change（后面細(xì)說(shuō)）

GPU即圖形處理器，是與處理和繪制圖形相關(guān)的硬件。GPU是專(zhuān)為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的，可以讓CPU從圖形處理的任務(wù)中解放出來(lái)，從而執(zhí)行其他更多的系統(tǒng)任務(wù)，例如，頁(yè)面的計(jì)算與重繪。

常用：transform: translateZ(0);

元素尺寸,位置變化(width,height,top,left)等，盡可能使用 transform
來(lái)替代。transform不會(huì)更改周?chē)氐牟季?，減少瀏覽器重繪的成本

在線Demo

盡可能讓有動(dòng)效的元素脫離文檔流(float,absolue,fixed)，減少重排

關(guān)于有動(dòng)效的gif圖片

如果圖層中某個(gè)元素需要重繪，那么整個(gè)圖層都需要重繪。比如一個(gè)圖層包含很多節(jié)點(diǎn)，其中有個(gè)gif圖，gif圖的每一幀，都會(huì)重繪整個(gè)圖層的其他節(jié)點(diǎn)。所以這需要通過(guò)特殊的方式來(lái)強(qiáng)制gif圖屬于自己一個(gè)圖層（translateZ(0)或者translate3d(0,0,0)）

上面具體原理性知識(shí)大家再去查相關(guān)資料，深入理解

暖心的CSS3屬性及應(yīng)用

pointer-events 在線Demo：繼續(xù)解決1px邊框問(wèn)題

看得見(jiàn)，摸不著（點(diǎn)不到）

use-select 在線Demo

禁止選擇文本，移動(dòng)端禁止長(zhǎng)按復(fù)制

image-set 兼容性

響應(yīng)圖片

設(shè)備像素比window.devicePixelRatio

 background-image: image-set( url([email protected]) 2x,    url([email protected]) 3x );

兼容性

will-change

之前動(dòng)畫(huà)性能中有講到，3Dtransform會(huì)啟用GPU加速。我們實(shí)
際上不需要z軸的變化，欺騙瀏覽器，是一種不人道的做法。

will-change專(zhuān)為此而生，預(yù)先告訴瀏覽器，快做好準(zhǔn)備，把 GPU兄弟拉來(lái)，我要變形了。

幾何老師說(shuō)： 同學(xué)們注意，我要開(kāi)始變形了...

兼容性

關(guān)于JS 不要做重復(fù)的工作

外部依賴(lài)資源統(tǒng)一管理
相同的代碼進(jìn)行封裝：（業(yè)務(wù)，UI，工具方法）
能夠用代碼判定的配置，不要手動(dòng)去改

JSHint 緩存問(wèn)題

微信瀏覽器緩存較嚴(yán)重

測(cè)試環(huán)境下禁止瀏覽器緩存

版本號(hào)
文件指紋
發(fā)布新版本菜單配置項(xiàng)注意點(diǎn)

Vue條件渲染v-show與v-if的區(qū)別

v-show不支持