很多時候我們會有下面的場景，如下圖中所顯示的那樣。點選1區域（從圖上看1區域包含2區域）和2區域跳轉不同的鏈結。
正常的**結構應該是：
很明顯可以發現，瀏覽器的渲染結果並不是我們想要的結果。那麼是為什麼呢？
根據 w3c 規範，a 標籤是不是巢狀 a 標籤的。如果出現 a 標籤巢狀 a 標籤的情況就會將 a 標籤內的 a 標籤渲染在外部。其實按照設計圖上雖然是包含的關係，但是我們可以按照下面的方式布局，通過定位解決，不同的跳轉問題。
div元素權重
內聯樣式
1000
id選擇器
100類選擇器（包括屬性選擇器和偽類）
10元素(標籤)和偽元素選擇器
1結合符和萬用字元
0根據上面的選擇器的權重列表，就對我們在編寫 css 的過程中對樣式優先順序有乙個比較清晰的計算方法
.img-list > li
.img-btn-list li:first-child
.v-list a>span:nth-child(1)
flex布局的一些優點思考：
flex(彈性盒)布局乙個最大的優點就是解決不同移動裝置的適配問題。
因為flex與具體的單位無關性，所以可以解決不同專案間單位不統一，但是又需要引用公用樣式的需求。
問題2的參考**：天貓 h5頁面。 ** h5 頁面全站使用rem單位適配，而天貓頁面有百分比，rem 單位的混用。
參考**：京東 h5頁面（全站使用百分比單位解決多裝置適配的問題）。1.ios 支援彈性滑動
body2.1 改變元素位置使用 css3 新屬性，觸發 gpu (硬體加速)輔助渲染動畫擴充套件閱讀點這裡
2.2 使用 chrome 開發者工具，檢視動畫元素是否造成周圍大量 dom 節點的重排(reflow)，如果是則對動畫元素使用 absolute 定位，脫離所在文件流，減少對周圍元素的影響。
2.3 對要做動畫的元素使用backface-visibility,opacity,perspective
這裡屬性主要是設定動畫元素只渲染面向使用者的一面。減少動畫渲染對系統效能的消耗。
前端知識點總結（四）
css篇 5.visiility中有個collapse屬性的作用？用在 中，隱藏一行或一列，並會釋放空間，chrome除外。6.出現浮動的原因，怎麼清除浮動？乙個盒模型設定類浮動，導致父級物件不能被撐開，這樣就產生類浮動，需要清除浮動。清除浮動方法 計算子容器高度 新增clear both 父級 o...
前端知識點階段總結
1.不同解析度動態賦值 if window.innerwidth 1440 else dialogwidth 2.table批量刪除選中行 let rows this.refs.tablerefname.getselectallrows let ids rows.foreach item ids.p...
前端知識點
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 知識點 ul li 中預設選擇class active firstli rem...