摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。

（1）CSS3選擇器（基本、屬性、偽類具體見下）
（2）CSS3邊框與圓角

     圓角border-radius  
     屬性：border-top-left-radius 左上角 border-top-right-radius
     右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角

（3）CSS3背景與漸變

 可以設置多個背景圖片，圖片大小，位置

線性漸變
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction也可以換成edge
徑向漸變
background: radial-gradient(center, shape size, start-color, ..., last-color);

（4）CSS3過渡

（5）CSS3變換
2D變換

3D變換
兼容性了解一下


（6）CSS3動畫
在style中給動畫一個名字，就是規定動畫，使用@keyframes

這篇文章寫的比較有條理，看完可以知道大概，但是每個特性具體如何使用，還需要再找資料深入的看

margin：auto的垂直居中，需配合position：absolute一起使用，因為margin：auto不識別上下，只識別左右

translate的垂直居中移動-50%，也需要position定位，因為要根據坐標

這篇文章總結的很好，沒錯沒錯，就是我寫的啦o(////▽////)q，湊表要臉

一方面是在父容器的幾個屬性，另一些就是子元素的屬性
容器：

    flex-direction                 子元素排列方向
    flex-wrap                      如果一條軸線排不下，如何換行
    flex-flow                      flex-direction屬性和flex-wrap屬性的簡寫形式
    justify-content                在主軸上的對齊方式
    align-items                    在交叉軸上如何對齊
    align-content                  多根軸線的對齊方式

設置在具體的每一項上：

    order             排列順序。數值越小，排列越靠前，默認為0
    flex-grow         項目的放大比例，默認為0，即如果存在剩余空間，也不放大
    flex-shrink       縮小比例，默認為1，即如果空間不足，該項目將縮小
    flex-basis        在分配多余空間之前，項目占據的主軸空間（main size）
    flex              flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
    align-self        允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性

菜鳥教程上的就寫很好，簡單易懂
這篇講的很全，包括實際例子，還包括布局

預處理器：在寫css的時候，為了兼容各種瀏覽器，我們往往需要寫很多代碼，css預處理器就是為了解決這一問題的，最常用的預處理器有sass、less和styuls

CSS有具體以下幾個缺點：

語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；

沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。這就導致了我們在工作中無端增加了許多工作量。而使用CSS預處理器，提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了我們的開發效率。

但是，CSS預處理器也不是萬金油，CSS的好處在于簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓我們開發工作流中多了一個環節，調試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。

Sass

變量。通過 $ 符號來定義，通過變量名稱實現多處重復引用。

嵌套。支持選擇器及屬性嵌套，但如果想要在嵌套的選擇器里邊應用一個類似于：hover的偽類，就需要用到 & 這個連接父選擇器的標識符。

代碼重用之繼承。使用選擇器的繼承，要使用關鍵詞@extend，后面緊跟需要繼承的選擇器。

代碼重用之Mixin混合器。使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置默認值。聲明的@mixin通過@include+minxin名稱來調用。如果一個參數可以有多組值，如box-shadow、transition等，那么參數則需要在變量后加三個點表示，如$variables...。小栗子，帶參數的：

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}

顏色函數。lighten darken

@import引入。Sass中的@import會在生成CSS文件時就把引入的所有文件先導入進來，也就是所有相關的樣式會被編譯到同一個CSS文件中，無需發起額外的請求。

less和sass的區別，less簡單，sass強大
less和sass也經常會問到
sass的使用方法

基本選擇器

空格（后代選擇器，可以是爺孫）/>（子元素選擇器）/+（手拉手，相鄰兄弟選擇器）/~（通用兄弟選擇器）/,（群組選擇器） 

屬性選擇器
偽類選擇器

動態偽類：:hover”,":active"和":focus"

:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最后一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；
:first-of-type選擇一個上級元素下的第一個同類子元素；
:last-of-type選擇一個上級元素的最后一個同類子元素；
:only-child選擇的元素是它的父元素的唯一一個了元素；
:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty選擇的元素里面沒有任何內容。


否定：not
偽元素：
：:first-line,:first-letter,:before,:after;

content-box和border-box：content-box(w3c)的width和height不包含border和padding，padding不是marginborder-box包含(ie)。默認是content-box

box-sizing 來自mdn
邊距重疊

在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

行元素：a、span、strong、input 、label
塊元素：div、p、h1到h6，table、td、tr、ul、li

行元素和塊元素有哪些

display：inline-block展示為塊級元素但又不獨占一行

行元素的特點：（img和input可以設置寬高）

設置寬度width   無效。
設置高度height  無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。

為何img，input內聯元素可以設置寬和高？
img和input屬于行內替換元素
如果上一篇沒看懂，來看這一篇

頁面中的寬度都用百分比來做

頁面所有的尺寸用rem單位來設置

實現自適應的其他方法 百分比 rem
@media如何使用
其中2倍那個沒有看懂

常見的瀏覽器及內核：

IE瀏覽器內核：Trident內核，也是俗稱的IE內核；

Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；

Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；

Safari瀏覽器內核：Webkit內核；

Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；

360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；

搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；

瀏覽器css前綴：

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 統一標識語句
css的兼容性：
js的（常用）：

標準的addEventListener,而IE使用的是attachEvent

獲得DOM節點的方法有所差異，其獲得子節點方法不一致。IE：parentElementparentElement.children
Firefox：parentNode parentNode.childNodes
childNodes的下標的含義在IE和Firefox中不同，Firefox使用DOM規范，childNodes中會插入空白文本節點。一般可以通過node.getElementsByTagName()來回避這個問題。

點我

這個兼容性問題真的是難受，難道我要一個一個記？一萬年記不住系列
常用的手機端的兼容性 這個要記住 雖然我現在還記不住