這周工作任務較多，經常加班，住的遠到家11點。週六加班，週日上午又體檢，就寫一下小總結吧。
pc chrome中頁面的表單的快取問題
做後臺系統會用到許多表單，假如現在在a頁面，有一個input，你輸入了值，然後點選連結跳轉到其他頁面，再通過history.back() 或者 瀏覽器自帶的返回按鈕 返回到剛才的表單頁，會發現input內的值依然存在，需要重新整理才會重置。其實我覺得這算是chrome做的一個優化。
給input設定以下屬性可以解決此問題。
autocomplete="off"
複製程式碼autocomplete="off"也可以用來禁止瀏覽器input輸入框的歷史內容提示。
只在chrome中測試，沒有測試其他瀏覽器
另外，網上有說，設定meta禁用快取有效，我設定了並沒有效果，不知道是不是用法不對。
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
複製程式碼由這個知識點可以衍生出 BFCache 的相關知識。
css counter-reset 和 counter-increment 屬性的運用
有時候我們需要做一個有序列表，按序號顯示內容，如百度的搜尋熱點
這個時候就可以利用這個屬性了。主要是加了註釋的那幾行，其他都可忽略。
ol {
/* 初始化 變數值。預設為 0，如果需要設定，變數後面後面可跟上具體的值。這個屬性不寫也可以 */
counter-reset: idx;
}
ol>li {
/* 設定自增變數 */
counter-increment: idx;
padding: 5px 10px;
color: -webkit-link;
font-size: 13px;
}
ol>li::before {
/* 設定 content */
content: counter(idx);
display: inline-block;
margin-right: 4px;
padding: 1px 0;
width: 14px;
color: #fff;
line-height: 100%;
font-size: 12px;
text-align: center;
background-color: #8eb9f5;
}
ol>li:nth-child(1)::before {
background-color: #f54545
}
ol>li:nth-child(2)::before {
background-color: #ff8547;
}
ol>li:nth-child(3)::before {
background-color: #ffac38;
}
複製程式碼<ol>
<li>嘿嘿嘿</li>
<li>哈哈哈</li>
<li>嘻嘻嘻</li>
<li>呵呵呵</li>
<li>啦啦啦</li>
</ol>
複製程式碼效果如圖：
強大的 background-image
background-image 可以寫多個。同理 background-position等其他的對應屬性也可以多個
如淘寶雙11的按鈕
首先要了解這幾個屬性 background-clip background-origin
正常來說我們可以用兩個容器寫出這個效果，將紅色區域覆蓋在黃色區域上。
但因為 background-image 可以寫多個，所以用一個容器也是ok的。
button {
outline: none;
}
.btn {
min-width: 290px;
height: 90px;
position: relative;
border-radius: 50px;
font-weight: 500;
/* 給按鈕設定 border, 配合 background-origin 和 background-clip */
border: solid 5px transparent;
color: #5e3700;
font-size: 32px;
margin: 20px;
}
.btn.btn-default {
/* 按鈕的陰影部分 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
/* 可以設定多個，最前面的層級最高，所以第一個肯定是按鈕的紅色漸變，然後才是黃色漸變 */
background-image:
linear-gradient(to right, #ff7c2d 3%, #ff016e 97%),
linear-gradient(to bottom, #fff3b6, #e27d2c);
/* background-origin 的預設值是 padding-box, 這樣的話 border 的顏色就不可控了，*/
/* 所以改成 border-box，相對於邊框開始繪製背景色*/
background-origin: border-box;
/* 然後再設定紅色漸變背景的繪製區域為 padding-box, 黃色漸變背景的繪製區域為 border-box*/
/* 這樣的話，黃色漸變背景就露出來啦，露出的大小剛好是border的寬度 */
background-clip: padding-box, border-box;
}
複製程式碼<button class="btn btn-default"></button>
複製程式碼參考