摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。

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

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

（3）CSS3背景與漸變

 可以設(shè)置多個(gè)背景圖片，圖片大小，位置

線性漸變
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動(dòng)畫
在style中給動(dòng)畫一個(gè)名字，就是規(guī)定動(dòng)畫，使用@keyframes

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

margin：auto的垂直居中，需配合position：absolute一起使用，因?yàn)閙argin：auto不識(shí)別上下，只識(shí)別左右

translate的垂直居中移動(dòng)-50%，也需要position定位，因?yàn)橐鶕?jù)坐標(biāo)

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

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

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

設(shè)置在具體的每一項(xiàng)上：

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

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

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

CSS有具體以下幾個(gè)缺點(diǎn)：

語法不夠強(qiáng)大，比如無法嵌套書寫，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；

沒有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。這就導(dǎo)致了我們?cè)诠ぷ髦袩o端增加了許多工作量。而使用CSS預(yù)處理器，提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性。大大提高了我們的開發(fā)效率。

但是，CSS預(yù)處理器也不是萬金油，CSS的好處在于簡便、隨時(shí)隨地被使用和調(diào)試。預(yù)編譯CSS步驟的加入，讓我們開發(fā)工作流中多了一個(gè)環(huán)節(jié)，調(diào)試也變得更麻煩了。更大的問題在于，預(yù)編譯很容易造成后代選擇器的濫用。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，CSS預(yù)處理器有沒有解決更大的麻煩。

Sass

變量。通過 $ 符號(hào)來定義，通過變量名稱實(shí)現(xiàn)多處重復(fù)引用。

嵌套。支持選擇器及屬性嵌套，但如果想要在嵌套的選擇器里邊應(yīng)用一個(gè)類似于：hover的偽類，就需要用到 & 這個(gè)連接父選擇器的標(biāo)識(shí)符。

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

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

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

顏色函數(shù)。lighten darken

@import引入。Sass中的@import會(huì)在生成CSS文件時(shí)就把引入的所有文件先導(dǎo)入進(jìn)來，也就是所有相關(guān)的樣式會(huì)被編譯到同一個(gè)CSS文件中，無需發(fā)起額外的請(qǐng)求。

less和sass的區(qū)別，less簡單，sass強(qiáng)大
less和sass也經(jīng)常會(huì)問到
sass的使用方法

基本選擇器

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

屬性選擇器
偽類選擇器

動(dòng)態(tài)偽類：:hover”,":active"和":focus"

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


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

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

box-sizing 來自mdn
邊距重疊

在網(wǎng)頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁，即 ie 瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子，而 ff 會(huì)采用標(biāo)準(zhǔn) w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) w3c 盒子模型去解釋你的盒子，網(wǎng)頁就能在各個(gè)瀏覽器中顯示一致了。

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

行元素和塊元素有哪些

display：inline-block展示為塊級(jí)元素但又不獨(dú)占一行

行元素的特點(diǎn)：（img和input可以設(shè)置寬高）

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

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

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

頁面所有的尺寸用rem單位來設(shè)置

實(shí)現(xiàn)自適應(yīng)的其他方法 百分比 rem
@media如何使用
其中2倍那個(gè)沒有看懂

常見的瀏覽器及內(nèi)核：

IE瀏覽器內(nèi)核：Trident內(nèi)核，也是俗稱的IE內(nèi)核；

Chrome瀏覽器內(nèi)核：統(tǒng)稱為Chromium內(nèi)核或Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核；

Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱Firefox內(nèi)核；

Safari瀏覽器內(nèi)核：Webkit內(nèi)核；

Opera瀏覽器內(nèi)核：最初是自己的Presto內(nèi)核，后來是Webkit，現(xiàn)在是Blink內(nèi)核；

360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；

搜狗、遨游、QQ瀏覽器內(nèi)核：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); // 統(tǒng)一標(biāo)識(shí)語句
css的兼容性：
js的（常用）：

標(biāo)準(zhǔn)的addEventListener,而IE使用的是attachEvent

獲得DOM節(jié)點(diǎn)的方法有所差異，其獲得子節(jié)點(diǎn)方法不一致。IE：parentElementparentElement.children
Firefox：parentNode parentNode.childNodes
childNodes的下標(biāo)的含義在IE和Firefox中不同，F(xiàn)irefox使用DOM規(guī)范，childNodes中會(huì)插入空白文本節(jié)點(diǎn)。一般可以通過node.getElementsByTagName()來回避這個(gè)問題。

點(diǎn)我

這個(gè)兼容性問題真的是難受，難道我要一個(gè)一個(gè)記？一萬年記不住系列
常用的手機(jī)端的兼容性 這個(gè)要記住 雖然我現(xiàn)在還記不住