前端開發必會的HTML/CSS硬知識 （二）

 

​文/小魔女

本文簡介

• 前端開發系列的第二篇文章
• 基礎知識就像是一把寶劍，能讓你馳騁在前端領域的戰場
• 知識亦有溫度，讓咱們對新知識永遠保持熱度吧

html渲染、css解析

• 在面試中，這部分基礎知識，很是常見。
• 將以最簡潔的文字，讓讀者掌握。

瀏覽器從開始解析HTML到渲染結束都經歷了什麼？

• 解析HTML文件，建立DOM樹
• 解析CSS，造成CSS對象模型
• 將CSS與DOM合併，構建渲染樹（rendering tree）
• 佈局和繪製

瀏覽器解析CSS是從左開始仍是從右？爲何？

• 從右。
• 由於從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點）；
• 而從左向右的匹配規則的性能都浪費在了失敗的查找上面。

reflow(迴流)和repaint(重繪)的區別？

迴流必定會觸發重繪，重繪不必定觸發迴流。

reflow:改變元素在網頁中的佈局和位置

致使迴流發生的狀況：

1. 改變窗口大小
2. 改變文字大小
3. 內容的改變，如用戶在輸入框中敲字
4. 激活僞類，如:hover
5. 操做class屬性
6. 腳本操做DOM
7. 計算offsetWidth和offsetHeight
8. 設置style屬性

對應的css屬性以下：

1. 盒子模型相關屬性
2. 定位及浮動屬性
3. 節點內部的文字結構


repaint:改變不影響元素。在網頁中的位置的元素樣式時，根據瀏覽器新屬性從新繪製一次。不會帶來從新佈局。

致使重繪發生的狀況：

1. 改變visibility
2. outline
3. 字體顏色、背景色

致使重繪的css屬性以下：


css 隱藏屬性的對比

• display:none; 重排 （不佔空間）
• visibility: hidden; 重繪 （佔空間）
• overflow:hidden; 重繪+重排 （佔空間，超出隱藏）

HTML的解析會由於什麼阻塞？靜態文件引用如何放置合理？

1. css加載不會堵塞html解析
2. css加載會堵塞dom樹渲染
3. css加載會堵塞js語句的執行
4. js的加載會堵塞html解析

css文件放前面，js文件放在html和css的後面

如何作頁面加載優化（減小白屏時間，加快頁面打開速度）

1. cdn加速
2. css代碼壓縮
3. 合理使用瀏覽器緩存（設置cache-control,expires,E-tag。注意，文件更新後，緩存帶來的影響。能夠在文件名字後面加一個版本號）
4. 減小http請求

爲何要用語義化標籤？

• 增長代碼的可讀性，以及便於代碼維護
• 便於SEO
• 讓瀏覽器或者網絡爬蟲更好地解析以及分析內容

如何適配移動端？

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
複製代碼

圖片適配

//使用這個
img {max-width:100%} //最大寬度顯示爲自身的100% 

//不用這個
img {width: 100%} //寬度爲外層容器的寬度 圖片會被無情地拉伸
複製代碼

media 媒體查詢

media screen and (min-width:1000px) {
    body{
        background:red;
    }
}
複製代碼

動態rem方案（跟媒體查詢配合，實現響應式佈局）

• 爲html設置基準值 font-size:100px
• 頁面上的使用，margin:500px 400px; => margin:5rem 4rem; 由於rem是相對根html計算的 x/100 = ?rem
• 根據當前屏幕的寬度和設計稿的寬度，算出html的基準值 假設當前屏幕寬度爲375px 設計稿上是640px
• 當前屏幕寬度/設計稿寬度 = x / 100 => x = 當前屏幕寬度/設計稿寬度*100 = 58.59375 px

動態計算 js代碼

(function (){
    const desWid = 640
    const winWid = document.documentElement.clientWidth
    const oMain = document.getElementById('main')
    const ratio = winWid / desWid
    if(winWid > desWid) {
        oMain.style.width = desWid + 'px'
        oMain.style.margin = '0 auto'
        return
    }

    oMain.style.fontSize = ratio*100 + 'px' 
} ())
複製代碼

CSS小知識

除px還有什麼單位？都如何計算？

任意瀏覽器的默認字體高都是16px。

• px：相對於顯示屏分辨率而言
• em: 若是子元素沒有設置font-size,將會相對於父元素 .father{font-size:16px;} .son{font-size:2em} 2em = 2*16
• rem：相對於html根元素 html{font-size:20px;} .div{font-size:2rem} 2rem = 2*20
• rpx: 微信小程序（規定屏幕寬爲750rpx）

如何實現0.5px的邊框？

1. transform:scale(0.5)

   • 下邊框有線
     <style> div{ width: 200px; height: 200px; position: relative; background-color: pink; } div::before{ content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; border-bottom: 1px solid black; transform: scale(0.5); }
     11
   • 四條邊都有線
     div{ width: 200px; height: 200px; position: relative; background-color: pink; } div::before{ content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid black; transform-origin: 0 0; /* 設置元素基點 x和y座標 */ transform: scale(0.5); }

2. 漸變

   <style>
       div{
           width: 200px;
           height: 200px;
           position: relative;
           background-color: pink;
       }
       div::after{
           content: ' ';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 1px;
           background-image:linear-gradient(0deg, transparent 50%, black 50%)
       }
   </style>
   複製代碼

寫個波浪線

<style>
       div{
        height: 0.25em;
        width: 20rem;
        background-size: 0.5em 0.5em;
        background-image: linear-gradient(45deg, transparent 45%, red 55%, transparent 60%),  linear-gradient(135deg, transparent 45%, red 55%, transparent 60%);
        background-repeat: repeat-x;
    }
      </style>
複製代碼

禁止用戶操做

如何禁止用戶縮放？

• 縮放係數是0.0-1.0 用戶縮放選項是yes|no
• ios10以後不接受meta標籤，監聽gesturestart,阻止默認事件

  document.addEventListener('gesturestart',function(e) { e.preventDefault() })

如何禁止用戶全選文字內容？

• css

  body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

• js

在須要禁止的dom加上這句

ontouchstart="return false;"
複製代碼

備註： 手機uc瀏覽器，meta標籤的name=browsermode content= application 這樣就沒法調起長菜單

魔女有話說

在權貴主導的世界裏想財務自由，你首先得努力變成和他們同樣的人，剩下的就交給命運吧！ 

本文使用 mdnice 排版