CSS元素浮動的本質是什么？

經典三欄式網頁布局是如何實現的？

一般前端網頁優化的關鍵點

關于CSRF網站攻擊

CSS 元素浮動的本質是什么？

浮動是  Html CSS 布局的關鍵知識點，不識浮動不算懂 CSS，真正了解了浮動，其它概念迎刃而解。

先看一個問題，在 Html 元素的渲染解析中，如何實現圖片在文章中靠左顯示？就像 Word 排版中的文字環繞效果：

解決方法就是給 HTML 標簽添加一個 float CSS 屬性，也就是浮動屬性。對于容器，浮動讓子元素按一個方向排行，例如“float:left”，讓子元素按從左到右的順序排列；對于元素，浮動讓元素定位于父容器中的某一邊或緊挨在某一個兄弟元素之后。

因浮動自動累加寬度，從而實現自適應大小的容器或按鈕，這是浮動的價值。

但在子元素使用了浮動以后，父容器可能因子元素浮動而喪失高度。如下所示：

在上圖中，左圖像與右文本是有高度的，但因為使用了浮動屬性，致使其父容器——即最上面的藍色 div 的高度為 0。

使用 clear CSS 屬性可以解決這個問題。最常見的用法，是在容器的尾部添加空標簽，這個標簽具有 clear 樣式，如下所示：

.clear{

clear:both;

}

some text

在上面的代碼中，倒數第 2 行即是一個帶有clear樣式的空標簽。也可以使用

或 ，甚至附有 clear 樣式的 ::after 都可以。clear 樣式的意義，在于重置瀏覽器的渲染光標，使原本被忽略計算的浮動元素的高度，重新計算進來。clear 樣式最常用的屬性值是“clear: both”。

float不但可以從左向右浮動（float:left），還可以從右向左浮動（float:right），以此實現自適應內容的左對齊、或右對齊布局。但如果僅是實現左對齊布局，有另外一個 CSS 樣式同樣可以達到：display:inline-block。inline-block 的意義是子元素以塊元素方式，從左向右依次排列。使用這種方式，不需要使用 clear 清除浮動。

在瀏覽器布局中最常見的麻煩是瀏覽器兼容。在 IE6 瀏覽器中，如果將一個容器標簽設置浮動，同時設置了 margin-left、margin-right 為10px，那么實際兩邊的間隙就是 20px。解決方法也很簡單，給容器標簽添加“_display:inline”樣式。注意，這個帶前置下劃線的 _display 只有IE可以解析，其它瀏覽器會忽視。這是 CSS 作為描述性語言的優勢，誰聽懂誰翻譯，聽不懂沒關系。

經典三欄式布局是如何實現的？

經典三欄布局效果是這樣的：

left 與 right 區域是固定寬度，center 區域隨瀏覽器窗口大小而變化，內容自動向下伸拉。這是前端網頁開發的入門式布局，實現起來也相當簡單。

總體來講，是以浮動 + 相對定位實現的。以下是 Html 代碼：

#header

#center

#left

#right

#footer

因為 center 區域要隨瀏覽器動態伸拉，所以它的寬度是 100%，給左右兩個邊欄留出的寬度是靠父容器的 margin-left、margin-right 樣式設置的。代碼如下所示：

#container{

padding-left:200px;/* LC width */

padding-right:150px;/* RC width */

}

#center{

background-color:#e9e9e9;

width:100%;

}

實現這個布局效果的最關鍵代碼在于左、右邊欄元素的 margin-left、margin-right 屬性。如下所示：

#left{

width:200px;/* LC width */

margin-left:-100%;

right:200px;/* LC width */

}

#right{

width:150px;/* RC width */

margin-right:-150px;/* RC width */

}

左邊欄元素設置“margin-left: -100%”，相當于在center區域的左邊框折返，所以“right: 200px”樣式的設置效果，是緊挨 center 左邊框向左延伸 200 個像素。右邊欄設置“margin-right: -150px”樣式的效果，是以 center 右邊框向右延伸 150 個像素。

浮動是在 columns 類名上設置的：

#container.columns{

float:left;

position:relative;

}

每欄都有浮動，并且使用相對定位，所以上面才可以對它們進行 margin 關系定位。

一般前端網頁優化的關鍵點

文件合并

在上面的配置文件中，entry 是入口文件列表，output 是輸出配置。

除了可以打包 JS 文件，webpack 還可以打包 css 文件、壓縮 Html/JS/CSS 文件內容等。這些功能也是通過在配置文件中添加描述信息實現的。

除了 webpack，glup 也可以合并壓縮前端文件。原理與之類似。

CSS 精靈圖

在 CSS 中可能會引用很多圖片，將這些圖片合并成一個圖片，就是 CSS 精靈圖。原圖在二維精靈圖平面上都有自己的絕對定位和寬高。在使用時，使用 background-image 指向精靈圖，使用 background-position 指定定位就可以了。

使用 webpack，可以將多張圖片自動合并成精靈集，并輸出一份匹配的 sass 樣式文件。webpack 減去了設計師手動合圖、排圖、編寫相應 CSS 樣式的麻煩。

關于 sass

sass 是一種設計師使用的 css 編譯工具，這種工具處理后綴名為 .sass 的文件，將它們編譯為 css 文件。在 sass 文件中，可以使用變量、可以計算屬性的值，如下所示：

$side:left;

.rounded{

border-#{$side}-radius:5px;

margin:(14px/2);

}

使用 sass，可以顯著提高設計師調試 UI 的效率。

延時加載 JS 文件

HTML 4.01 為 script 標簽添加了一個新屬性：defer，如下所示：

有這個屬性，代表該腳本不會影響頁面的 HTML 構建，瀏覽器可以等頁面解析完之后再來處理這個腳本。

還有一個屬性：async，表明當前腳本文件可以異步加載，無需等待。一般用于處理外部網站腳本。如果沒有這個屬性，當外部網站網速很慢時，會非常影響瀏覽體驗。

動靜分離

避免無效的 404 頁面

時間長了，網站越做越大，有些頁面原來能訪問，后來可能就無法訪問的 404 頁面了。瀏覽器并不知道哪個頁面是 404 頁面，對于曾經是 404 的頁面，瀏覽器也不敢斷定以后都是 404 頁面。404 頁面對用戶來講，體驗不好；對搜索引擎來講，也會因此降低收錄權重。

解決的方法是，可以用 Go 語言寫一個簡單的爬蟲工具，定時爬自己的網站，只要 Http 狀態碼返回 404 就記錄下來。然后將 404 列表統一發給后端程序員處理。

除了 404 頁面，與此同類需要注意的優化，是 img 標簽的 src 屬性為空，這也會造成瀏覽器發送空請求至服務器。也可以使用同樣的檢測工具，檢測頁面中哪些 src 屬性沒有值。這些 src 空值的情況，可能出現于某些動態頁面的動態變量綁定中。

設置 Html 頁面緩存（cache-control 與 expires）

cache-control 控制頁面的緩存行為。expires 用于定義緩存過期時間，它接受一個 GMT 時間（格林尼治時間）。如果緩存未過期，瀏覽器將從本地緩存中拉取內容。

對于 cache-control 的值，no-cache 表示從來緩存，no-store 表示從不保存緩存或保存于瀏覽器臨時文件夾中，public 表示任何情況下都可以緩存該資源，private 表示當前內容有用戶權限緩存分別，max-age 表示希望接收一個不大于設定時間的資源。

Cache-Control 在使用時允許自由組合，例如：

Cache-Control:max-age=3600,must-revalidate

其中 must-revalidate 表示當前資源一定是向原服務器發去的請求，而非代理服務器上的緩存。

在 nginx 中，可以使用 expires 統一設置站點靜態資源的緩存時間：

location~.*\.(gif|jpg|jpeg|png|bmp|swf)${

expires3d;

}

開啟 nginx gzip 壓縮

在 nginx.conf 中使用如下信息開啟 gzip 壓縮功能：

gzip on;

gzip_disable"MSIE [1-6].";

gzip_types text/plain application/x-javascript text/css text/javascript image/jpeg image/gif image/png;

以上配置，可對靜態頁面、JS 文件、樣式表文件、圖片資源進行壓縮。其中 gzip_disable 設置 IE6 不啟用 gzip，因為 IE6 對gzip解包支持不好，會造成頁面假死，影響用戶體驗。

在 nginx 中開啟 Etag 設置

在 nginx 中開啟 Etag，只需要一行代碼：

http{

etag  on;

}

使用nginx -s reload 重啟即可生效。開啟 Etag 可以顯著提高網站性能，但是這背后的機理是什么呢？

當瀏覽器向服務器第一次請求某網頁時，服務器會返回一個 HTTP 狀態 200，同時返回該頁面的上次修改時間，格式如下：

Last-Modified:Fri,12May200618:53:33GMT

第二次訪問同一個網頁時，瀏覽器會自動向服務器訪問，在該時間之后頁面有沒有改動，格式如下：

If-Modified-Since:Fri,12May200618:53:33GMT

如果沒有改動，服務器會返回一個 HTTP 狀態碼 304（代表頁面無變化）及一個空報文，避免重復加載。

但是服務器端判斷 If-Modified-Since 的最小單位是秒，如果間隔小于1秒，服務器會誤報；有時候服務器也不能精確取得文件的修改時間，致使誤報等等，基于這些情況，HTTP/1.1 協議引入了 Etag。這可以理解為是一個網頁文件的版本號，格式如下：

ETag:"50b1c1d4f775c61:df3"

瀏覽器第一次某網頁時，服務器會返回一個 Etag。瀏覽器在第二次向服務器重復加載同一個網頁時，會同時詢問：

If-None-Match:W/"50b1c1d4f775c61:df3"

如果文件沒有變化，服務器直接返回304狀態碼。

盡量減少 cookie

cookie 出現在每次網頁請求的請求頭中，適當控制可以有效降低報文大小。

路由跟蹤測試

在 windows 上使用 tracert，在 mac 上使用 traceroute，用于檢測從當前電腦端到達指定服務器經過哪些節點，觀察哪些節點影響了頁面加載速度，有針對性地優化。在 mac 上 trace 某度的截圖如下：

關于 CSRF 網站攻擊

CSRF 是 Cross Site Request Forgery 的簡稱，學名跨站請求偽造，主要通過偽造登陸用戶的 cookie 取得非法權限。用戶登陸網站后會在本地留下 cookie，如果在未退出網站之前訪問了一些非法站點，這些 cookie 信息可能就被不法分子利用干一些壞事情。有時候爬蟲工具也會偽造 cookie，以便抓取只有登陸用戶才能抓取的頁面信息。

防范 CSRF 最普通的手段是使用 HTTPS 通訊協議，并在請求頭 Header 中放置一個自定義的驗證字符串。當用戶登陸網站時，服務器生成 token、將 token 保存至數據庫并返回給客戶端，客戶端在本地保存并在下一次發出網絡請求時在報文中帶上該 token。如果超時，或者收到的 token 與庫中不一致，服務器視為請求無效。

該驗證手段在 App 開發、小程序開發中也經常用到。

上一篇：后端開發常見問題

下一篇：設計開發常見問題