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

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

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

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

以下是部門常用知識點：

    行內式：將CSS代碼書寫在HTML標簽的style屬性中。style是一個通用屬性，每一個標簽里面都擁有這個屬性，規則：
                                                        <標簽名  style=”屬性:值;屬性:值;”>
    嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過HTML中的
   外鏈式：寫以.css擴展名的文件，然后在標簽中使用標簽，將css文件鏈接到html文件中，規則：
                                                             <標簽名  style=”屬性:值;屬性:值;”>

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

       所有HTML元素可以看作盒子，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，
       它包括：margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)
       盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

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

(省略......)

css預處理器是用一種專門的語言，進行網頁的樣式設計，之后在被編譯為正常的css文件，以供項目使用。使用css預處理語言的好處：是css更加簡潔、方便修改、可讀性強、適應新強并且更易于代碼的維護。

sass是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮進風格，和css編寫規范有著很大的出入，是不使用花括號和分號的，所以不被廣為接受。

 SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。

sass和scss其實是一樣的css預處理語言，SCSS 是 Sass 3 引入新的語法，其后綴名是分別為 .sass和.scss兩種。
SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。
兩者是有不同的，繼sass之后scss的編寫規范基本和css一致，sass時代是有嚴格的縮進規范并且沒有‘{}’和‘；’。
而scss則和css的規范是一致的。

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

直接跳過

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

$ 符號來標識變量；把反復使用的css屬性值定義成變量；

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

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

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

$nav-color: #F90;// 當前樣式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用，當前樣式表其他地方可以重復定義和使用
  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屬性，可以寫成：
p {
    border: {   // 注意，border后面必須加上冒號。
        color: red;
    }
}

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

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

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

字符串運算： + 可用于連接字符串
注意，如果有引號字符串（位于 + 左側）連接無引號字符串，運算結果是有引號的，
相反，無引號字符串（位于 + 左側）連接有引號字符串，運算結果則沒有引號
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; }

繼承是基于類class的（有時是基于其他類型的選擇器）
允許一個選擇器，繼承另一個選擇器。比如，現有class1：
.class1 {
border: 1px solid #ffffd;}

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

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

避免不停地重復一段樣式

   // 使用@mixin命令，定義一個代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調用這個mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強大之處，在于可以指定參數和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時候，根據需要加入參數：
　　div {
　　　　@include left(20px);
　　}

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

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

比如控制指令，條件語句、循環語句、自定義函數等，這部分就不列出來了。

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