前端開發知識點總結

paulquei 發布于2019-08-19 18:02 / 823人閱讀

摘要：正常的代碼結構應該是內容區域按鈕但是上面的代碼瀏覽器的編譯結果是下面這樣很明顯可以發現，瀏覽器的渲染結果并不是我們想要的結果。問題的參考網站天貓頁面。淘寶頁面全站使用單位適配，而天貓頁面有百分比，單位的混用。

1.a標簽的相互嵌套

很多時候我們會有下面的場景，如下圖中所顯示的那樣。點擊1區域（從圖上看1區域包含2區域）和2區域跳轉不同的鏈接。

正常的代碼結構應該是：

但是上面的代碼瀏覽器的編譯結果是下面這樣

很明顯可以發現，瀏覽器的渲染結果并不是我們想要的結果。那么是為什么呢？

根據 W3C 規范，a 標簽是不是嵌套 a 標簽的。如果出現 a 標簽嵌套 a 標簽的情況就會將 a 標簽內的 a 標簽渲染在外部。

其實按照設計圖上雖然是包含的關系，但是我們可以按照下面的方式布局，通過定位解決，不同的跳轉問題。

2.選擇器的優先級

編寫 css 的時候，都會遇到選擇器優先級的問題。這里給出一個優先級列表

div{
    font-size:12px !important; //！important 的優先級最高，而且比內聯的樣式的優先級高
}

那么除了 important 之外的選擇器呢？

元素	權重
內聯樣式	1000
ID選擇器	100
類選擇器（包括屬性選擇器和偽類）	10
元素(標簽)和偽元素選擇器	1
結合符和通配符	0

根據上面的選擇器的權重列表，就對我們在編寫 css 的過程中對樣式優先級有一個比較清晰的計算方法

.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.不同項目樣式引用單位不統一問題解決方案

flex布局的一些優點思考：

flex (彈性盒)布局一個最大的優點就是解決不同移動設備的適配問題。

因為flex與具體的單位無關性 ，所以可以解決不同項目間單位不統一，但是又需要引用公用樣式的需求。

問題2的參考網站：天貓 h5頁面。淘寶 h5 頁面全站使用rem單位適配，而天貓頁面有百分比，rem 單位的混用。

當然 flex 解決上面的問題還有一個問題就是瀏覽器的兼容性。如果自己的網站或者是 H5頁面需要兼容低版本的瀏覽器，我們可以參考使用百分比單位解決適配的問題。

參考網站：京東 h5頁面（全站使用百分比單位解決多設備適配的問題）。

4.安卓和 IOS html5 動畫卡頓解決方案 1.IOS 支持彈性滑動

body{
    -webkit-overflow-scrolling:touch;
}

2.動畫卡頓的解決方案

2.1 改變元素位置使用 css3 新屬性，觸發 GPU (硬件加速)輔助渲染動畫 擴展閱讀點這里

2.2 使用 chrome 開發者工具，查看動畫元素是否造成周圍大量 DOM 節點的重排(reflow)，如果是則對動畫元素使用 absolute 定位，脫離所在文檔流，減少對周圍元素的影響。

2.3 對要做動畫的元素使用backface-visibility,opacity,perspective

這里屬性主要是設置動畫元素只渲染面向用戶的一面。減少動畫渲染對系統性能的消耗。

{
-webkit-backface-visibility:hidden;
        backface-visibility:hidden;

        -webkit-perspective: 1000;
                perspective: 1000;
}

GPU云服務器云服務器前端開發基礎知識 linux數據結構知識點總結位段知識總結前端知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79115.html

前端開發-從入門到Offer - 收藏集 - 掘金

摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。工欲善其事必先利其器-前端實習簡歷篇 - 掘金有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助。現在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...

sf_wangchong 2019-08-20 16:10 評論0 收藏0
參加第二屆前端開發者年度大會總結

摘要：代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完美趁著還記得點什么，在這里做個自我回顧總結，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，Team 技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
轉崗測試工作三年經驗總結（前端開發轉測試）

摘要：時光飛逝，歲月如梭，我從前端開發崗位轉入測試崗位已經三年了，這期間從迷茫到熟悉，到強化，到熟練，到總結，感受還是很深的三年前的某一個晚上，我正準備下班回家，我們的項目經理把我叫到辦公司和我談話，談了很多，具體說什么不記得 ...

nemo 2021-09-10 10:51 評論0 收藏0