那些你須要知道的CSS-總結

1、px，em，rem、vw、vh

1.px (pixel，像素)：

       是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時通常都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。

2.em(相對長度單位，相對於當前對象內文本的字體尺寸)：

       是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法相似百分比，如：0.8em, 1.2em,2em等。一般1em=16px。

3.rem(root em，根em):

       rem是一個相對單位，1rem等於html元素上字體設置的大小。咱們只要設置html上font-size的大小，就能夠改變rem所表明的大小。這樣咱們就有了一個可控的統一參考系。咱們如今有兩個目標：

• rem單位所表明的尺寸大小和屏幕寬度成正比，也就是設置html元素的font-size和屏幕寬度成正比
• rem單位和px單位很容易進行換算，方便咱們按照標註稿寫css

rem與em的區別：

• rem是相對於根元素（html）的字體大小，而em是相對於其父元素的字體大小
• em最多取到小數點的後三位

4.vw、vh：

css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對於視圖窗口的寬度，vh表示相對於視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義以下：

單位	含義
vw	相對於視窗的寬度，視窗寬度是100vw
vh	相對於視窗的高度，視窗高度是100vh
vmin	vw和vh中的較小值
vmax	vw和vh中的較大值

這裏咱們發現視窗寬高都是100vw／100vh，那麼vw或者vh，下簡稱vw，很相似百分比單位。vw和%的區別爲：

單位	含義
%	大部分相對於祖先元素，也有相對於自身的狀況好比（border-radius、translate等)
vw/vh	相對於視窗的尺寸

2、聖盃佈局-雙飛翼佈局

聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局

• 三列布局，中間寬度自適應，兩邊定寬
• 中間欄要在瀏覽器中優先展現渲染
• 容許任意列的高度最高

@午後苦咖啡提醒：聖盃佈局中相對佈局中，main元素必須是container的第一個元素

html代碼：

<div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>複製代碼

1.相對佈局：

.container {
  width: 100%;
  min-height: 300px;
  padding: 0 60px;
  box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}複製代碼

2.flex佈局：

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}複製代碼

3.絕對佈局：

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}複製代碼

3、流式佈局與響應式佈局

流式佈局 使用非固定像素來定義網頁內容，也就是百分比佈局，經過盒子的寬度設置成百分比來根據屏幕的寬度來進 行伸縮，不受固定像素的限制，內容向兩側填充。

響應式開發 利用CSS3 中的 Media Query(媒介查詢)，經過查詢 screen 的寬度來指定某個寬度區間的網頁佈局。

• 超小屏幕(移動設備) 768px 如下
• 小屏設備 768px-992px
• 中等屏幕 992px-1200px
• 寬屏設備 1200px 以上

因爲響應式開發顯得繁瑣些，通常使用第三方響應式框架來完成，好比 bootstrap 來完成一部分工做，固然也 能夠本身寫響應式。

-	流式佈局	響應式開發
開發方式	移動Web開發+PC開發	響應式開發
應用場景	通常在已經有PC端網站，開發移動的的時候只須要單獨開發移動端	針對一些新建的網站，如今要求適配移動端，因此就一套頁面兼容各類終端
開發	正對性強，開發效率高	兼容各類終端，效率低
適配	只適配移動設備，pad上體驗相對較差	能夠適配各類終端
效率	代碼簡潔，加載快	代碼相對複雜，加載慢

4、CSS優先級算法

• 元素選擇符： 1
  
• class選擇符： 10
  
• id選擇符：100
  
• 元素標籤：1000
  

1. !important聲明的樣式優先級最高，若是衝突再進行計算。
   
2. 若是優先級相同，則選擇最後出現的樣式。
   
3. 繼承獲得的樣式的優先級最低。
   

5、CSS3新增僞類有那些?

• p:first-of-type 選擇屬於其父元素的首個元素
  
• p:last-of-type 選擇屬於其父元素的最後元素
  
• p:only-of-type 選擇屬於其父元素惟一的元素
  
• p:only-child 選擇屬於其父元素的惟一子元素
  
• p:nth-child(2) 選擇屬於其父元素的第二個子元素
  
• :enabled :disabled 表單控件的禁用狀態。
  
• :checked 單選框或複選框被選中。
  

6、CSS3新特性

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（對長的不可分割單詞換行）word-wrap：break-word

4. 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

5. font-face屬性：定義本身的字體

6. 圓角（邊框半徑）：border-radius 屬性用於建立圓角

7. 邊框圖片：border-image: url(border.png) 30 30 round

8. 盒陰影：box-shadow: 10px 10px 5px #888888

9. 媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不一樣的屬性

7、CSS優化、提升性能的方法有哪些？

1. 避免過分約束

2. 避免後代選擇符

3. 避免鏈式選擇符

4. 使用緊湊的語法

5. 避免沒必要要的命名空間

6. 避免沒必要要的重複

7. 最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像

8. 避免！important，能夠選擇其餘選擇器

9. 儘量的精簡規則，你能夠合併不一樣類裏的重複規則

8、CSS動畫

CSS 中的 transform，transition 和 animation 是分開的三部份內容，其中 transfrom 主要是控制元素變形，並無一個時間控制的概念，而 transition 和 animation 纔是動畫的部分，它們能夠控制在一個時間段裏，元素在兩個或以上的狀態切換的效果。

1.transition

transition 屬性：

• transition-delay 延遲多久後開始動畫

• transition-duration 過渡動畫的一個持續時間

• transition-property 執行動畫對應的屬性，例如 color，background 等，可使用 all 來指定全部的屬性

• transition-timing-function 隨着時間推動，動畫變化軌跡的計算方式，常見的有：linear，ease，ease-in，ease-out，cubic-bezier(...) 等。

transition 相關的事件

transitionend 事件會在 transition 動畫結束的時候觸發。一般咱們會在動畫結束後執行一些方法，例如繼續下一個動畫效果或者其餘。Zepto.js 中的動畫方法都是使用 CSS 動畫屬性來處理，而其中動畫運行後的回調便應該是使用這個事件來處理。

2.animation

雖然 transition已經提供了很棒的動畫效果了，可是咱們只可以控制從一個狀態到達另一個狀態，無法來控制多個狀態的不斷變化，而 animation 而幫助咱們實現了這一點。使用 animation 的前提是咱們須要先使用 @keyframes 來定義一個動畫效果，@keyframes 定義的規則能夠用來控制動畫過程當中的各個狀態的狀況，語法大抵是這個樣子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}複製代碼

@keyframes 關鍵詞後跟動畫的名字，而後是一個塊，塊中有動畫進度的各個選擇器，選擇器後的塊則依舊是咱們常見的各個 CSS 樣式屬性。

animation 屬性:

• animation-name 你須要的動畫效果的 @keyframes 的名字。

• animation-delay 和 transition-delay 同樣，動畫延遲的時間。

• animtaion-duration 和 transition-duration 同樣，動畫持續的時間。

• animation-direction 動畫的一個方向控制。
  默認是 normal，若是是上述的 left 從 0% 到 100%，那麼默認是從左到右。若是這個值是 reverse，那麼即是從右到左

因爲 animation 提供了循環的控制，因此還有兩個值是 alternate 和 alternate-reverse，這兩個值會在每次循環開始的時候調轉動畫方向，只不過是起始的方向不一樣。

animation 相關事件

能夠經過綁定事件來監聽 animation 的幾個狀態，這些事件分別是：

• animationstart 動畫開始事件，若是有 delay 屬性的話，那麼等到動畫真正開始再觸發，若是是沒有 delay，那麼當動畫效果應用到元素時，這個事件會被觸發。

• animationend 動畫結束的事件，和 transitionend 相似。若是有多個動畫，那麼這個事件會觸發屢次，像上邊的例子，這個事件會觸發三次。若是 animation-iteration-count 設置爲 infinite，那麼這個事件則不會被觸發。

• animationiteration 動畫循環一個生命週期結束的事件，和上一個事件不同的是，這個在每次循環結束一段動畫時會觸發，而不是整個動畫結束時觸發。無限循環時，除非 duration 爲 0，不然這個事件會無限觸發

9、BFC

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。要明白BFC究竟是什麼，首先來看看什麼是視覺格式化模型。

視覺格式化模型

視覺格式化模型(visual formatting model)是用來處理文檔並將它顯示在視覺媒體上的機制，它也是CSS中的一個概念。

視覺格式化模型定義了盒（Box）的生成，盒主要包括了塊盒、行內盒、匿名盒（沒有名字不能被選擇器選中的盒）以及一些實驗性的盒（將來可能添加到規範中）。盒的類型由display屬性決定。

怎樣才能造成BFC

根元素或其它包含它的元素；

浮動 (元素的float不爲none)；

絕對定位元素 (元素的position爲absolute或fixed)；

行內塊inline-blocks(元素的 display: inline-block)；

表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；

overflow的值不爲visible的元素；

彈性盒 flex boxes (元素的display: flex或inline-flex)；

但其中，最多見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就表明了該元素以及建立了一個BFC了。

瀏覽器對BFC區域的約束規則：

1. 生成BFC元素的子元素會一個接一個的放置。
2. 垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素的外邊距會摺疊(Mastering margin collapsing)。
3. 生成BFC元素的子元素中，每個子元素左外邊距與包含塊的左邊界相接觸（對於從右到左的格式化，右外邊距接觸右邊界），即便浮動元素也是如此（儘管子元素的內容區域會因爲浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。

BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。咱們能夠利用BFC的這個特性來作不少事。

10、flex 佈局

基本概念

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

容器的屬性：

1.flex-direction： 屬性決定主軸的方向（即項目的排列方向）

• row（默認值）：主軸爲水平方向，起點在左端。
  
• row-reverse：主軸爲水平方向，起點在右端。
  
• column：主軸爲垂直方向，起點在上沿。
  
• column-reverse：主軸爲垂直方向，起點在下沿。

2.flex-wrap ：默認狀況下，項目都排在一條線（又稱"軸線"）上

• nowrap（默認）：不換行。
  
• wrap：換行，第一行在上方。
  
• wrap-reverse：換行，第一行在下方。

3.flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式

4.justify-content：定義了項目在主軸上的對齊方式

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

5.align-items：定義項目在交叉軸上如何對齊

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

6.align-content：定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線佔滿整個交叉軸。

項目的屬性

1. order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。
   
2. flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
   
3. flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。
   
4. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。
   
5. align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。
   

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

11、Grid 佈局總結

grid 佈局是 css 中的一種新的佈局方式，對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不一樣，flex 着重於單軸，而 grid 適應於多軸，下面就來作個簡單的介紹。

flex 佈局示意

grid 佈局示意

基本概念

設置 display: grid; 的元素稱爲容器，它的直接子元素稱爲項目，但注意子孫元素不是項目。

• grid line：網格線，構成 grid 佈局的結構，分爲水平和豎直兩種。
  
• grid track：兩條相鄰網格線之間的空間，能夠認爲是一行或者一列。
  
• grid cell：兩條相鄰行和相鄰列之間分割線組成的空間，是 grid 佈局中的一個單元。
  
• grid area：四條網格線包裹的所有空間，任意數量的 grid cell 組成一個 grid area。
  

容器屬性

grid 容器的屬性仍是有點多的，一共有 18 個，可是不少能夠經過簡寫完成，因此也不用太緊張。

• grid-template 系列
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
• grid-gap 系列
  • grid-column-gap
  • grid-row-gap
• place-items 系列
  • justify-items
  • align-items
• place-content 系列
  • justify-content
  • align-content
• grid 系列
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow

12、box-sizing

設置CSS盒模型爲標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding box-sizing屬性能夠爲三個值之一：

• content-box，默認值，只計算內容的寬度，border和padding不計算入width以內
• padding-box，padding計算入寬度內
• border-box，border和padding計算入寬度以內

十3、硬件加速

有時候動畫可能會致使用戶的電腦卡頓，你能夠在特定元素中使用硬件加速來避免這個問題：

.block {
    transform: translateZ(0);
}
複製代碼

你並不會察覺有什麼不一樣，但瀏覽器會爲這個元素進行3D硬件加速，在will-change這個特殊屬性未被全面支持以前，這個方法仍是頗有用的。

（持續更新...）

參考

談談CSS3的長度單位（vh、vw、rem）

css經典佈局——聖盃佈局

深刻理解BFC

阮一峯Flex 佈局教程：語法篇

等等