前端開發知識點總結

1.a標籤的相互嵌套

不少時候咱們會有下面的場景，以下圖中所顯示的那樣。點擊1區域（從圖上看1區域包含2區域）和2區域跳轉不一樣的連接。

正常的代碼結構應該是：

<ul>
    <li>
        <a href="#1">
            <div>內容1區域
                <a href="#2">
                    <div>按鈕2</div>
                </a>
            </div>
        </a>
    </li>
</ul>

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

很明顯能夠發現，瀏覽器的渲染結果並非咱們想要的結果。那麼是爲何呢？

根據 W3C 規範，a 標籤是否是嵌套 a 標籤的。若是出現 a 標籤嵌套 a 標籤的狀況就會將 a 標籤內的 a 標籤渲染在外部。

其實按照設計圖上雖然是包含的關係，可是咱們能夠按照下面的方式佈局，經過定位解決，不一樣的跳轉問題。

<ul>
    <li>
        <a href="#1">
            <div>內容1區域
            </div>
        </a>
        <a href="#2">
            <div>按鈕2</div>
        </a>
    </li>
</ul>

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佈局的一些優勢思考：

1. flex (彈性盒)佈局一個最大的優勢就是解決不一樣移動設備的適配問題。

2. 由於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;
}