資訊專欄INFORMATION COLUMN
摘要：正常的代碼結(jié)構(gòu)應該是內(nèi)容區(qū)域按鈕但是上面的代碼瀏覽器的編譯結(jié)果是下面這樣很明顯可以發(fā)現(xiàn)，瀏覽器的渲染結(jié)果并不是我們想要的結(jié)果。問題的參考網(wǎng)站天貓頁面。淘寶頁面全站使用單位適配，而天貓頁面有百分比，單位的混用。
1.a標簽的相互嵌套
很多時候我們會有下面的場景，如下圖中所顯示的那樣。點擊1區(qū)域（從圖上看1區(qū)域包含2區(qū)域）和2區(qū)域跳轉(zhuǎn)不同的鏈接。
正常的代碼結(jié)構(gòu)應該是：
但是上面的代碼瀏覽器的編譯結(jié)果是下面這樣
很明顯可以發(fā)現(xiàn)，瀏覽器的渲染結(jié)果并不是我們想要的結(jié)果。那么是為什么呢？
根據(jù) W3C 規(guī)范，a 標簽是不是嵌套 a 標簽的。如果出現(xiàn) a 標簽嵌套 a 標簽的情況就會將 a 標簽內(nèi)的 a 標簽渲染在外部。
其實按照設計圖上雖然是包含的關系，但是我們可以按照下面的方式布局，通過定位解決，不同的跳轉(zhuǎn)問題。
2.選擇器的優(yōu)先級編寫 css 的時候，都會遇到選擇器優(yōu)先級的問題。這里給出一個優(yōu)先級列表
div{
font-size:12px !important; //！important 的優(yōu)先級最高，而且比內(nèi)聯(lián)的樣式的優(yōu)先級高
}
那么除了 important 之外的選擇器呢？
| 元素 | 權重 |
|---|---|
| 內(nèi)聯(lián)樣式 | 1000 |
| ID選擇器 | 100 |
| 類選擇器（包括屬性選擇器和偽類） | 10 |
| 元素(標簽)和偽元素選擇器 | 1 |
| 結(jié)合符和通配符 | 0 |
根據(jù)上面的選擇器的權重列表，就對我們在編寫 css 的過程中對樣式優(yōu)先級有一個比較清晰的計算方法
.img-list > li {
width: 32rem; /*權重=11*/
}
.img-btn-list li:first-child {
margin-left: 0; /*權重=21*/
}
.v-list a>span:nth-child(1) {
margin-right: .7rem; /*權重=22*/
}
3.不同項目樣式引用單位不統(tǒng)一問題解決方案
flex布局的一些優(yōu)點思考：
flex (彈性盒)布局一個最大的優(yōu)點就是解決不同移動設備的適配問題。
因為flex與具體的單位無關性 ，所以可以解決不同項目間單位不統(tǒng)一，但是又需要引用公用樣式的需求。
問題2的參考網(wǎng)站：天貓 h5頁面。 淘寶 h5 頁面全站使用rem單位適配，而天貓頁面有百分比，rem 單位的混用。
當然 flex 解決上面的問題還有一個問題就是瀏覽器的兼容性。如果自己的網(wǎng)站或者是 H5頁面需要兼容低版本的瀏覽器，我們可以參考使用百分比單位解決適配的問題。
4.安卓和 IOS html5 動畫卡頓解決方案 1.IOS 支持彈性滑動參考網(wǎng)站：京東 h5頁面（全站使用百分比單位解決多設備適配的問題）。
body{
-webkit-overflow-scrolling:touch;
}
2.動畫卡頓的解決方案
2.1 改變元素位置使用 css3 新屬性，觸發(fā) GPU (硬件加速)輔助渲染動畫 擴展閱讀點這里
2.2 使用 chrome 開發(fā)者工具，查看動畫元素是否造成周圍大量 DOM 節(jié)點的重排(reflow)，如果是則對動畫元素使用 absolute 定位，脫離所在文檔流，減少對周圍元素的影響。
2.3 對要做動畫的元素使用backface-visibility,opacity,perspective
這里屬性主要是設置動畫元素只渲染面向用戶的一面。減少動畫渲染對系統(tǒng)性能的消耗。
{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79115.html
摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習簡歷篇 - 掘金 有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內(nèi)部推薦的機會，非常感謝他們對我的幫助。現(xiàn)在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...
摘要：代表公司去參加今年的第二屆前端開發(fā)者年度大會，散會的時候，技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完美趁著還記得點什么，在這里做個自我回顧總結(jié)，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請 代表公司去參加今年的 第二屆前端開發(fā)者年度大會，散會的時候，Team 技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結(jié)或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結(jié)或者分享會議！那么今天我就...
摘要：時光飛逝，歲月如梭，我從前端開發(fā)崗位轉(zhuǎn)入測試崗位已經(jīng)三年了，這期間從迷茫到熟悉，到強化，到熟練，到總結(jié)，感受還是很深的三年前的某一個晚上，我正準備下班回家，我們的項目經(jīng)理把我叫到辦公司和我談話，談了很多，具體說什么不記得 ...
閱讀 2439·2021-09-30 09:47
閱讀 3006·2019-08-30 11:05
閱讀 2599·2019-08-29 17:20
閱讀 1985·2019-08-29 13:01
閱讀 1787·2019-08-26 13:39
閱讀 1375·2019-08-26 13:26
閱讀 3283·2019-08-23 18:40
閱讀 1925·2019-08-23 17:09
