兩者順序不能反過來，某些系統會有不可預料的錯亂　　

display: -webkit-flex;
display: flex;

背景，background-size 必須單獨拆出來，理由同上

background: url(../img.jpg) no-repeat center/cover;

負縮進

text-indent: -2em;

主動引發怪異模式

box-sizing: border-box;

查詢api：

http://www.css88.com/book/css/

好用：

li+li 相鄰選擇器

last-child 第一個子代選擇器 （兼容性好，last-child不行）

ps:

ctrl+alt+c 生成透明背景，使圖片居中. 適用於多個小圖片排版.

在編輯器忽略node_modules，加載速度。

移動端svg線段進度條

html：

<svg version="1.1" id="path" width="1000px" height="1000px" >
　　<path d="" stroke="" stroke-width="1px" fill="none"/>
</svg>

css:

#path{animation:dash 2s 0s linear forwards;stroke-dasharray: 1000;stroke-dashoffset: 1000;}
@keyframes dash {
to {stroke-dashoffset: 0;}
}

stroke-dasharray 表示虛線描邊。可選值為：none, <dasharray>, inherit. 其中，none表示不是虛線；<dasharray>為一個逗號或空格分隔的數值列表。表示各個虛線端的長度。可以是固定的長度值，也可以是百分比值；inherit表繼承。
stroke-dashoffset 表示虛線的起始偏移。可選值為：<percentage>, <length>, inherit. 百分比值，長度值，繼承。
stroke-linecap="butt" 描邊端點表現形式
stroke-linejoin="miter" 描邊轉角的表現方式

var path = document.querySelector(‘.path‘);
var length = path.getTotalLength();

移動端調試(即以ip為鏈接地址，不是localhost，能在手機查看)：

1 http-server

2

3.利用谷歌工具，詳情查看另外篇文章。

----------

問題：

移動端:

按鈕line-height

多個img1px空隙

1px border

軟鍵盤

一些坑