一文梳理CSS必會知識點

本文主要梳理CSS必會知識點，會持續補充更新哦！ 長文預警！這多是目前最長的一篇了🙈🙉🙊

CSS引入

有哪些引入方式？經過link和@import引入有什麼區別？（* ）

• CSS引入方式有4種 內聯、內嵌、外鏈、導入
• 外鏈 link 除了能夠加載css以外,還能夠定義rss、rel等屬性，沒有兼容性問題，支持使用javascript改變樣式
• 導入@import 是css提供的，只能用於加載css，不支持經過javascript修改樣式
• 頁面被加載的時候，link會被同時加載，而@import則需等到頁面加載完後再加載，可能出現無樣式網頁

Style 標籤寫在 body 後和 body 前有什麼區別？

• 通常狀況下，頁面加載時自上而下的。將style標籤至於body以前，爲的是先加載樣式。
• 如果寫在body標籤以後，因爲瀏覽器以逐行方式對html文檔進行解析，當解析到寫在寫在文檔尾部的樣式表時，會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後會從新渲染，在windows的IE下可能會出現FOUC現象（頁面閃爍）。、

什麼是 FOUC(Flash of Unstyled Content)？ 如何來避免 FOUC

• 當使用@import導入CSS時，會致使某些頁面在IE出現奇怪的現象： 沒有樣式的頁面內容顯示瞬間閃爍，這種現象被稱爲「文檔樣式暫時失效」，簡稱FOUC。
• 產生緣由： 當樣式表晚於結構性html加載時，加載到此樣式表時，頁面將會中止以前的渲染。等待此樣式表被下載和解析後，再從新渲染頁面，期間致使短暫的花屏現象。
• 解決辦法： 只要在之間加入一個或者元素便可。

CSS選擇器

CSS選擇器的解析是從上到下，從右向左解析，爲了不對全部元素進行解析

• 可繼承的樣式：font-size, font-family, color，ul，li，dl，dt，dd；
• 不可繼承的樣式：border, padding, margin, width, height

CSS選擇器種類

• id選擇器

  • 根據提供的惟一id號快速獲取標籤對象
  • 用於充當label標籤for屬性的值：用戶名：，表示單擊此label標籤時，id爲userid的標籤得到焦點
• 類選擇器 (class )
• 標籤選擇器 (h1)
  
• 相鄰選擇器

  • 直接相鄰元素選擇器  (h1+p)
  • 普通相鄰元素選擇器 （h2 ~ h2）
• 子選擇器(ul>li)
• 後代選擇器(li a)
• 通配符選擇器(*)
• 屬性選擇器（a[rel = "XXX"]）
• 僞類選擇器( :hover :first-child ···)
• 僞元素選擇器( :before :after ···)
• 分組選擇器

CSS選擇器優先級

• 優先級由高到低     !important > 內聯style > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符選擇器>繼承
• 優先級算法(權重)

  • 元素選擇符的權值

    • 元素標籤（派生選擇器）：1
    • class選擇符：10
    • id選擇符：100
    • 內聯樣式最大：1000
  • 繼承獲得的樣式的優先級最低
  • 比較多個權重相同的CSS選擇器優先級，定義的位置決定一切。從位置上由高到低分爲六級：

1. 位於<head/>標籤裏的<style/>中所定義的CSS擁有最高級的優先權。
 2. 位於 <style/>標籤中的 @import 引入樣式表所定義。  3. 由<link/>標籤所引入的樣式表定義。  4. 由<link/>標籤所引入的樣式表內的 @import 導入樣式表定義。  5. 用戶設定。  6. 瀏覽器默認。 複製代碼

• 同位置狀況下樣式定義最近者爲準（優先級相同，選擇最後出現的樣式）

CSS僞類和僞元素

CSS僞元素

• ::selection 選擇被用戶選取的元素部分
  
• :first-line 選擇元素中的第一行
  
• :first-letter 選擇元素中的第一個字符
  
• :after 在元素在該元素以後添加內容
  
• :before 在元素在該元素以前添加內容
  

CSS僞類

• :root 選擇文檔的根元素，等同於html元素
  
• :empty 選擇沒有子元素的元素
  
• :target 選取當前活動的目標元素
• :not(selector) 選擇除 selector 元素意外的元素
• :enabled 選擇可用的表單元素
  
• :disabled 選擇禁用的表單元素
  
• :checked 選擇被選中的表單元素
• :first-child 選取當前選擇器下第一個元素。
  
• :last-child 和 first-child 相反，選取當前選擇器下最後一個元素。
• :only-child 選取惟一子元素。若是一個元素的父元素只有它一個子元素，這個僞類就會生效。若是一個元素還有兄弟元素，這個僞類就不會對它生效。
  
• :only-of-type 選取惟一的某個類型的元素。若是一個元素的父元素裏只有它一個當前類型的元素，這個僞類就會生效。這個僞類容許父元素裏有其餘元素，只要不和本身同樣就能夠。
  

靜態僞類（只用於a標籤）

• :link 指示這個「超連接」（即 a 元素裏有一個 href 屬性）未被訪問
• :visited 指示這個「超連接」已被訪問

動態僞類（使用時鼓勵「LVHT」順序）

• :focus 指示這個元素擁有輸入「焦點」——便可以接受鍵盤輸入，或經過某種方式能夠激活
• :hover 指示當鼠標停留在這個元素上時，外觀能夠做相應改變
• :active 指示這個元素能夠被用戶輸入「激活」，如，用戶停留在一個超連接上，當點擊鼠標時，這個連接就會「激活」

僞類和僞元素的根本區別

• 它們是否創造了新的元素(抽象)。
• 從咱們模仿其意義的角度來看，若是須要添加新元素加以標識的，就是僞元素，反之，若是隻須要在既有元素上添加類別的，就是僞類。
• 僞元素在一個選擇器裏只能出現一次，而且只能出如今末尾。
• 僞類則是像真正的類同樣發揮着類的做用，沒有數量上的限制，只要不是相互排斥的僞類，也能夠同時使用在相同的元素上。
  
• 僞類用一個冒號表示 :first-child，僞元素則使用兩個冒號表示 ::first-line(爲了向下兼容，如今的瀏覽器中僞元素選擇器用單冒號和雙冒號均可以)。

CSS盒模型

盒模型分類

• IE盒模型（怪異盒模型）

  • width = border + padding + content
  • 一個盒子的寬度 = width + margin
• W3C盒模型（標準盒模型）

  • width = content
  • 一個盒子的寬度 = width + padding + border + margin

轉換盒模型

Css中默認的盒模型是W3C盒模型，二者間的轉換能夠經過設置屬性box-sizing來轉換

box-sizing: content-box; // W3C盒模型標準 
box-sizing: border-box; // IE盒模型標準 複製代碼

盒子一些相關寬度

• clientWidth = width+左右padding
• offsetWidth = width + 左右padding + 左右boder
• scrollWidth：獲取指定標籤內容層的真實寬度（可視區域寬度+被隱藏區域寬度）

邊界塌陷

CSS 中存在一個 margin collapse，即邊界塌陷或者說邊界重疊。
只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

並排 DIV 邊界塌陷（兄弟）

對於上下兩個並排的 DIV 塊而言，上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 會塌陷，會取上下二者 margin 裏最大值做爲顯示值，只設置單個margin。

包含元素盒子塌陷（父子）

父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content(文本)中的其中一個，而後按此div 進行margin。

解決方法

• 爲父盒子設置border，爲外層添加border後父子盒子就不是真正意義上的貼合 （能夠設置成透明：border: 1px solid transparent）
• 爲父盒子添加overflow: hidden;
• 爲父盒子設定padding值；
• 爲父盒子添加position：fixed；

負值做用

• 負 marign實現元素的水平垂直居中
• 負 marign隱藏列表 li 首尾多餘的邊框
• 負 text-indent 實現文字的隱藏
• 負的 z-index 參與層疊上下文排序
• 定位中的left、right、top、bottom

position 定位

static(普通流定位)

默認定位

relative(相對定位)

• 相對 本元素的 左上角進行定位（相對於自身位置進行定位），本元素須要設置position爲relative，top、left、bottom、right均可以有值。
• 雖然通過定位後，位置可能會移動，可是本元素並 沒有脫離文檔流，還佔有原來的頁面空間。

absolute(絕對定位)

• 相對於祖代中有relative(相對定位)而且離本元素層級關係上是最近的元素的 左上角進行定位，若是在祖代元素中沒有有relative定位的，就默認相對於body進行定位。
• 元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
• 絕對定位是 脫離文檔流的，與浮動定位是同樣的效果，會壓在非定位元素的上方。

fixed(固定定位)

相似於absolute定位，可是是相對於瀏覽器窗口進行定位

inherit

繼承父級元素position屬性值

sticky （額外補充）

粘性的-集合了flex和relative,參考殺了個回馬槍，仍是說說position:sticky吧

float浮動

• 有兩個取值：left(左浮動)和right(右浮動)。
• 浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
• 因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

優勢

最初的優勢就是在圖文混排的時候能夠很好的使文字周圍在圖片周圍。另外當元素浮動了起來以後，它具備塊級元素的一些性質例如能夠設置寬高等，但它與inline- block仍是有一些區別的，第一個就是關於橫向排序的時候，float能夠設置方向而inline-block方向是固定的；還有一個就是inline-block在使用時有時會有空白間隙的問題。

缺點

最明顯的缺點就是浮動元素一旦脫離了文檔流，就沒法撐起父元素，會形成父級元素高度塌陷爲0(盒子塌陷)。
▲ 注意：設置元素浮動後，該元素的display值會變爲block

清除浮動（*）

• 盒子大小寫死，給每一個盒子設定固定的width和height，直到合適爲止，非自適應
• 父級元素設置高度
• 父級元素觸發BFC（Float，Overflow: Hidden | Visible，Display: Flex | Grid）

<div class="parent" style="overflow:hidden">     
 <div class="f"></div> </div> 複製代碼

• 添加額外標籤

<div class="parent">    //添加額外標籤而且添加clear屬性    
 <div class="f"></div> </div> <div style="clear:both"></div> 複製代碼

• 創建僞類選擇器清除浮動（推薦）

//添加:after僞元素
.parent:after{  content: ''; /* 設置添加子元素的內容是空 */  display: block; /* 設置添加子元素爲塊級元素 */  height: 0; /* 設置添加的子元素的高度0 */  visibility: hidden; /* 設置添加子元素看不見 */  clear: both; /* 設置clear：both */ } <div class="parent">  <div class="f"></div> </div> 複製代碼

display 佈局

值	描述
none	元素會被隱藏，不顯示
inline	元素會被設置爲內聯元素，內部按行從左向右排列（元素先後沒有換行符）
block	元素會被設置爲塊級元素，內部按列從上到下排列（元素先後帶有換行符）
inline-block	元素會被設置爲行內塊級元素，不會獨佔一行的塊級元素
list-item	元素會做爲列表顯示
table	元素會做爲塊級表格來顯示（相似table），表格先後帶有換行符
flex	元素會進入flex佈局模式

inline、block、inline-block三者區

block塊級特色：

• 每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（一個塊級元素獨佔一行）
• 元素的高度、寬度、行高以及頂和底邊距均可設置。
• 元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

inline內聯特色：

• 和其餘元素都在一行上；
• 元素的高度、寬度及頂部和底部邊距不可設置；
• 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

inline-block 特色：

• inline-block內聯塊狀元素同時具有內聯元素、塊狀元素的特色。
• 和其餘元素都在一行上；
• 元素的高度、寬度、行高以及頂和底邊距均可設置。

使用 display:inline-block 會產生什麼問題？又如何解決？（*）

兩個inline-block元素放到一塊兒會產生一段空白。

產生空白的緣由

元素被當成行內元素放置的時候，元素之間的空白符（空格，回車換行等）都會被瀏覽器處理，根據CSS中空白屬性的處理方式（不然是正常，合併多餘空白），原來HTML代碼中的回車換行被轉成一個空白符，在字體不爲0的狀況下，空白符較長必定長度，因此inline-block的元素之間就出現了空隙。

解決辦法

• 將子元素標籤的結束符和下一個標籤的開始符寫在同一行或把全部子標籤寫在同一行
• 父元素中設置字體大小：0，在子元素上重置正確的字體大小
• 爲子元素設置float：left

flex佈局

該佈局提供了一種更高效的方法對容器中的項目進行佈局、對齊和分配空間，他沒有方向上的限制，能夠由開發人員自由操做（子元素的 vertical-align、float、clear 屬性會失效）。

容器屬性（6個）

• flex-direction** 決定主軸方向（容器排列方向）**

flex-direction: row | row-reverse | column | column-reverse;

• flex-wrap** 若是一條軸線排不下，定義換行規則**

flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow** flex-direction和flex-wrap的簡寫形式**

flex-flow: flex-direction||flex-wrap;

• justify-content** 定義容器在主軸上的對齊方式**

justify-content: flex-start | flex-end | center | space-between | space-around;

• align-items** 定義容器在交叉軸上的對齊方式**

align-items: flex-start | flex-end | center | baseline | stretch;

• align-content** 定義多根軸線的對齊方式，若是容器只有一根軸線，該屬性不起做用**

align-content: flex-start | flex-end | center | space-between | space-around |;

項目屬性（6個）

• order 定義項目的排列順序，數值越小，排列越靠前，默認爲0
• flex-grow 定義項目的放大比例，默認爲0（即若是存在剩餘空間，也不放大）
• flex-shrink 定義項目的縮小比例，默認爲1（即若是空間不足，該項目將縮小）
• flex-basis 定義了在分配多餘空間以前，項目佔據的主軸空間。默認值爲auto（項目原本大小）
• align-self容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性，默認值爲auto（表示繼承父元素align-items屬性，若是沒有父元素，等同於stretch）

align-self: auto | flex-start | flex-end | center | baseline | stretch;

• flex 是flex-grow、flex-shrink和flex-basis的簡寫， 默認值爲 0 1 auto

flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis']
該屬性有兩個快捷值: auto(1 1 auto) 和 none(0 0 auto)
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值

overflow溢出

• scroll：一定出現滾動條
• auto：子元素內容大於父元素時出現滾動條
• visible：溢出的內容出如今父元素以外
• hidden：溢出時隱藏

如何實現：單行文本溢出加 ...(*)

white-space: nowrap; /* 首先，強制文本不換行；*/ 
overflow: hidden; /*其次，隱藏溢出； */ text-overflow: ellipsis; /*最後，對溢出的文本用 ellipsis 省略號代替。 */ 複製代碼

全屏滾動的原理？須要哪些css屬性？

原理

相似於輪播圖，總體元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度將會是500%，但咱們只能展現100%，剩下的內容能夠經過transform進行Y軸定位，也能夠經過margin-top實現

涉及css屬性

overflow:hidden | transition:all 1000ms ease

BFC塊級格式上下文

什麼是BFC？

• BFC直譯爲 塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了 內部的Block-level Box如何佈局，而且與外部絕不相干。
• W3C對BFC的定義以下：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如，內聯塊，表單元格和表標題），以及溢出值不爲「可見」的塊級盒子，，都會爲他們的內容建立新的BFC（阻止Fromatting上下文，即塊級格式文本）。
• 注意：能夠把BFC理解爲一個大的盒子，其內部是由Block-level box組成的

如何觸發BFC？（*）

• 根元素 → 根元素（html）就是最大的BFC
• position設置爲 fixed 或者 absolute
• display設置爲 inline-block 、table-block 、table-caption
• overflow的值不爲visible
• float的值不爲none

BFC佈局規則：

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

BFC的做用及原理：

• 自適應兩欄佈局
• 清除內部浮動
• 防止垂直 margin 重疊（將垂直方向上的 盒子放在不一樣的 BFC 中，margin 就不會重疊了。）
• BFC內部的元素和外部的元素絕對不會互相影響，所以， 當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

IFC行內格式上下文

• 內部的盒子一個接着一個地排列，起點是包含塊的頂點。
• 若是一行放不下內容，那麼會被「拆」開放到下一行。
• 只有水平方向上的 Margin 會在盒子中保留。
• Padding 和 Border 不會撐開行高。

z-index層疊上下文

• z-index 能夠解決元素之間覆蓋順序的問題，設置它的層疊順序。
• 若是元素是沒有定位的，對其設置的 z-index 會是無效的。

元素層疊時，覆蓋關係準則（*）

同父同級元素

• 當具備明顯的層疊水平標示時，如識別的z-index值

  • z-index大的覆蓋小的，數值越大，越靠近視覺點。
  • z-index相同時，在DOM流中處於後面會覆蓋前面。
• 都沒有設置 z-index時，使用默認值，一個定位一個沒有定位，那麼定位覆蓋未定位元素。
• 都沒有定位且發生位置重合現象時，在DOM流中處於後面會覆蓋前面。

父子層級元素

• 不一樣父元素，只要父元素越大，那麼總體就越靠近視覺點，而無論其子元素大小狀況。
• 若是父元素 z-index 有效，那麼子元素不管是否設置 z-index 都和父元素一致，會在父元素上方；
• 若是父元素 z-index 失效（未定位或者使用默認值），那麼定位子元素的 z-index 設置生效。

層疊上下文的建立

根層疊上下文

指的是頁面根元素，也就是滾動條的默認的始做俑者元素。這就是爲何，絕對定位元素在left/top等值定位的時候，若是沒有其餘定位元素限制，會相對瀏覽器窗口定位的緣由。

定位元素與傳統層疊上下文

對於包含有position:relative/position:absolute/position:fixed的定位元素，當其z-index值不是auto的時候，會建立層疊上下文。

CSS3與新時代的層疊上下文

CSS3的出現除了帶來了新屬性，同時還對過去的不少規則發出了挑戰。例如，CSS3 transform對overflow隱藏對position:fixed定位的影響等。而這裏，層疊上下文這一塊的影響要更加普遍與顯著。
以下：

1. z-index值不爲auto的flex項(父元素display:flex|inline-flex).
2. 元素的opacity值不是1.
3. 元素的transform值不是none.
4. 元素mix-blend-mode值不是normal.
5. 元素的filter值不是none.
6. 元素的isolation值是isolate.
7. will-change指定的屬性值爲上面任意一個。
8. 元素的-webkit-overflow-scrolling設爲touch

CSS管理方案

ITCSS

ITCSS（Inverted Triangle CSS）經過規範樣式文件的組織結構來適應項目中特殊性不斷增長的選擇器。見如下倒立的三角形，其中每一層都表明一種樣式的概念結構：

• Settings：Global variables、Config switches
• Tools：Mixins、Functions
• Generic：Ground-zero styles（Normalize.css，resets.css）
• Base：Unclassed HTML elements（Type selectors）
• Objects：Cosmetic-free design patterns
• Components：Designed components
• Trumps：Helpers、Overrides

層級自上而下，選擇器影響的 DOM 數量也愈來愈少，同時選擇器特殊性遞增。修改某個樣式時咱們能夠輕易從相關組織文件中作出修改，而不影響其它樣式，或是致使 CSS 樣式繼承的崩塌。

命名方案

解決的主要是命名衝突和複用兩個問題，在衆多解決方案中，沒有絕對的優劣。仍是要結合本身的場景來決定。

OOCSS

• 面對對象的規則，主要的原則是兩種：分離結構和外觀，分離容器和內容。
• 分離結構和外觀：增長可重複的設計單元，同時去推動產品和ui對這方面的思考，好比下面的css使用時對象模式的命名和模塊化規則。
• 分離容器和內容：指的是樣式的使用不以元素位置惟一匹配，在任何位置你均可以使用這個樣式，若是你不適用這個樣式，會保持默認的樣式。

SMACSS

• sma和oocss有不少相似之處，但區分的地方有不少，主要是對樣式的分類。分別是：基礎、佈局、模塊、狀態、主題
• 與oocss相比，其實大部分設計思路是同樣的，以一個類做爲css的做用域（做用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區別就是針對皮膚和狀態的不一樣書寫規則

  • 基礎：能夠適用於任何位置，我也稱全局樣式
  • 佈局：主要是用來實現不一樣的特點佈局，提升佈局的複用率，
  • 模塊：設計中的模塊化，可重複使用的一個單元，通常是dom+css的耦合綁定。
  • 狀態：描述在特定狀態下的佈局或者模塊的特殊化表現，這裏我以爲要推薦下《css禪意花園》，在dom結構不變的狀況下，能夠經過css的皮膚化實現樣式的改版。
  • 主題：與狀態相比更加定製的是，咱們會針對有些特殊的模塊，進行主題的設置，包括一系列的顏色、尺寸、交互等進行重度設計，參數化設計。

BEM

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

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

Style-Components

完全拋棄 CSS，用 JavaScript 寫 CSS 規則

CSS Modules

使用JS編譯原生的CSS文件，使其具有模塊化的能力

按需加載

• 使用require.js按需加載CSS
• webpack配置CSS的按需加載

CSS瀏覽器兼容性

瀏覽器CSS樣式初始化

因爲每一個瀏覽器的css默認樣式不盡相同，因此最簡單有效的方式就是對其進行初始化，在全部CSS開始前，先把marin和padding都設爲0，以防不一樣瀏覽器的顯示效果不同（推薦初始化庫Normalize.css）。

瀏覽器私有屬性

• 咱們常常會在某個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 hack

有時咱們須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，這種針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack，寫法大體概括爲3種：條件hack、屬性級hack、選擇符級hack。

自動化插件

• Autoprefixer是一款自動管理瀏覽器前綴的插件，它能夠解析CSS文件而且添加瀏覽器前綴到CSS內容裏，使用Can I Use（caniuse網站）的數據來決定哪些前綴是須要的。
• 把Autoprefixer添加到資源構建工具（例如Grunt）後，能夠徹底忘記有關CSS前綴的東西，只需按照最新的W3C規範來正常書寫CSS便可。若是項目須要支持舊版瀏覽器，可修改browsers參數設置 。
• 目前webpack、gulp、grunt都有相應的插件，別再讓CSS兼容性浪費你的時間。

常見的CSS兼容性問題有哪些

• 不一樣瀏覽器的標籤默認的padding/margin不一樣，經過初始化css樣式能夠解決 *{ margin:0;padding:0px; }
• IE6雙邊距BUG
• 設置較小高度標籤（通常小於10px）在IE6,IE7中高度超出本身設置的高度 ，經過設置overflow:hidden;或者設置行高line-height小於你設置的高度
• IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性
• Chrome中文界面下默認會將小於12px的文本強制爲12px 經過加入css屬性 -webkit-text-size-adjust：none;能夠解決，或者使用transform中的縮放屬性
• 超連接訪問事後hover樣式就不出現，由於被點擊訪問過的超連接樣式再也不具備hover和active了 ，解決方法是改變css屬性的排列屬性：L-V-H-A a:link{} → a:visited{} → a:hover{} → a:active{}
• IE下，event對象有x,y屬性，可是沒有pageX，pageY屬性，但沒有x，y屬性 解決方式：經過條件- png24位的圖片在IE6瀏覽器上出現背景，解決方案是作出PNG8

CSS優化及性能提高

• 將css文件放在頁面最上面，多個css可合併，並儘可能減小http請求
• 避免過渡約束，避免使用後代選擇符，鏈式選擇符，多種類型選擇符
• 避免沒必要要的命名空間，避免沒必要要的重複樣式，移除空的css規則
• 使用具備語義的名字，使用緊湊的語法
• 避免使用 !important
• 儘量地精簡規則，儘量合併不一樣類的重複規則，修復解析錯誤
• 正確使用display屬性

  • inline後不該該使用width、height、margin、padding以及float
  • inline-block後不該該使用float；block後不該該使用vertical-align
• 不濫用浮動，遵照盒模型規則
• 不濫用web字體，不聲明過多font-size，不重複定義h1-h6，不給h1-h6定義過多樣式
• 值爲0時不須要任何單位
• 標準化各類瀏覽器前綴

WEB標準以及W3C

對於結構的要求：

規範的標籤能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助

• 標籤要閉合
• 標籤字母小寫
• 標籤不容許隨意嵌套

對於CSS和JS來講：

• 儘可能使用外鏈CSS樣式表和JS腳本。同時結構，表現和行爲分爲三塊，符合規範。此外，還得提升頁面渲染速度，提升用戶體驗。
• 儘可能少用行內樣式，保證結構和表現分離。標籤的id和class等的屬性命名要作到見文知意，標籤越少，加載越快，用戶體驗就會越高。同時代碼方面也會更易於維護，便於改版。
• 不須要變更內容，即可一同打印版本而不須要複製內容，提升網站易用性。

問幾個問題

Q1: 當position跟display、overflow、float這些特性相互疊加後會出現什麼狀況？

• display：規定元素應該生成的框的類型（子元素的排序方式）
• position：規定元素的定位類型
• float：定義元素在哪一個方向浮動
• 其中，position:absolute / fixed 優先級最高，當position設置爲absolute或者fixed時，float失效，display須要調整，float / absolute定位的元素，只能是塊元素或表單（block / table）

Q2：display:none 與 visibility:hidden 的區別是什麼？

• display:none  隱藏對應的元素，在文檔佈局中再也不分配空間（致使重排）
• visibility:hidden  隱藏對應的元素，在檔佈局中保留原來的空間（致使重繪）
• 前者會使元素及其後代所有隱藏；後者具備繼承性，子代會保持 hidden 的狀態，但也能夠單獨設置爲 visibility: visible 進行顯示。

Q3：border:none;與border:0;有什麼區別？

性能差別：

• {border：0;}: 把border設置爲0像素，雖然在頁面上看不到，可是按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用內存值；
• {border：none；}被理解爲border-style:none。boder:0;比border:none多渲染了一個border-width:0,也就是爲何border:none的性能要比border:0高；

兼容性差別：

• {border:none;}當border爲「none」時彷佛對IE6/7無效邊框依然存在當border爲「0」時，感受比「none」更有效，全部瀏覽器都一致把邊框隱藏。

Q4：px | em| REM 有什麼區別?

PX
px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
EM
em的值並非固定的， em會繼承父級元素的字體大小。（瀏覽器body中1em=16px）

• body選擇器中聲明Font-size=62.5%；
• 將你的原來的px數值除以10，而後換上em做爲單位；
• 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

REM（css3新增）
使用rem相對的只是HTML根元素。集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
EX（不推薦）

• ex 是一個相對長度單位，1ex 被定義爲一種給定字體的小寫字母 「x」 的高度。所以，這個值會隨字體的不一樣而變化。
• 然而，不少瀏覽器都沒有內置 ex 高度值，只是簡單的取 em 的值，再取其一半做爲 ex 的值。因此，通常不推薦使用 ex 這個長度單位。 選擇使用什麼字體單位主要由你的項目來決定，若是你的用戶羣都使用最新版的瀏覽器，那推薦使用rem，若是要考慮兼容性，那就使用px,或者二者同時使用。

Q5：視口單位 vw、vh、vmin、vmax

• vw 視口寬度的1/100。
• vh 視口高度的1/100。
• vmin vw 和 vh 中的最小值。
• vmax vw 和 vh 中的最大值。

Q6：RGBA() 與 opacity 在透明效果上有什麼區別？

• opacity 做用於元素，以及元素內的全部內容的透明度
• rgba() 只做用於元素的顏色或者背景色（設置rgba透明的元素的子元素不會繼承透明效果）

Q7：png、jpg、 jpeg、 bmp、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

• png便攜式網絡圖片（Portable Network Graphics）,是一種無損數據壓縮位圖文件格式。優勢是：壓縮比高，色彩好。 大多數地方均可以用。
• jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的不錯。在www上，被用來儲存和傳輸照片的格式。
• gif是一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果。
• bmp的優勢： 高質量圖片；缺點： 體積太大； 適用場景： windows桌面壁紙；
• webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性很差，目前谷歌和opera支持。

Q8：隱藏或者透明元素的方法？

opacity: 0; //1透明度爲 0，總體都看不見了； 
visibility: hidden; //2這個和上邊相似； display: none; //3消失，不佔用位置； background-color: rgba(0,0,0,0.2); //4只是背景色透明 複製代碼

Q9：css sprites是什麼？如何使用？

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

Q10：什麼是漸進加強和優雅降級？

漸進加強

• 是指從最基本的可用性出發，在保證站點頁面在低級瀏覽器中 的可用性和可訪問性的基礎上，逐步增長功能及提升用戶體驗。
• 本質上講，咱們平常的一些開發習慣，例如首先使用標記語言編寫頁面，而後經過樣式表來控制頁面 樣式等，都屬於漸進加強的概念
• 其餘更爲明顯的行爲包括使用HTML五、CSS3等新技術，針對高級瀏覽器爲頁面提升用戶體驗的豐富程度。

優雅降級

• 是指首先使用最新的技術面向高級瀏覽器構建最強的功能及用戶體驗，而後針對低級瀏覽器的限制，逐步衰減那些沒法被支持的功能及體驗。
• 在咱們平常的開 發中，一個典型的平穩退化的例子就是首先針對Chrome編寫頁面代碼，而後修復IE中的異常或針對IE去除那些沒法被實現的功能特點

因此

• 這兩個概念方法其實早已並存在咱們的平常開發工做中了，只是「漸進加強」與「優雅降級」這樣的措辭是近些年纔開始被普及。
• 在咱們眼下的HTML5與 CSS3實戰中，這兩個概念就尤爲重要了，怎樣保證使用不斷變化的新技術來構建在主流瀏覽器下都具備基本可用性的站點，並針對高級瀏覽器進行體驗提高，是咱們在開發過程當中須要明確的思路。

巨人的肩膀

• 完全搞懂CSS層疊上下文、層疊等級、層疊順序、z-index
• 深刻理解CSS中的層疊上下文和層疊順序
• 30 分鐘學會 Flex 佈局
• 寫給本身看的display: flex佈局教程
• 瀏覽器將rem轉成px時有精度偏差怎麼辦？
• CSS 基礎拾遺 | 整理了數十萬字資料，分享給你這些 CSS 乾貨
• css篇--100道近兩萬字幫你鞏固css知識點

最後

歡迎糾錯，看到會及時修改噠！ 溫故而知新，但願咱們均可以保持本心，念念不忘，必有迴響。

最後的最後

給本身的小組賣個安利，歡迎熱愛前端的小姐妹們加入咱們，一塊兒學習，共同進步【有意請留言或私信，社畜搬磚不及時，但看到會馬上回復】 💗💗💗💗💗

本文使用 mdnice 排版