摘要：在中，使用標準盒模型描述這些矩形盒子中的每一個。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。最常見的有簡稱和簡稱。其中列是真正顯示文檔內容的元素。同時其還支持列的偏移，即可以不從第一列開始，將某幾列作為空隙。

恩，小菜鳥又來了，上篇文章在這，話不多說，這次羅列總結一下css基礎知識，和我一樣的菜鳥可以看看。

引入方式

css的引入方式主要有以下幾種：

外部樣式表

通過在head標簽中加入link標簽來引入外部樣式表，因為其良好的分離性和可維護性，大多數css樣式都是通過這種方式引入的

內部樣式表

直接將css樣式放入style標簽置于head標簽內

內聯樣式表

直接將css樣式寫入html元素的style屬性

盒子模型與BFC

在一個文檔中，每個元素都被表示為一個矩形的盒子。確定這些盒子的尺寸, 屬性 （顏色，背景，邊框方面） 和位置是渲染引擎的目標。

在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊（margin）, 邊框邊（border）, 內填充邊（padding） 與 內容邊（content）

行內元素和塊級元素 內聯元素(inline)

和相鄰的內聯元素在同一行

padding和margin的left和right可以進行設置改變

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，固定為里面文字或圖片撐開的大小

塊級元素(block)

總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制

內聯塊元素（inline-block）

擁有內在尺寸，可設置高寬，但不會自動換行

一些瀏覽器默認的inline-block元素： input 、img 、button 、textarea 、label

外邊距重疊

在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值

兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值

兩個外邊距一正一負時，折疊結果是兩者的相加的和

BFC Formatting context

在說BFC之前，先解釋一下Formatting context，即FC。其是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。

BFC定義

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box（塊級元素）參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

BFC內部規則

內部的Box會在垂直方向，一個接一個地放置

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個box的margin-left，與內容塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此

BFC的區域不會與float box重疊

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此

計算BFC的高度時，浮動元素也參與計算

BFC的作用

BFC的常用功能如下

文檔布局

清除浮動

清除重疊外邊距

觸發BFC的條件

根元素

float屬性不為none

overflow不為visible

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

例子

自適應兩欄式布局

效果

根據BFC第三條規則，雖然存在浮動元素aside，但是main元素的左邊依然會跟包含塊的border相接觸，這時通過設置main元素的overflow：hidden觸發產生一個新的BFC，便實現了簡單的兩欄自適應布局。

更多例子可以查看

選擇器與優先級 選擇器

css通過選擇器關聯html標簽，以達到控制html元素樣式的效果，基本的選擇器有以下幾種：

派生選擇器： 直接用html標簽進行選擇

類選擇器： 使用html元素的class屬性進行選擇

id選擇器： 使用html元素的id屬性進行選擇

以上三種選擇器為css中最基本的選擇器，其他選擇器都是三者的延伸、擴展或者組合，例如：

偽元素選擇器： 利用 : 選擇偽元素

后代選擇器： 利用空格進行后代的選擇

  .header .nav{//選取header類中的nav類}

兄弟選擇器（貓頭鷹選擇器）： 使用+來選擇兩個緊接著的元素，且它們擁有相同的父元素，因為其樣子酷似貓頭鷹，所以又被稱為貓頭鷹選擇器，貓頭鷹選擇器雖然冷門，但是應用在多個相同元素的排列的時候會自動幫你處理一些邊緣問題，這里就不展開了詳情請戳

  .warp div + div{//選取warp類下的所有兄弟div}

群組選擇器： 利用逗號進行多個元素的選取

  div, .avatar, a{//選取所有div、avatar類和a標簽}

屬性選擇器： 利用中括號選擇帶有特定屬性的元素

  a[title]{//選擇所有帶有title屬性的a標簽}

優先級（特殊性）

一般來說，越復雜越精確的選擇器優先級就越高，在css權威指南上，是這樣來定義和區分優先級的：

選擇器的特殊性由選擇器本身的組件確定。特殊性值表現為4個部分，如：0， 0， 0， 0 

一個選擇器的具體特殊性如下確定：

對于選擇器中給定的各個ID屬性值，加 0100

對于選擇器中給定的各個類屬性值、屬性選擇或偽類，加 0010

對于選擇器中給定的各個元素或偽元素，加 0001。偽元素是否有特殊性？在這方面CSS2有些自相矛盾，但是在CSS2.1中明確指出，偽元素有特殊性，并且為0001

結合符和統配選擇器對特殊性沒有任何貢獻（后面還會更多地介紹這些值）

內聯樣式的聲明特殊性都是1000

重要性：有時某個聲明可能非常重要，超過了其他所有聲明。CSS2.1稱之為重要聲明，并允許這些聲明的結束分號之前插入 !important 來標志

CSS的優先級還遵循疊加規則，即

span#xxx .songs li{//這個選擇器的特殊性為0112}

補充

* 號代表通配符，選取文檔中的所有元素，一般不建議使用，首先過于暴力，其次影響渲染性能

樣式最后的渲染效果與樣式定義在文件中的先后順序有關，即后面的覆蓋前面的，與在html文檔中的先后關系無關。例如：

 123 




<strike id="ggs20"><input id="ggs20"></input></strike>
<fieldset id="ggs20"><menu id="ggs20"></menu></fieldset>
<strike id="ggs20"></strike>
<abbr id="ggs20"></abbr>

最后“123”的顏色是 red

CSS Hack 什么是CSS Hack

由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack

CSS Hack的方法

條件注釋法

類內屬性前綴法

.hack{  
  background-color:red; /* All browsers */  
  background-color:blue !important;/* All browsers but IE6 */  
  *background-color:black; /* IE6, IE7 */  
  +background-color:yellow;/* IE6, IE7*/  
  background-color:gray9; /* IE6, IE7, IE8, IE9, IE10 */  
  background-color:purple