.CSS盒模型，在不同瀏覽器的差異

css 標準盒子模型

css盒子模型 又稱為框模型（Box Model），包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如下圖：

圖中的內層是content依次是padding border margin。通常我們設置背景時就是內容、內邊距、邊框這三部分，如果border設置顏色的時候會顯示boder顏色當boder顏色是透明時會顯示background-color的顏色。而該元素的子元素的是從content開始的。而外邊距是透明的，不會遮擋其他元素。

元素框的總寬度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right;

元素框的總高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

IE盒子模型

IE盒子模型如下圖：

圖中的內層是content依次是content padding border。通常我們設置背景時就是內容、內邊距、邊框這三部分。而外邊距是透明的，不會遮擋其他元素。

元素框的總寬度=width（padding-left+padding-right+border-left+border-right)；

元素框的總高度=height（padding-top+padding-bottom+border-top+border-bottom）;

兩個模型寬度和高度的計算（是不一樣的）

w3c中的盒子模型的寬:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:包括border+padding+width;

上面的兩個寬度相加的屬性是一樣的。因此我們應該選擇標準盒子模型，在網頁的頂部加上 DOCTYPE 聲明。

2.CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則

css選擇器種類有：

通用選擇器：*

id選擇器：#header{}

class選擇器：.header{}

元素選擇器：div{}

子選擇器：ul > li{}

后代選擇器：div p{}

偽類選擇器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}

偽元素選擇器: :after、:before等,例如：li:after

屬性選擇器: input[type="text"]

組合選擇器：E,F/E F（后代選擇器）/E>F（子元素選擇器）/E+F（直接相鄰元素選擇器----匹配之后的相鄰同級元素）/E~F（普通相鄰元素選擇器----匹配之后的同級元素）

層次選擇器：p~ul 選擇前面有p元素的每個ul元素

css選擇器優先級：

• 選擇器優先級由高到低分別為：
  !important > 作為style屬性寫在元素標簽上的內聯樣式 >id選擇器>類選擇器>偽類選擇器>屬性選擇器>標簽選擇器> 通配符選擇器（* 應少用）>瀏覽器自定義；

• 當比較多個相同級別的CSS選擇器優先級時，它們定義的位置將決定一切。下面從位置上將CSS優先級由高到低分為六級：
  1、位于<head/>標簽里的<style/>中所定義的CSS擁有最高級的優先權。
  2、第二級的優先屬性由位于 <style/>標簽中的 @import 引入樣式表所定義。
  3、第三級的優先屬性由<link/>標簽所引入的樣式表定義。
  4、第四級的優先屬性由<link/>標簽所引入的樣式表內的 @import 導入樣式表定義。
  5、第五級優先的樣式有用戶設定。
  6、最低級的優先權由瀏覽器默認。

使用場景：

• class使用場景：需要某些特定樣式的標簽則放在同一個class中，需要此樣式的標簽可再添加此類。（class不可被javascript中的GetElementByID函數所調用）
• id使用場景：1、根據提供的唯一id號快速獲取標簽對象，如：document.getElementById(id) ；2、用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>，表示單擊此label標簽時，id為userid的標簽獲得焦點

CSS哪些屬性可以繼承？css繼承特性主要是指文本方面的繼承(比如字體、顏色、字體大小等)，盒模型相關的屬性基本沒有繼承特性。

不可繼承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可繼承的：
visibility和cursor

終極塊級元素可繼承的：
text-indent和text-align

內聯元素可繼承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可繼承的：
list-style、list-style-type、list-style-position、list-style-image

常用at規則及使用示例：

• @charset
• @import
• @namespace
• @document
• @font-face
• @keyframes
• @media
• @page
• @supports

/*定義字符集*/
@charset "utf-8"
/*導入css文件*/
@import "base.css"
/*自定義字體*/
@font-face {}
/*聲明CSS3 animation動畫關鍵幀*/
@keyframes fadeIn {}
/*媒體查詢*/
@media{}

3.CSS偽類和偽元素有哪些，它們的區別和實際應用

偽類的例子有：

:hover

:active

:first-child

:visited

等。

偽元素的例子有：

:first-line

:first-letter

:after

:before

偽類和偽元素的根本區別在于：

它們是否創造了新的元素(抽象)。從我們模仿其意義的角度來看，如果需要添加新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上添加類別的，就是偽類。

偽元素在一個選擇器里只能出現一次，并且只能出現在末尾;

偽類則是像真正的類一樣發揮著類的作用，沒有數量上的限制，只要不是相互排斥的偽類，也可以同時使用在相同的元素上。

實際使用：

偽類用一個冒號表示 :first-child
偽元素則使用兩個冒號表示 ::first-line

4.CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理

1）、static定位(普通流定位) -------------- 默認定位

2）、float定位(浮動定位) 例：float:left;

有兩個取值：left(左浮動)和right(右浮動)。浮動元素會在沒有浮動元素的上方，效果上看是遮擋住了沒有浮動的元素，有float樣式規則的元素是脫離文檔流的，它的父元素的高度并不能有它撐開。

3）、relative定位(相對定位) position:relative;

相對本元素的左上角進行定位，top,left,bottom,right都可以有值。雖然經過定位后，位置可能會移動，但是本元素并沒有脫離文檔流，還占有原來的頁面空間。可以設置z-index。使本元素相對于文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線。

相對定位最大的作用是為了實現某個元素相對于本元素的左上角絕對定位，本元素需要設置position為relative。

4）、absolute定位(絕對定位) position:absolute;

相對于祖代中有relative(相對定位)并且離本元素層級關系上是最近的元素的左上角進行定位，如果在祖代元素中沒有有relative定位的，就默認相對于body進行定位。

絕對定位是脫離文檔流的，與浮動定位是一樣的效果，會壓在非定位元素的上方。可以設置z-index屬性。

雪碧圖實現原理：

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。

5.寫出盡可能多的水平垂直居中的方案并對比它們的優缺點

行內元素水平居中：

首先看它的父元素是不是塊級元素，如果是，則直接給父元素設置 text-align: center;

如果不是，則先將其父元素設置為塊級元素，再給父元素設置 text-align: center;

塊級元素水平居中(定寬度)：

1）需要誰居中，給其設置 margin: 0 auto; （作用：使盒子自己居中）

2) 首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);

塊級元素水平居中(不寬度)：

1) 默認子元素的寬度和父元素一樣，這時需要設置子元素為display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設置 text-align: center;

2) 首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

利用css3新增屬性transform: translateX(-50%);

使用flexbox布局實現水平居中（寬度定不定都可以）:

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

單行的行內元素垂直居中:

只需要設置單行行內元素的"行高等于盒子的高"即可；

多行的行內元素垂直居中:

使用給父元素設置display:table-cell;和vertical-align: middle;屬即可；

塊級元素垂直居中方法一：使用定位

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中；

定高度：設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);

不定高度：利用css3新增屬性transform: translateY(-50%);

塊級元素垂直居中方法二：使用flexbox布局實現（高度定不定都可以）

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

水平垂直居中-已知高度和寬度的元素：

方法一：

設置父元素為相對定位，給子元素設置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

水平垂直居中-未知高度和寬度的元素：

方法一：使用定位屬性

設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用flex布局實現

設置父元素為flex定位，justify-content: center; align-items: center;

6.BFC的布局規則，實現原理，可以解決的問題

BFC直譯為塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與外部毫不相干。注意：可以把BFC理解為一個大的盒子，其內部是由Block-level box組成的

BFC布局規則：

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

BFC的作用及原理：

1. 自適應兩欄布局

2. 清除內部浮動

3. 防止垂直 margin 重疊

BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

7.CSS函數有哪些？

根據w3cplus中可以劃分為以下幾類：

屬性函數：attr()；

背景圖片函數：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()

顏色函數：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

圖形函數：circle()、ellipse()、inset()、polygon()、path()

濾鏡函數：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

轉換函數：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

數學函數：calc()、min()、max()、mixmax()、repeat()；

緩動函數：cubic-bezier()、steps()；

其他函數：counter()、counters()、toggle()、var()、 symbols()。

8.PostCSS、Sass、Less的異同，以及使用配置，至少掌握一種

● 編譯環境不一樣，Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用Less，然后編譯成css文件，直接放到項目中；

● 變量符號不一樣，Less是@，而Scss是$；

● 輸出設置，Less沒有輸出設置，Sass提供4種輸出選項：nested, compact, compressed 和 expanded；

● 處理條件語句，Sass支持條件語句，可以使用if{}else{},for{}循環等等。LESS的條件語句使用有些另類，他不是我們常見的關鍵詞if和else if之類，而其實現方式是利用關鍵詞“when”；

● 引用外部文件，文件名如果以下劃線_開頭的話，Sass會認為該文件是一個引用文件，不會將其編譯為css文件，ess引用外部文件和css中的@import沒什么差異；

● 工具庫的不同，Sass有工具庫Compass, 簡單說，Sass和Compass的關系有點像Javascript和jQuery的關系,Compass在Sass的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是采用Less語法編寫。

● PostCSS介紹：

PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二個就是調用插件來處理 AST 并得到結果。因此，不能簡單的把 PostCSS 歸類成 CSS 預處理或后處理工具。PostCSS 所能執行的任務非常多，同時涵蓋了傳統意義上的預處理和后處理。

● PostCSS使用

PostCSS 一般不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件并進行配置。現在經常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官網的插件庫進行查詢。下面是官網地址：

PostCSS官網地址

9.CSS模塊化方案有哪些？

css的模塊化方案可能和js的一樣多，下面簡單介紹幾種主要的模塊方案。

oocss

面對對象的規則，主要的原則是兩種：分離結構和外觀，分離容器和內容。

名詞解釋

分離結構和外觀：增加可重復的設計單元，同時去推進產品和ui對這方面的思考，比如下面的css使用時對象模式的命名和模塊化規則。

分離容器和內容：指的是樣式的使用不與元素位置唯一匹配，在任何位置你都可以使用這個樣式，如果你不適用這個樣式，會保持默認的樣式。

實例

// dom結構<div class="toogle simple">  <div class="toogle-control open">    <div class="toogle-tittle">標題</div>  </div>  <div class="toogle-details "></div></div>

// 模塊的標記 唯一標識.toggle{}// 皮膚樣式的寫法，如果基本結構是一樣的，你可以用complex的一個輔助樣式.toggle.simple{}// 是否做嵌套寫法 相信很多預處理器的部分會支持嵌套 然后很多人會這樣寫,不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實你會這樣組織么 不是很建議 這樣會降低查詢效率 如果能確認唯一性的時候 其實直接寫子即可.toogle{}.toogle-control{}.toogle-details{}復制代碼

smacss

sma和oocss有很多類似之處，但區分的地方有很多，主要是對樣式的分類。分別是：基礎、布局、模塊、狀態、主題

基礎

可以適用于任何位置，我也稱全局樣式

布局

主要是用來實現不同的特色布局，提高布局的復用率，

模塊

設計中的模塊化，可重復使用的一個單元，一般是dom+css的耦合綁定。

狀態

描述在特定狀態下的布局或者模塊的特殊化表現，這里我覺得要推薦下《css禪意花園》，在dom結構不變的情況下，可以通過css的皮膚化實現樣式的改版。

主題

與狀態相比更加定制的是，我們會針對有些特殊的模塊，進行主題的設置，包括一系列的顏色、尺寸、交互等進行重度設計，參數化設計。

案例

// dom結構<div class="toogle toogle-simple">  <div class="toogle-control is-active">    <div class="toogle-tittle">標題</div>  </div>  <div class="toogle-details "></div></div>復制代碼

與oocss相比，其實大部分設計思路是一樣的，以一個類作為css的作用域（作用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區別就是針對皮膚和狀態的不同書寫規則。

bem

bem就是塊、元素、修飾符的思維去寫樣式。它不涉及具體的css結構，只是建議你如何命名css.

案例

// dom結構<div class="toogle toogle--simple">  <div class="toogle_control toogs="toogle_details "></div></div>s="toogle_details "></div></div>

解釋

• 塊級：所屬組件的名稱
• 元素：元素在組件里的名稱
• 修飾符：任何與元素修飾相關的類

style-components

徹底拋棄 CSS，用 JavaScript 寫 CSS 規則,點擊style-components進入github的主頁。

CSS Modules

使用JS編譯原生的CSS文件，使其具備模塊化的能力，點擊CSS Modules進入github主頁。

這些模塊化方案都是各有優缺點，如命名約定：命名復雜、缺乏擴展、 CSS Modules當然也有一些缺點(你得先學會它再去談優劣)。在眾多解決方案中，沒有絕對的優劣。還是要結合自己的場景來決定。

10.CSS如何配置按需加載

● 使用require.js按需加載CSS

//模塊test.js
define(['css!../css/test.css'], function() { //先加載依賴樣式
    var test={};
    return test;
});

//配置
require.config({
    map: { //map告訴RequireJS在任何模塊之前，都先載入這個模塊
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    }
});

//調用
require(['test'])

webpack配置CSS的按需加載

這里以ant desgin css 為例：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    plugins: [
      ["import",{libraryName: "antd", style: 'css'}],   //只需加一行，手動劃重點antd按需加載
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
            },
          },
        },
      ],
    ],
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction,
  },
}

11. 如何防止CSS阻塞渲染

默認情況下，CSS 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內容，直至 CSSOM 構建完畢。請務必精簡您的 CSS，并利用媒體類型和查詢來解除對渲染的阻塞。

我們可以通過 CSS“媒體類型”和“媒體查詢”來解決這類用例：

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒體查詢由媒體類型以及零個或多個檢查特定媒體特征狀況的表達式組成。

例如，上面的第一個樣式表聲明未提供任何媒體類型或查詢，因此它適用于所有情況，也就是說，它始終會阻塞渲染。第二個樣式表則不然，它只在打印內容時適用---或許您想重新安排布局、更改字體等等，因此在網頁首次加載時，該樣式表不需要阻塞渲染。最后，最后一個樣式表聲明提供由瀏覽器執行的“媒體查詢”：符合條件時，瀏覽器將阻塞渲染，直至樣式表下載并處理完畢。

12.熟練使用CSS(3)實現常見動畫，如漸變、移動、旋轉、縮放等等

我把一些常用的CSS動畫效果代碼上傳到github了，有需要的同學可以點擊下載，CSS常用動畫；

另外還有一些CSS動畫庫，比如：animate.css、magic.css、Hover.css、

13.CSS瀏覽器兼容性寫法

1. 瀏覽器CSS樣式初始化

由于每個瀏覽器的css默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼，在所有CSS開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣。

*{
 margin: 0;
 padding: 0;
}

關于瀏覽器CSS樣式初始化，經驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，Normalize.css，github star數量接近3.4萬，選取展示其中幾個樣式設置，如下：

html {
 line-height: 1.15; /* Correct the line height in all browsers */
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

body {
 margin: 0;
}

a {
 background-color: transparent; /* Remove the gray background on active links in IE 10. */
}

img {
 border-style: none; /* Remove the border on images inside links in IE 10. */
}

通過CSS樣式初始化，相信能解決不少常規的兼容性問題，接下來再看看瀏覽器的私有屬性。

2. 瀏覽器私有屬性

我們經常會在某個CSS的屬性前添加一些前綴，比如-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性。

為什么會出現私有屬性呢？這是因為制定HTML和CSS標準的組織W3C動作是很慢的。

通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很復雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經夠成熟了，就會在瀏覽器中加入支持。

但是為避免日后W3C公布標準時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日后W3C公布了標準，border-radius的標準寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：

• -moz代表firefox瀏覽器私有屬性
• -ms代表IE瀏覽器私有屬性
• -webkit代表chrome、safari私有屬性
• -o代表opera私有屬性

對于私有屬性的順序要注意，把標準寫法放到最后，兼容性寫法放到前面

 -webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
 -moz-transform:rotate(-3deg); /*為Firefox*/
 -ms-transform:rotate(-3deg); /*為IE*/
 -o-transform:rotate(-3deg); /*為Opera*/
 transform:rotate(-3deg);

每個CSS屬性寫這么一堆兼容性代碼，無疑是對生命最大的浪費，后面我們會講一下通過自動化插件來處理這塊。

3. CSS hack

有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack。

• 各瀏覽器常用兼容標記一覽表:

以上 .bb 可更換為其它樣式名）

4.自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內容里，使用Can I Use（caniuse網站）的數據來決定哪些前綴是需要的。

把Autoprefixer添加到資源構建工具（例如Grunt）后，可以完全忘記有關CSS前綴的東西，只需按照最新的W3C規范來正常書寫CSS即可。如果項目需要支持舊版瀏覽器，可修改browsers參數設置 。

//我們編寫的代碼
div {
 transform: rotate(30deg);
}

// 自動補全的代碼，具體補全哪些由要兼容的瀏覽器版本決定，可以自行設置
div {
 -ms-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 transform: rotate(30deg);
}

目前webpack、gulp、grunt都有相應的插件，如果還沒有使用，那就趕緊應用到我們的項目中吧，別再讓CSS兼容性浪費你的時間！

14.掌握一套完整的響應式布局方案

比較常用的布局方式有float,position,display,table,flex,grid等。

全屏布局相關方案的兼容性、性能和自適應一覽表：

實際項目使用中一般是根據具體場景去選擇相應的布局方式。

附兩張CSS知識圖譜(建議收藏)：

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，

里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

<html> 
 <head> 
 <title>JavaScript URL parsing</title> 
 </head> 
 <body> 
 <script> 
 // 激動人心的代碼即將寫在這里 
 </script> 
 </body> 
</html> 

console.log(window.location); 

var myURL=new URL('https://example.com'); 

console.log(myURL); 

var myURL=new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2') 

console.log(myURL.href); 
// Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2" 

console.log(myURL.protocol); 
// Output: "https:" 

console.log(myURL.hostname); 
// Output: "example.com" 

console.log(myURL.port); 
// Output: "4000" 

console.log(myURL.host); 
// Output: "example.com:4000" 

console.log(myURL.origin); 
// Output: "https://example.com:4000" 

console.log(myURL.pathname); 
// Output: "/folder/page.html" 

console.log(myURL.hash); 
// Output: "#section-2" 

?key1=value1&key2=value2&key3=value3 

console.log(myURL.search); 
// Output: "?x=y&a=b" 

var searchParams=new URLSearchParams(myURL.search); 

?x=y&a=b 

console.log(searchParams.get('x')); 
// Output: "y" 
console.log(searchParams.get('a')); 
// Output: "b" 

function getQueryString(name) { 
 var reg=new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 
 var r=window.location.search.substr(1).match(reg); 
 if (r !=null) { 
 return unescape(r[2]); 
 } 
 return null; 
} 
// 這樣調用： 
alert(GetQueryString("參數名1")); 
alert(GetQueryString("參數名2")); 
alert(GetQueryString("參數名3")); 

function GetRequest() { 
 var url=location.search; //獲取url中"?"符后的字串 
 var theRequest=new Object(); 
 if (url.indexOf("?") !=-1) { 
 var str=url.substr(1); 
 strstrs=str.split("&"); 
 for(var i=0; i < strs.length; i ++) { 
 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
 } 
 } 
 return theRequest; 
} 
var Request=new Object(); 
Request=GetRequest(); 
// var 參數1,參數2,參數3,參數N; 
// 參數1=Request['參數1']; 
// 參數2=Request['參數2']; 
// 參數3=Request['參數3']; 
// 參數N=Request['參數N'];