【CSS】
一、CSS3新增的特性有哪些？移除的元素有哪些？
新增的特性：選擇器、盒模型、背景和邊框、文字特效、2D/3D轉換、動畫、多列布局、用戶界面
移除的元素：(純表現的元素) basefont，big，center，font，s，strike，tt，u
二、選擇器
- ID 選擇器（#id）
- 類選擇器（.class）、屬性選擇器（E[attr]...）、僞類選擇器（:）
- 元素選擇器(標籤選擇器)（E）、關係選擇器(層次選擇器)、僞元素選擇器（::）
- 通配符選擇器（*）
動態僞類選擇器： E:link、E:visited、E:acitved、E:hover、E:focus
UI元素狀態僞類選擇器：E:checked、E:enabled、E:disabled
結構僞類選擇器：E:nth-child(n)、E:nth-of-type(n)、E:empty、E:root
E F:nth-child(n) 和 E F:nth-of-type(n) 的區別：
E F:nth-child(n) 是指元素 E 的第 n 個子元素，如果同時該子元素是元素F，則選中；否則選不中。
E F:nth-of-type(n) 是指元素 E 的第 n 個 F 子元素。
n 可以是（odd、even）、（2n+1、2n+2）、（n+5、-n+5）、（3n）等。
否定僞類選擇器：E:not(F)
關係選擇器（層次選擇器）：E F | E>F | E+F | E~F
僞元素選擇器：::first-letter、::first-line、::before、::after、::selection
三、樣式優先級
- CSS 優先規則1：最近的祖先樣式比其他祖先樣式優先級高。
- CSS 優先規則2："直接樣式"比"祖先樣式"優先級高。
- CSS 優先規則3：優先級關係：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 標籤選擇器 = 僞元素選擇器。
- CSS 優先規則4：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及僞類選擇器的個數之和（b），計算選擇符中標籤選擇器和僞元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最後兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。
- CSS 優先規則5：屬性後插有 !important 的屬性擁有最高優先級。若同時插有 !important，則再利用規則 3、4 判斷優先級。
四、Position定位
(1) Position 屬性的五個值：absolute、fixed、relative、static、sticky。
(2) absolute
- absolute 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
- absolute 定位使元素的位置與文檔流無關，因此不佔據空間。
- absolute 定位的元素和其他元素重疊。
(3) fixed
- fixed 元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
- fixed 定位使元素的位置與文檔流無關，因此不佔據空間。
- fixed 定位的元素和其他元素重疊。
我們可以發現 fixed 與 absolute 只是 第一條 不同。
(4) relative
- relative 相對定位元素的定位是相對其正常位置。
- 移動相對定位元素，但它原本所佔的空間不會改變。
- 相對定位元素經常被用來作爲絕對定位元素的容器塊。
(5) static
- HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
- 靜態定位的元素不會受到 top, bottom, left, right 影響。其他四個值則都會受 top, bottom, left, right 影響。
- 靜態定位的元素會受到 margin, padding 影響。
(6) sticky
- sticky 粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
- 粘性定位元素的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed，它會固定在目標位置。
- 粘性元素的定位表現爲在跨越特定閾值前爲相對定位，之後爲固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可使粘性定位生效。否則其行爲與相對定位相同。
五、水平垂直居中
水平居中：
- 使用 text-align: center
- 使用 margin: 0 auto （條件：必須設置元素的寬度；必須是塊級元素）
- 使用 position 和 transform：把父元素設置爲：position: relative；把子元素設置爲：position: absolute；left: 50%；transform: translateX(-50%)
- 使用 flexbox 佈局：把父元素設置爲：display: flex；justify-content: center
垂直居中：
- 使用 padding：任意值px 0 （條件：沒有設置高度）
- 使用 line-height：
// 單行 —— 把父元素的 line-height 屬性值與 height 屬性值設置爲相等
// 多行 —— 把父元素的 line-height 屬性值與 height 屬性值設置爲相等，並添加元素設置爲：
line-height: 1.5;
display: inline-block;
vertical-align: middle
- 使用 position 和 transform：把父元素設置爲：position: relative；把子元素設置爲：position: absolute；top: 50%；transform: translateY(-50%)
- 使用 flexbox 佈局：把父元素設置爲：display: flex；align-items: center
- 使用 table：把父元素設置爲：display: table；把子元素設置爲：display: table-cell； vertical-align: middle；
水平垂直居中：
- padding + text-align: center
- line-height + text-align: center
- position 和 transform：把父元素設置爲：position: relative；把子元素設置爲：position: absolute；left: 50%；top: 50%；transform: translate(-50%)
- flexbox：把父元素設置爲：display: flex；justify-content: center；align-items: center
- table：把父元素設置爲：display: table； text-align: center；把子元素設置爲：display: table-cell； vertical-align: middle；
六、Flex佈局
- 任何一個容器都可以指定爲 Flex 佈局：{ display: flex；}
- 行內元素也可以使用 Flex 佈局：{ display: inline-flex；}
- Webkit 內核的瀏覽器，必須加上-webkit 前綴：{ display: -webkit-flex； /* Safari */ }
- 設爲 Flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
容器的屬性
| 屬性名稱 | 屬性描述 | 可選值 | 默認值 | |
| 1 |
flex-direction |
主軸方向（即項目的排列方向） | row | row-reverse | column | column-reverse | row |
| 2 |
flex-wrap |
換行方式（默認情況下不換行） | nowrap | wrap | wrap-reverse | nowrap |
| 3 |
flex-flow |
flex-direction 和 flex-wrap 的簡寫 | <flex-direction> || <flex-wrap> | row nowrap |
| 4 |
justify-content |
項目在主軸上的對齊方式 | flex-start | flex-end | center | space-between | space-around | flex-start |
| 5 |
align-items |
項目在交叉軸上對齊方式 | flex-start | flex-end | center | baseline | stretch | stretch |
| 6 |
align-content |
多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 | flex-start | flex-end | center | space-between | space-around | stretch | stretch |
項目的屬性
| 屬性名稱 | 屬性描述 | 可選值 | 默認值 | |
| 1 | order | 項目的排列順序。數值越小，排列越靠前。 | <integer>，取整數 | 0 |
| 2 | flex-grow | 項目的放大比例 | <number>，負值無效，可以有小數點 | 0，即如果存在剩餘空間，也不放大。 |
| 3 |
flex-shrink |
項目的縮小比例 | <number>，負值無效，可以有小數點 | 1，即如果空間不足，該項目將縮小。 |
| 4 |
flex-basis |
項目佔據的主軸空間；它可以設爲跟 width 或 height 屬性一樣的值（比如350px），則項目將佔據固定空間。 |
<length> | auto | auto，即項目的本來大小。 |
| 5 |
flex |
flex-grow、flex-shrink 和 flex-basis 的簡寫 | none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ] |
0 1 auto，後兩個屬性可選。 兩個快捷值： auto(1 1 auto)、none(0 0 auto) |
| 6 |
align-self |
允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。 | auto | flex-start | flex-end | center | baseline | stretch | auto，即表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。 |
七、行內元素、行內塊元素和塊元素
行內元素：<span>、<a>、<br>、<input>、<img>
- 設置寬高無效
- 對 margin 設置的左右方向有效，上下無效；對 padding 設置的上下左右都有效，即會撐大空間
- 不會自動進行換行
- 多個行內元素標籤寫在一起，默認排列方式爲從左到右
行內塊元素：
- 設置寬高有效
- 對 margin 和 padding 設置的上下左右均有效
- 不會自動進行換行
- 多個行內塊元素標籤寫在一起，默認排列方式爲從左到右
塊級元素：<div>、<p>、<ul>、<ol>、<li>、<h1>...、<hr>
- 設置寬高有效
- 對 margin 和 padding 設置的上下左右均有效
- 可以自動進行換行
- 多個塊級元素標籤寫在一起，默認排列方式爲從上至下
三者的轉換：
- 轉換爲行內元素：display:inline
- 轉換爲塊級元素：display:block
- 轉換爲行內塊元素：display:inline-block
八、浮動和清除浮動
相關概念:
- 浮動的定義：浮動是指讓元素脫離標準流(文檔流)，漂浮在標準流之上，和標準流不是一個層次。而且，浮動元素會按照指定的方向發生移動，遇到父元素邊界或者相鄰的浮動元素時停下來。注意：浮動元素設置寬高有效。
- 實現浮動的途徑：float、absolute、fixed 。
- 清除浮動主要針對 float 產生的浮動元素。
- 高度塌陷：當浮動元素的父元素高度自適應（不設置高度時），父元素會發生高度塌陷。
清除浮動的方法:
（1）使用 clear：{ clear:both }
- 缺點：會增加無意義的標籤。
（2）使用 br：在浮動元素下方添加：<br clear="both" />
- 缺點：不符合工作中：結構、樣式、行爲，三者分離的要求。
（3）給浮動元素的父元素設置高度
- 缺點：當浮動元素高度不確定的時候不適用。
（4）讓浮動元素的父元素也浮動
- 缺點：需要給每個浮動元素的父元素添加浮動，而且浮動多了容易出現問題。
（5）把浮動元素的父元素設置成 { display：inline-block }
- 缺點：父元素的 margin 左右、auto 失效，無法使用 { margin: 0 auto } 居中了。
（6）把浮動元素的父元素設置成 { overflow:hidden }，兼容IE6 IE7：{ zoom:1 }
（7）給浮動元素的父元素使用 :after 僞類，兼容IE6 IE7：{ zoom:1 }（推薦）
選擇父元素 :after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
注意：
:after僞類 在元素內部末尾添加內容
:after { content: "添加的內容"; } IE6 IE7 下不兼容
注意：第（1）、（2）種方法，浮動元素會佔據文檔流的空間；但後面的五種方法不會，只是解決了高度坍塌的問題。
結論：
- 如果A元素是浮動元素，且它的上一個元素是標準流中的元素，那麼A元素的相對垂直位置不會改變，也就是說A元素的頂部總是和上一個元素的底部對齊。
- 如果A元素是浮動元素，且它的上一個元素也是浮動元素，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素就會被擠到下一行)。
- 清除浮動 (clear) 只能影響使用清除的元素本身，不能影響其他元素。
九、BFC規範
BFC 即 Block Formatting Contexts (塊級格式化上下文)，是 W3C 規範中的一個概念。
觸發 BFC：只要元素滿足下面任一條件即可觸發 BFC 特性：
- body 根元素
- 浮動元素：float 除 none 以外的值
- 絕對定位元素：position 爲 absolute、fixed
- display 爲 flex、inline-flex、inline-block、table-caption、table-cell
- overflow 爲 hidden、auto、scroll (除了 visible 以外的值)
BFC 特性及應用：
- 同一個BFC下 外邊距margin 會發生摺疊
- BFC 可以包含浮動的元素，用來清除浮動：overflow: hidden
- BFC 可以阻止元素被浮動元素覆蓋：overflow: hidden
實現兩列自適應佈局：左邊爲浮動元素，寬度固定；右邊爲BFC特性：overflow: hidden，寬度自適應。
避免外邊距重疊的方法：
方法一：{ overflow: hidden; } 你可以單獨設置其中任意一個盒子，也可以兩個都設置。
方法二：{ float: left; } 或者 { position: absolute; } 你只能設置第二個盒子。
方法三：{ display: flex; } 或者 { display: table; } 或者 { display: table-caption; } 你可以單獨設置其中任意一個盒子，也可以兩個都設置。
方法四：{ display: inline-flex; } 或者 { display: inline-block; } 或者 { display: table-cell; } 你只能單獨設置其中任意一個盒子。
十、AMD和CMD的區別
AMD（Asynchronous Module Definition）即異步模塊化定義，是 RequireJS 在推廣過程中對模塊定義的規範化產出。
CMD（Common Moudle Definition）即通用模塊定義，是 SeaJS 在推廣過程中對模塊定義的規範化產出。
共同點：AMD和CMD都是 一種框架在推廣的過程中對模塊定義的規範化產出；而且它們都是異步加載模塊。
不同點：
1. RequireJS 在主文件裏是將所有的文件同時加載；然而 SeaJS 強調一個文件一個模塊。
2. AMD推崇依賴前置，CMD推崇依賴就近。
3. AMD和CMD對依賴模塊的執行時機有所不同。
AMD加載完模塊後，就立馬執行該模塊；CMD加載完模塊後不會立即執行，而是等遇到require語句的時候再執行。
4. AMD的API默認是一個當多個用，CMD的API嚴格區分，推崇職責單一。
各自的優點：AMD用戶體驗好，因爲模塊提前執行了；CMD性能好，因爲只有用戶需要的時候才執行。
十一、Border邊框
簡寫語法：border：border-width border-style border-color （border-style 是必須的，三個屬性的順序隨意）
邊框類型：border-style：none | dotted | dashed | solid | double | inherit
對邊框的四條邊分別設置不同的屬性，以style爲例：
border-style: solid;
/* 一個值時，表示四條邊都是solid類型 */
border-style: solid dotted;
/* 兩個值時，第一個值表示上下邊框的類型，第二個值表示左右邊框的類型 */
border-style: solid dotted dashed;
/* 三個值時，第一個值表示上邊框的類型，第二個值表示左右邊框的類型，第三個值表示下邊框的類型 */
border-style: solid dotted dashed inset;
/* 四個值時，依次代表上右下左邊框 */
圓角邊框屬性：
對邊框的四條邊分別設置圓角：
border-radius 的值：如果存在反斜槓符號 “/”，“/” 前面的值是設置圓角的水平方向半徑，“/”後面的值是設置圓角的垂直方向的半徑；如果沒有 “/”，則圓角的水平和垂直方向的半徑值相等。
border-top-left-radius:
/* 兩個值時分別代表圓角的水平半徑和垂直半徑 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
border-radius 的四個值是按照 top-left、top-right、bottom-right 和 bottom-left 順序來設置的。
border-radius:{1}設置一個值時，四個圓角的效果一樣；
border-radius:{2}設置兩個值時，top-left=bottom-right=第一個值，top-right=bottom-left=第二個值；
border-radius:{3}設置三個值時，第一個值設置top-left，第二個值設置top-right和bottom-left，第三個值設置bottom-right；
border-radius:{4}設置四個值是，就按順序設置樣式。
盒子陰影屬性：
/*設置盒子一條邊的陰影效果*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ]
/*設置盒子多條邊的陰影效果,用逗號隔開*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ],[ inset x-offset y-offset blur-radius spread-radius color ]
十二、CSS動畫
- 動畫屬性：transition、animation(CSS3新增)。
- animation 可以通過 @keyframes (關鍵幀) 構建一些 transition 的動畫效果。
- CSS3 一共有八個子屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode。
舉例：
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
/* 可以使用 from / to 來代替 0% / 100% */
}
</style>
十三、漸進增強和優雅降級
漸進增強和優雅降級都是一種開發方式，更是一種設計理念。
漸進增強是指在編寫Web頁面時，首先保證最基本、最核心的功能實現，並讓所有的瀏覽器（包括舊式、低端的瀏覽器）都能看到站點的內容；然後再考慮使用高級但非必要的CSS和JavaScript等增強功能，爲當前和未來的瀏覽器提供更好的支持。
優雅降級是指在編寫Web頁面時，首先必須完整的實現站點的所有內容(包括功能和效果)。然後再爲那些無法支持所有功能和效果的瀏覽器增加候選方案，使之在舊式、低端的瀏覽器上以某種形式降級體驗卻不至於完全失效。
十四、CSS應用：實現一個三角形
<div class="demo"></div>
<style type="text/css">
.demo{
width: 0;
height: 0;
border: 40px solid transparent;
border-top-color: aqua;
}
</style>
十五、Sass 和 Less 的區別
Sass 和 Less 是兩種常見的 CSS 預處理器，我們可以把 Sass 和 Less 編輯的樣式轉換爲正常的 CSS 樣式。
(1) 主要區別(實現方式)：Less在JS上運行，Sass在Ruby上使用。
Less基於JavaScript，通過npm安裝，在客戶端處理 ；Sass基於Ruby，需要安裝Ruby，在服務器處理。
爲了使用Less，我們可以將適用的JavaScript文件上傳到服務器或通過脫機編譯器編譯CSS表。
(2) 編寫變量的方式不同。
Sass使用$，而Less使用@。
(3) 在Less中，僅允許循環數值。
在Sass中，我們可以遍歷任何類型的數據；但在Less中，我們只能使用遞歸函數循環數值。
(4) Sass有Compass，Less有Preboot
Sass和Less有可用於集成mixins的擴展（在整個站點中存儲和共享CSS聲明的能力）。
Sass有適用於mixins的Compass，其中包括所有可用的選項以及未來支持的更新。
Less有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。Less的軟件支持比Sass更加分散，導致許多不同的擴展選項可能不會以相同的方式運行。對於項目，我們可能需要所有列出的擴展以獲得與Compass類似的性能。
十六、CSS3 2D 和 3D 轉換
CSS3轉換，通過 transform，我們可以移動，旋轉，縮放，和傾斜元素。
2D 轉換：translate()、rotate()、scale()、skew()、 matrix()
3D 轉換：translate()、rotate()、scale()、matrix()、perspective()
十七、display，float，position 三者的優先級
- 如果 display 的值是 none，則 position 和 float 無效。否則，繼續。
- 如果 position 的值是 absolute 或 fixed，則浮動失效，並且 display 的值 按照 對應表 設置。否則，繼續。此時，元素的位置將由 ‘top’，’right’，’bottom’ 和 ‘left’ 屬性和該框的包含塊確定。
- 如果 float 的值不是 none，則元素浮動，並且 display 的值 按照 對應表 設置。否則，繼續。
- 如果元素是根元素，display 的值 按照 對應表 設置。否則，繼續。
- 應用指定的 display 特性值。
display的轉換對應表
| 設定值 | 計算值 |
|---|---|
| inline-table | table |
| inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block | block |
| 其他 | 同設定值 |
position:absolute 和 float 會隱式的改變 display 的類型
不論之前是什麼類型的元素（display:none 除外），只要設置了 position:absolute 或 float，都會讓元素以 display:inline-block 的方式顯示，可以設置長寬，默認寬度並不會佔滿父元素，就算是顯示的設置 display:inline 或 display:block，仍然無效。
float 在 IE6 下的 雙倍邊距bug 就是利用添加 display:inline 來解決的。
position:relative 並不能夠隱式的改變 display 的類型。
END