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