摘要：即元素脫離文檔流的布局，在頁(yè)面的任意位置顯示絕對(duì)定位脫離文檔流的布局，遺留下來(lái)的空間由后面的元素填充。相對(duì)定位不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。

CSS 指層疊樣式表 (Cascading Style Sheets)

Sass (Syntactically Awesome StyleSheets)，是由buby語(yǔ)言編寫(xiě)的一款css預(yù)處理語(yǔ)言，和html一樣有嚴(yán)格的縮進(jìn)風(fēng)格，和css編寫(xiě)規(guī)范有著很大的出入，是不使用花括號(hào)和分號(hào)的，所以不被廣為接受。 Sass 是一款強(qiáng)化 CSS 的輔助工具，是對(duì) CSS 的擴(kuò)展，它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫(kù)（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目， 其后綴是.sass。

SCSS (Sassy CSS)，一款css預(yù)處理語(yǔ)言，SCSS 是 Sass 3 引入新的語(yǔ)法，其語(yǔ)法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說(shuō)，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語(yǔ)義的有效的 SCSS 文件。SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)。SCSS 對(duì)空白符號(hào)不敏感，其實(shí)就和css3語(yǔ)法一樣，其后綴名是分別為 .scss。

以下是部門(mén)常用知識(shí)點(diǎn)：

    行內(nèi)式：將CSS代碼書(shū)寫(xiě)在HTML標(biāo)簽的style屬性中。style是一個(gè)通用屬性，每一個(gè)標(biāo)簽里面都擁有這個(gè)屬性，規(guī)則：
                                                        <標(biāo)簽名  style=”屬性:值;屬性:值;”>
    嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過(guò)HTML中的
   外鏈?zhǔn)剑簩?xiě)以.css擴(kuò)展名的文件，然后在標(biāo)簽中使用標(biāo)簽，將css文件鏈接到html文件中，規(guī)則：
                                                             <標(biāo)簽名  style=”屬性:值;屬性:值;”>

      元素選擇器、id選擇器、類(lèi)選擇器、
      屬性選擇器(如為帶有 title 屬性的所有元素設(shè)置樣式 [title] {somestyles} )、
      屬性和值選擇器(如為帶有 title="hello title" 的所有元素設(shè)置樣式 [title=W3School] {somestyles} )、
      派生選擇器(通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式)，有三種
          后代選擇器：    空格隔開(kāi);
          子元素選擇器：  >隔開(kāi)，只能選擇作為某元素子元素的元素;
          相鄰兄弟選擇器：選擇緊接在一元素后的元素，且二者有相同父元素,
                         如設(shè)置緊接 h1 后出現(xiàn)的 p 的字體顏色：h1 + p {color: red;};
          注1：.a,.b該逗號(hào)表示存在其中一個(gè)類(lèi)的元素就設(shè)置，多元選擇；
          注1：.a.b沒(méi)有空格表示同時(shí)擁有兩個(gè)類(lèi)的元素。                           

       所有HTML元素可以看作盒子，CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素，
       它包括：margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)
       盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。

      Position屬性：規(guī)定元素的定位類(lèi)型。即元素脫離文檔流的布局，在頁(yè)面的任意位置顯示
      absolute： 絕對(duì)定位；脫離文檔流的布局，遺留下來(lái)的空間由后面的元素填充。
                 定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
      relative ：相對(duì)定位；不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。
                 定位的起始位置為此元素原先在文檔流的位置。
      fixed ：固定定位；類(lèi)似于absolute，但不隨著滾動(dòng)條的移動(dòng)而改變位置。
      static ：默認(rèn)值；默認(rèn)布局.
      輔助屬性：position屬性只是使元素脫離文檔流，要想此元素能按照希望的位置顯示，
               需要使用下面的屬性(position:static不支持這些)：
                ①left ： 表示向元素的左邊插入多少像素，使元素向右移動(dòng)多少像素。
                ②right ：表示向元素的右邊插入多少像素，使元素向左移動(dòng)多少像素。
                ③top ：表示向元素的上方插入多少像素，使元素向下移動(dòng)多少像素。
                ④bottom ：表示向元素的下方插入多少像素，使元素向上移動(dòng)多少像素。
                注：上面屬性的值可以為負(fù)，單位：px 。
               

(省略......)

css預(yù)處理器是用一種專(zhuān)門(mén)的語(yǔ)言，進(jìn)行網(wǎng)頁(yè)的樣式設(shè)計(jì)，之后在被編譯為正常的css文件，以供項(xiàng)目使用。使用css預(yù)處理語(yǔ)言的好處：是css更加簡(jiǎn)潔、方便修改、可讀性強(qiáng)、適應(yīng)新強(qiáng)并且更易于代碼的維護(hù)。

sass是由buby語(yǔ)言編寫(xiě)的一款css預(yù)處理語(yǔ)言，和html一樣有嚴(yán)格的縮進(jìn)風(fēng)格，和css編寫(xiě)規(guī)范有著很大的出入，是不使用花括號(hào)和分號(hào)的，所以不被廣為接受。

 SCSS 和 CSS 寫(xiě)法無(wú)差別，這也是 Sass 后來(lái)越來(lái)越受大眾喜歡原因之一。簡(jiǎn)單點(diǎn)說(shuō)，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。

sass和scss其實(shí)是一樣的css預(yù)處理語(yǔ)言，SCSS 是 Sass 3 引入新的語(yǔ)法，其后綴名是分別為 .sass和.scss兩種。
SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。
兩者是有不同的，繼sass之后scss的編寫(xiě)規(guī)范基本和css一致，sass時(shí)代是有嚴(yán)格的縮進(jìn)規(guī)范并且沒(méi)有‘{}’和‘；’。
而scss則和css的規(guī)范是一致的。

        // sass
        #sidebar
          width: 30%
          background-color: #faa
        // scss
        #sidebar {
          width: 30%;
          background-color: #faa;
        }

直接跳過(guò)

        多行注釋?-?這些使用?/**/?寫(xiě)入。多行注釋都保留在CSS輸出。
        單行注釋?-?這些是使用 // 跟著注釋。單行注釋不會(huì)保留在CSS輸出。

$ 符號(hào)來(lái)標(biāo)識(shí)變量；把反復(fù)使用的css屬性值定義成變量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 變量中可存在變量

$link-color: blue;
a {
  color: $link_color; // 中劃線和下劃線等價(jià)，包括對(duì)混合器和Sass函數(shù)的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果變量需要鑲嵌在字符串之中，就必須需要寫(xiě)在#{}之中。
}

$nav-color: #F90;// 當(dāng)前樣式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用，當(dāng)前樣式表其他地方可以重復(fù)定義和使用
  width: $width;
  color: $nav-color;
}
//編譯后
nav {
  width: 100px;
  color: #F90;
}

選擇器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

屬性也可以嵌套，比如border-color屬性，可以寫(xiě)成：
p {
    border: {   // 注意，border后面必須加上冒號(hào)。
        color: red;
    }
}

在嵌套的代碼塊內(nèi)，可以使用&引用父元素。比如a:hover偽類(lèi)，可以寫(xiě)成
a {
    &:hover { color: #ffb3ff; } }

所有數(shù)據(jù)類(lèi)型均支持相等運(yùn)算 == 或 !=，此外，每種數(shù)據(jù)類(lèi)型也有其各自支持的運(yùn)算方式。

數(shù)字運(yùn)算: 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串運(yùn)算： + 可用于連接字符串
注意，如果有引號(hào)字符串（位于 + 左側(cè)）連接無(wú)引號(hào)字符串，運(yùn)算結(jié)果是有引號(hào)的，
相反，無(wú)引號(hào)字符串（位于 + 左側(cè)）連接有引號(hào)字符串，運(yùn)算結(jié)果則沒(méi)有引號(hào)
p {cursor: e + -resize;} //編譯后 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 編譯為
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

繼承是基于類(lèi)class的（有時(shí)是基于其他類(lèi)型的選擇器）
允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ffffd;}

// class2要繼承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

避免不停地重復(fù)一段樣式

   // 使用@mixin命令，定義一個(gè)代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調(diào)用這個(gè)mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時(shí)候，根據(jù)需要加入?yún)?shù)：
　　div {
　　　　@include left(20px);
　　}

Sass 拓展了 @import 的功能，允許其導(dǎo)入 SCSS 或 Sass 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

    @import "foo.scss"; //都會(huì)導(dǎo)入文件 foo.scss
    @import "foo"; //都會(huì)導(dǎo)入文件 foo.scss
    @import "http://foo.com/bar";  // 插入外部文件
    @import "foo.css"; // 等同于css的import命令。
    

比如控制指令，條件語(yǔ)句、循環(huán)語(yǔ)句、自定義函數(shù)等，這部分就不列出來(lái)了。

這里只是簡(jiǎn)單介紹 scss 最基本部分,使用 scss 可以編寫(xiě)清晰、無(wú)冗余、語(yǔ)義化的 css。
變量是 scss 提供的最基本的工具。通過(guò)變量可以讓獨(dú)立的 css 值變得可重用，無(wú)論是在一條多帶帶的規(guī)則范圍內(nèi)還是在整個(gè)樣式表中。
變量、混合器的命名甚至 scss 的文件名，可以互換通用_和-。
同樣基礎(chǔ)的是 scss 的嵌套機(jī)制。嵌套允許css規(guī)則內(nèi)嵌套css規(guī)則，減少重復(fù)編寫(xiě)常用的選擇器，同時(shí)讓樣式表的結(jié)構(gòu)一眼望去更加清晰。scss同時(shí)提供了特殊的父選擇器標(biāo)識(shí)符 & ，通過(guò)它可以構(gòu)造出更高效的嵌套。
混合器允許用戶編寫(xiě)語(yǔ)義化樣式的同時(shí)避免視覺(jué)層面上樣式的重復(fù)。使用混合器減少重復(fù)，使用混合器讓你的css變得更加可維護(hù)和語(yǔ)義化。
與混合器相輔相成的選擇器繼承。繼承允許你聲明類(lèi)之間語(yǔ)義化的關(guān)系，通過(guò)這些關(guān)系可以保持你的css的整潔和可維護(hù)性。
樣式導(dǎo)入，scss 的另一個(gè)重要特性。通過(guò)樣式導(dǎo)入可以把分散在多個(gè)sass文件中的內(nèi)容合并生成到一個(gè)css文件，避免了項(xiàng)目中有大量的css文件通過(guò)原生的css @import帶來(lái)的性能問(wèn)題。通過(guò)嵌套導(dǎo)入和默認(rèn)變量值，導(dǎo)入可以構(gòu)建更強(qiáng)有力的、可定制的樣式。