CSS-層疊式樣式表

前言：

之前我們通過HTML語言，來編寫靜态網頁，但是僅僅有靜态網頁，卻不免讓我們陷入一種毫無感覺，甚至有點沖動關掉網頁的想法，那麼怎麼搞定這個想法那，此時你僅僅需要設定網頁（元素）的樣式就可以，以此成功的打消掉這個無理的想法。

其實，我們也可以通過元素“屬性”的設定來改變不同的樣式，但....，終究還是過于繁瑣和呆闆，除此外，相同的操作，要重複的寫。那麼？什麼是CSS（Cascading Style Sheets）層疊式樣式表，HTML用來建構網頁的結構，而CSS則建構網頁元素的樣式。

如何使用？

（1）：内聯方式

（2）：内部樣式表—規則：選擇器和樣式聲明組成

（3）：外部樣式表，也就是俗稱的引用—标記：<link rel=“stylesheet” href="xxx.css" target="_blank" rel="external nofollow" >或者<style>import ....</style>

樣式表特征？

（1）：繼承性

說明：必須是父子(有層級關系)結構，大部分的css效果是可以直接繼承給子元素的

（2）：層疊性

說明：為一個元素定義多個樣式規則，規則中的屬性不沖突時，可以同時都應用到目前元素上

（3）：優先級

說明：層疊性基礎上，如果樣式聲明沖突(重複)的話,則按照預設的優先級去應用樣式

規則：等級（由低到高）：浏覽器預設設定、樣式表（内、外部）、内聯方式

（4）：！important原則

說明：顯示調整樣式屬性優先級（絕對位置）

選擇器？

作用：規範了頁面中哪些元素能夠使用聲明好的樣式，比對頁面的元素

* 分類：v

基礎選擇器：

    1. id選擇器：選擇具有的屬性值的元素，建議一個html頁面id值唯一

    2. 元素選擇器：選擇具有相同标簽名稱的元素

    3. 類選擇器：選擇具有相同的class屬性值的元素

擴充選擇器：

    1. 并集選擇器：選擇所有元素

    2. 子選擇器：篩選選擇器1元素下的選擇器2元素；相比與後代選擇器執行效率更高

    3. 父選擇器：篩選選擇器2的父元素選擇器1

   4. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

   5. 僞類選擇器：比對元素不同的狀态的選擇器，包括：連結僞類、動态僞類

              6. 分類選擇器：類選擇器和元素選擇器結合使用

框模型？

定義：什麼是框？頁面元素皆為框，Box Model,定義了元素框處理元素的内容，外邊距，以及邊框的一種計算方式；

外邊距：元素與元素之間的距離；内邊距：元素邊框與内容之間的距離。

注意：當框模型介入到元素後，元素的占地尺寸會發生變化。

外邊距：圍繞在元素周圍的空白距離（目前元素與其他元素之間的空間量）。

内邊距：元素邊距與内容之間的距離就是内邊距，内邊距會擴大元素邊框的占地區域。

特殊元素：自帶外邊距的元素（h1~h6,p,ul,ol,dl,dd,pre,body），可以通過CSS Reset（CSS重寫）來重置具備外邊距的元素。

屬性：box-sizing：指定框模型的計算方式

1：content-box;                             2：border-box

預設值，采用預設的方式計算元素的占地區域       元素的尺寸，會包含border以及padding的值
 
實際占地寬度=左右邊框+左右内邊距+width;       實際占地寬度=width(包含了border和padding)

實際占地高度=上下邊框+上下内邊距+height       實際占地高度=height(包含了border和padding)
           

定位-浮動定位？

定位：改變元素在頁面中預設的位置

分類：1、普通流定位(預設定位方式)；2、浮動定位； 3、相對定位；4、絕對定位；5、固定定位。

定位 - 普通流定位：又稱為"文檔流定位",頁面中元素們的預設定位方式

浮動定位：讓多個塊級元素在一行内顯示

特殊效果：

                     1、當父元素顯示不下所有已浮動子元素時，最後一個将換行，但是，有可能被卡住；

                     2、元素一旦浮動起來後，寬度将以内容為主(未指定寬度情況下)；

                     3、元素一旦浮動起來後，将變為塊級元素（允許修改尺寸）（能正常處理垂直方向外邊距）；

                     4、文本，行内元素，行内塊元素是采用環繞的方式來排列的，是不會被浮動元素壓在底下的，而會巧妙的避開浮動元素

清除浮動所帶來的影響：

1：清除浮動帶來的自身影響：元素一旦浮動起來之後，就會對後續的元素帶來一定的位置影響(後續元素要上前占位)，如果後續元素不想被影響的話(不想占位)，那麼就可以通過清除浮動的方式來解決

2：浮動元素對父元素高度帶來的影響（元素的高度，都是以未浮動元素的高度為準的；浮動元素是不占高度的）

解決父元素高度方案如下：

    1、直接設定父元素高度

        弊端：不是每次都知道父元素的高度

    2、設定父元素也浮動

       弊端：不是任何時候父元素都需要浮動，而且浮動會影響後續元素

    3、為父元素設定 overflow

       取值：hidden 或 auto
    
       弊端：如果有内容需要溢出顯示的話，也會一同被隐藏

    4、在父元素中，追加空子元素，并設定其clear:both