CSS3 & 頁面佈局

時間 2019-11-12

標籤 css3 css 頁面佈局欄目 CSS 简体版

原文原文鏈接

字體圖標(web font)

文字文件, 圖標的替換方案, 利用字體的形式來設計圖標,字體等UI
使用圖標:html

加載慢
放大失真
css顏色沒法變

語法: @font-face
網站: fontello.com
軟件: fontcreator
前端

css sprite

軟件:
css satyr
css sprite toolhtml5

選擇器

組合選擇器
屬性選擇器
僞類
僞元素選擇器
before, after 結合屬性attr, url等能夠出現比較好的呈現效果

優先級

注意把握內嵌樣式, 內部樣式, 外部樣式的使用幅度.
注重加載速度的, 可使用前二者, 好比首頁
其餘的, 可使用外部樣式, 好比base, reset等
java

注意, 繼承的優先級所在的位置
@import 導入CSS文件的另一種方法
css3

刻度

0能夠省去單位
一些屬性可能容許有負長度值，或者有必定的範圍限制。若是不支持負長度值，那應該變換到可以被支持的最近的一個長度值。
長度單位包括包括：相對單位和絕對單位。
相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有： cm, mm, q, in, pt, pc, px
- 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
- 瀏覽器的默認字體大小爲16像素，瀏覽器默認樣式也稱爲user agent stylesheet，就是全部瀏覽器內置的默認樣式，多數是能夠被修改的，但chrome不能直接修改，能夠被用戶樣式覆蓋。
- rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數
- 相對長度, 能夠經過設置根節點的值來進行統一. 即只需設置根節點, 全部rem的大小都會改變.
實現簡單的響應式佈局，能夠利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，之前的tmall就使用這種辦法

盒子模型(box model)

盒子模型也有人稱爲框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每一個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子git

邊距摺疊

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）
相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係github

內聯和塊標籤

cssreset

BFC

CSS中重要的BFC
塊級格式化上下文web

如何造成BFC
BFC造成以後有什麼特色
BFC與邊距摺疊的細節

浮動

浮動元素會從標準流中脫離
浮動元素會觸發BFC（塊級元素格式化）、不影響外邊距摺疊
float以後, 元素變爲塊標籤
若是float不是none，當display:inline-table時，display的計算值爲table；當display:inline | inline-block | run-in | table-* 系時，display的計算值爲block，其它狀況爲指定值；
float在絕對定位和display爲none時不生效
浮動元素間會堆疊
浮動元素不能溢出包含塊
浮動元素在包含塊內，當包含塊的寬度不足以容下浮動的子元素時，將自動折行；垂直方向當包含塊認爲浮動的子元素沒有高度時，子元素會溢出，BFC能解決該問題。水平方向不會溢出，垂直方向有可能會溢出
相鄰的浮動元素，left屬性最前面的元素，排在最左邊, right相反
包含塊不會計算浮動元素的高度
浮動元素和非浮動元素組合在一塊兒會重置，內容會被擠出, 可是非浮動元素的內容可能會由於浮動元素位置的緣由, 而產生圖片環繞的效果
clear 只能影響本身, 不能影響其餘元素

多種居中方法

塊標籤自身水平居中

當一個有寬度的塊標籤設置margin:0 auto時將實現自身的水平居中
注意, 通常須要寬度

塊標籤內對齊

text-align
針對內部行內標籤居中, 對塊無效

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #container {
                margin: 0 auto;
                background-color: red;
                text-align: center;
            }
            
            #div1 {
                display: inline-block;
                width: 20%;
                height: 50px;
                background: #9acfea;
            }
        </style>
    </head> 
    <body>
        <div id="container">
            <div id="div1">
                div1
            </div>
            <span>hello work</span>
        </div> 
    </body>
</html>

垂直居中1

當一個設置了定位的元素全部的偏移爲0且margin爲auto時將水平，垂直都居中，且父元素自身的高度可動態變化

position: absolute;
                /*居中開始*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                /*居中結束*/

垂直居中2

若是是單行文本，行高如塊的高度同樣時將居中，只一行，行高和元素同樣高，居中。只能夠是文字等一些行內標籤，圖片不行。

line-height: 600px;
height: 600px;

垂直居中3

讓元素相對父元素定位，偏移左50%，上50%，把自身向左移半個寬度，向上移半個高度，同時完成了水平與垂直方向的居中

垂直居中4

vertical-align這個屬性的特色，它是相對兄弟級行高（line-height）來定位
實現方式：

可使用僞元素來實現
可使用line-heigh

垂直居中5

注意：垂直的內容不能是塊元素
使用 table & table-cell 來操做

垂直居中6

在某些時候須要將小圖片與文字對象，可使用對齊的屬性absmiddle（絕對居中）

垂直居中7

CSS3中可使用transform移動元素自身的寬度與高度

#img1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);
      }

陰影

文字陰影text-shadow
盒子陰影box-shadow

背景

背景圖像尺寸background-size
背景圖像顯示的原點background-origin

僞元素

虛擬元素
僞元素不是真的元素是經過CSS虛擬出的一個元素，CSS3的語法爲了區分僞元素與僞類，使用「：：」表示，可是前期爲了兼容「：」仍然可使用
before, after 在元素內容先後虛擬出新的對象, 跟該元素是父子關係

圓角與邊框

圓角border-radius
畫圓時, 4個角圓角是高寬的一半
- 若是隻提供一個參數，將用於所有的於四個角。
- 若是提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。
- 若是提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。

邊框圖片

邊框能夠圖片化border-image

變形transform

頁面佈局(Page Layout)

做者想說的：對於佈局的分類，並非絕對的。因此此分類圖，並不絕對準確。在實際學習中，我發現有些佈局沒法直接概括入一種類型中，歸根結底是由於這些佈局在實現時結合了多種方式。對於如今的大部分網頁設計來講，功能複雜化界面設計化愈來愈高，因此這個狀況，想必也是這一趨勢形成的結果。個人理解，對於頁面佈局，最重要的是理解其思想，在實際運用中，每每是相互搭配，不能絕對死板。畢竟設計，自己就是一種創造！
對於佈局，咱們還能夠按類型和功能來進行分類。
先來看按類型分類的佈局模式：

無任何佈局模式；
表格布布局模式；
浮動佈局模式；
定位佈局模式；
多列布局模式；
Flexbox 佈局模式；
Grid 佈局模式；
不規則佈局模式；

另外除了類型分類，還能夠按功能模式來分類：

靜態佈局（Static Layout）；
流式佈局（Liquid Layout）；
自適應佈局（Adaptive Layout）；
響應式佈局（Responsive Layout）；

浮動佈局(Float Layout)

負邊距

所謂的負邊距就是margin取負值的狀況，如margin:-100px，margin:-100%。當一個元素與另外一個元素margin取負值時將拉近距離

當多個元素同時從標準流中脫離開來時，若是前一個元素的寬度爲100%寬度，後面的元素經過負邊距能夠實現上移。當負的邊距超過自身的寬度將上移，只要沒有超過自身寬度就不會上移

雙飛翼佈局

佈局要求有幾點：
一、三列布局，中間寬度自適應，兩邊定寬；
二、中間欄要在瀏覽器中優先展現渲染；
三、容許任意列的高度最高；
四、要求只用一個額外的DIV標籤；
五、要求用最簡單的CSS、最少的HACK語句；

須要使用到負邊距的概念

多欄佈局

柵格系統

柵格系統就是利用浮動實現的多欄佈局, bootstrap使用比較多
bootstrap 可視化佈局-- http://www.bootcss.com/p/layoutit/

多列布局

柵格系統並無真正實現分欄效果（如word中的分欄），CSS3爲了知足這個要求增長了多列布局模塊. 可認爲是分列布局
部分屬性:
column-count：<'integer'> | auto
功能：設置或檢索對象的列數
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<'integer'>：用整數值來定義列數。不容許負值
auto：根據 <' column-width '> 自定分配寬度

column-gap：<'length'> | normal
功能：設置或檢索對象的列與列之間的間隙
適用於：定義了多列的元素
計算值：絕對長度值或者normal

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：設置或檢索對象的列與列之間的邊框。與border屬性相似。
適用於：定義了多列的元素

columns：<' column-width '> || <' column-count '>
功能：設置或檢索對象的列數和每列的寬度
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<' column-width '>：設置或檢索對象每列的寬度
<' column-count '>：設置或檢索對象的列數

彈性佈局(Flex Layout)

IE11+zhic
display:flex 彈性盒
flex: auto; 表明不按比例, 平均分配

流式佈局(Fluid Layout)

流式佈局的特色是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）。
"流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的(他媽的, 都不能像這樣總結幹練簡潔一點的!!!)
網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。
固定佈局和流式佈局在網頁設計中最經常使用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受窗口寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣能夠根據客戶端分辨率的大小來進行合理的顯示.
　　

瀑布流佈局

瀑布流佈局是流式佈局的一種, 視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動.

插件：
- masonry是一個響應式網格佈局庫, 可使用
- imagesLoaded 圖片加載
- infinite scroll 無限加載

響應式佈局(Responsive Layout)

一些說明:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

媒介查詢的概念(Media Query)

此概念是響應式佈局的前提和關鍵。

內部樣式
media screen and (width:800px){ … }
導入樣式
import url(example.css) screen and (width:800px);
連接樣式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
XML中應用樣式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

媒介設置的語法

@media [not|only] media_type and feature

media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {
   CSS樣式...
}

and表示與，條件要同時知足；逗號表示或。

響應式柵格系統

respond.js是一個用於讓IE8如下瀏覽器支持@media queries的插件
引入方法

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->

移動優先(Mobile First)

桌面優先(優雅降級)
這是一種傳統的作法，開發項目時優先PC端，而後再經過一些hack的方法讓項目正常運行在移動端，所謂的降級能夠簡單認爲就是將一些信息隱藏，由於移動端的可視範圍有限，必須給用戶提供簡潔核心的內容。
移動優先(漸進加強)
- 對於產品設計師，一個新產品先設計移動版，而後纔是桌面版。
- 對於工程師，一個新產品，先開發移動版，而後纔是桌面版本。

這樣的好處是能把握好最核心最關鍵內容，讓界面簡潔。

視區(viewport)

可見窗口(visual viewport)
佈局窗口(layout viewport)

頁面設計(Web Design)

參考資料: http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/

響應式設計(RWD)

Responsive Web Design
響應式設計基於響應式佈局，使用同一套頁面在各類各樣不一樣大小的設備上進行大小合適、佈局（甚至功能）合理的展示。
響應式設計會根據識別屏幕寬度對於展現的具體內容塊進行位置調整，甚至展現和隱藏。
實現方式：

響應式佈局
特性檢測（用於網頁功能的漸進加強）

自適應設計(AWD)

Adaptive Web Design
自適應設計是經過服務端檢測設備類型、從 site 的不一樣版本中選擇最合適該設備類型的設計佈局/尺寸的版本進行展現。它可使用到全部（包括響應式佈局）佈局方案。
實現方式：

server-side detection
different versions to different devices
對於 PC: 可以使用流式佈局；
對於 Mobile: 可以使用流式佈局。推薦一個 Rem 解決方案：
- 設置元素（能夠包括字體等）大小爲 rem （rem 是以跟元素font-size爲基準的單位）
- 按照屏幕寬度的不一樣，JS 動態設置的 font-size 大小，元素一樣會按照屏幕寬度等比例放大縮小

RWD 和 AWD 的異同

相同點：
均針對不一樣的分辨率/device 採用不一樣的樣式和佈局達到頁面展現最優
佈局方式本質沒有差異（AWD 也 including responsive layout）
不一樣點：
前者強調同一套頁面多端兼容展現，然後者給出多套頁面，對於不一樣 device 進行了分類處理
前者是經過 CSS Media query 進行分辨率檢測，能夠實時的響應瀏覽器尺寸變化，改變元素尺寸/佈局，然後者通常是 server side detection，一次性渲染既定佈局和樣式

前端預處理技術

CSS不像其它高級語言同樣支持算術運算、變量、流程控制與面向對象特性，因此CSS樣式較多時會引發一些問題，如修改複雜，冗餘，某些別的語言很簡單的功能實現不了等。而javascript則是一種半面向對象的動態語言，有java的影子，有C的味道，中間有比其它語言多的糟粕，使用預處理辦法能夠解決這些問題。其中Less[les]與Sass是CSS的預處理技術，而CoffeeScript、TypeScript則是javascript的預處理技術。
相似.NET針對SQL語句而實現的Linq

前端框架組成

以mui爲例：
- dist: 目標, 最後輸出的結果
- fonts: web fonts
- grunt：前端工程化會用到
- js: javascript
- plugin: 插件
- template: 模板
- sass: css預處理

Less

以@爲標誌

編寫Less文件
經過解析插件把Less解析爲CSS(注意提早裝好Less編譯器)

解析方式

編譯器解析
- HBuilder的設置
在線解析
- 引入 less.js 進行解析, 發佈項目時不建議使用此方法, 消耗資源, 效率較低;
預處理
- 使用Node.js 來實現
koala-app 進行編譯

混入(Mixins)

相似函數或宏

內置變量@arguments表明全部參數(運行時)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }
注意，在參數沒有默認值的前提下使用@arguments調用時必須賦值，不然會致使整個頁面內的less語法出錯而失效
Mixins必須使用ID或者類，即#xx或.xx，不然無效
前面定義的會覆蓋後定義的, 在編譯時會統一賦後值

color:red;
//...
color:yellow;
//編譯後,@color均爲yellow

嵌套

容許將多個CSS選擇器嵌套在一塊兒，&表示當前選擇器的父選擇器
在使用嵌套規則時，須要特別注意 & 符號。內層選擇器前面的 & 符號就表示對父選擇器的引用。在一個內層選擇器的前面，若是沒有 & 符號，則它被解析爲父選擇器的後代；若是有 & 符號，它就被解析爲父元素自身或父元素的僞類。

好比，上述代碼中，因爲選擇器 h1 前面沒有 & 符號，則h1 被解析爲 header 選擇器的後代，即 header h1；而 :hover 和 .slogan 前面有 & 符號，& 符號表示對父選擇器的引用，則 &.slogan 表示父元素自身，&:hover 表示父元素的僞類，解析結果爲 a:hover 和 p.slogan。

運算

運算主要是針對任何數字、顏色、變量的操做，支持加、減、乘、除、()或者更復雜的綜合運算；

函數

Less 提供了許多用於轉換顏色，處理字符串和進行算術運算的函數
函數使用說明：http://www.lesscss.net/functions/
注意 data-uri 能夠把外部資源轉換爲內嵌資源, 能夠作作功課
loops函數

繼承

做用域

同一級的變量後者覆蓋前者，內部變量優先級高於外部變量，變量只在同一個文件中生效

註釋

真正編譯的時候, 有些註釋會被消掉

less重要的是函數的內容

Sass

以$爲標誌

Sass 的兩種語法

第一種被稱爲 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本；
第二種比較老的語法成爲縮排語法（或者就稱爲 "Sass"）

解析方式

不能直接在頁面中解析，須要使用ruby預先翻譯成css文件，而Less能夠在線動態翻譯。
可使用Koala

變量

$標記
同Less語法一致

嵌套

同Less語法一致

導入

sass中如導入其餘sass文件，最後編譯爲一個css文件，優於純css的@import
導入以後, 一些其餘文件的變量能夠跨文件使用

混入(mixin)

sass中可用mixin定義一些代碼片斷，且可傳參數，方便往後根據需求調用。今後處理css3的前綴兼容輕鬆便捷。定義時使用關鍵字@mixin，調用時使用@include
不過, Sass沒有@argument參數

mixin circle($size:100px,$color:lightblue){
    width: $size;
    height: $size;
    border-radius: $size/2;
    background: $color;
}

.cls41{
    @include circle();
}

.cls42{
    @include circle(150px);
}

.cls43{
    @include circle(200px,lightgreen);
}

擴展

sass可經過@extend來實現代碼組合聲明，使代碼更加優越簡潔

.class1{
// ...
}

.class2{
extend .class1;
}

運算

函數

流程控制

sass中和其它程序語言同樣也擁有流程控制語句，如if，for，each，while，指令，函數等。

CoffeeScript

已是過去式了...
是一種翻譯語言, 也叫預編譯語言

TypeScript

TypeScript是一種由微軟開發的自由和開源的編程語言，它是JavaScript的一個超集，擴展了JavaScript的語法，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。

在PC端開發的時候，要注意IE9如下的兼容，移動端開發時，能夠比較放心了

瀏覽器兼容性與前端性能優化

兼容性主要考慮三方面：

CSS兼容
JavaScript兼容
HTML兼容

兼容的通常標準
在不一樣的主流的瀏覽器上表現效果一致
能適應不一樣的屏幕大小
能適應不一樣的分辨率與色彩深度
瀏覽器兼容在線測試：https://turbo.net

css hack

條件註釋

IE條件註釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視爲註釋。


<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 如下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->

gt : greater than，選擇條件版本以上版本，不包含條件版本 >
lt : less than，選擇條件版本如下版本，不包含條件版本 <
gte : greater than or equal，選擇條件版本以上版本，包含條件版本>=
lte : less than or equal，選擇條件版本如下版本，包含條件版本 <=
! : 選擇條件版本之外全部版本，不管高低

樣式內屬性標記法

在CSS樣式的屬性名前或值後面添加特殊的字符讓不一樣的瀏覽器解析
http://browserhacks.com/ 在線查詢，這一個功能強大的提供各類針對性兼容辦法的網站，很是實用。
「-″下劃線是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

選擇器前綴法

@media screen\9{...}只對IE6/7生效

文檔模式 (X-UA-Compatible)

文檔模式的主要做用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪一個版本的方式來解析並渲染網頁代碼。

JavaScript兼容

第一可使用javascript操做樣式與標籤，強制瀏覽器兼容，好比先使用javascript判斷瀏覽器類型，再操做樣式與標籤。
第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容。

//檢測IE各個版本，非IE返回0
var ieVersion = /*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/ 0;
            alert(ieVersion);
            var isIE = !!window.ActiveXObject;
            alert(isIE);

前端性能優化

要提升前端性能能夠從如下幾個方面入手:
1)、儘可能減小HTTP請求數量
2)、壓縮
3)、緩存
4)、使用內容發佈網絡（CDN的使用）
5)、DNS Prefetch
6)、將CSS樣式表放在頂部
7)、將javascript腳本放在底部
8)、使用外部javascript和CSS
9)、避免重定向

減小HTTP請求

圖片地圖

可使用Dreamweaver來實現, 也叫熱點地圖. 使用一張圖片, 和定位來實現;

雪碧圖

web font

內聯資源

所謂的內聯資源就是將一些小的資源文件序列化成base64的編碼，放在CSS樣式或頁面中，在客戶端再解析，優勢是合併了小的文件，減小請求，把二進制變成了字符串方便存儲，可是會出一個沒有意義的長字符串影響開發時閱讀代碼，另外在某些狀況下將失去圖片的緩存。
該技術, 比較適合複用度比較高, 比較小的圖片\文本\字體
軟件: JSCompress.cn 進行base64編碼

合併資源

將多個小的離散的css、js文件合併，注意粒度，把多個請求變成1個請求
軟件:
copy a.js+b.js+c.js abc.js /b
Jscompres
CssGaga

壓縮

GZIP壓縮

GZIP，即網頁壓縮，是由WEB服務器和瀏覽器之間共同遵照的協議
Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件

實現

開啓Tomcat Gzip壓縮
IIS 壓縮設置
壓縮JavaScript, css
優化圖像(壓縮圖片)
jscompress
壓縮HTML

緩存

http頭部緩存

<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />
Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求新內容，可使用客戶端緩存的內容，可是請求仍是會發生，狀態爲304。瀏覽器會默認開啓緩存功能。

本地存儲

LocalStorage、SessionStorage、Web SQL Database

離線緩存

ApplicationCache，在斷開服務器時仍然可使用客戶端的緩存文件，繼續瀏覽。

動態頁面靜態化

將動態內容，須要複雜計算的內容變成靜態的如HTML、JavaScript
這個技術, 能夠試用.

內容分發網路(CDN)

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。

DNS Prefetch

DNS Prefetch 是一種 DNS 預解析技術。當你瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行 DNS 的解析，減小用戶等待時間，提升用戶體驗。

問題思考: 打開頁面時只產生一個HTTP請求，請求大小不超過10K，緩存?

參考資料

流佈局與響應式佈局有什麼區別?, https://www.zhihu.com/question/21679928
聊聊 CSS 中的佈局模式, ttps://yq.aliyun.com/articles/608933#
前端佈局方式彙總及概念淺析, http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/
Web網頁佈局的主要方式, https://juejin.im/post/59f706a8f265da43094471a7?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
自適應佈局教程--阮一峯, http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
Flex 佈局教程--阮一峯, http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
解剖CSS佈局原理, https://segmentfault.com/a/1190000009139500
PC端CSS佈局彙總, https://segmentfault.com/a/1190000012257390
網路的演變, http://www.evolutionoftheweb.com/?hl=zh-cn