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

恩，小菜鳥(niǎo)又來(lái)了，上篇文章在這，話不多說(shuō)，這次羅列總結(jié)一下css基礎(chǔ)知識(shí)，和我一樣的菜鳥(niǎo)可以看看。

引入方式

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

外部樣式表

通過(guò)在head標(biāo)簽中加入link標(biāo)簽來(lái)引入外部樣式表，因?yàn)槠淞己玫姆蛛x性和可維護(hù)性，大多數(shù)css樣式都是通過(guò)這種方式引入的

內(nèi)部樣式表

直接將css樣式放入style標(biāo)簽置于head標(biāo)簽內(nèi)

內(nèi)聯(lián)樣式表

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

盒子模型與BFC

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

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

行內(nèi)元素和塊級(jí)元素 內(nèi)聯(lián)元素(inline)

和相鄰的內(nèi)聯(lián)元素在同一行

padding和margin的left和right可以進(jìn)行設(shè)置改變

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

塊級(jí)元素(block)

總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示

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

內(nèi)聯(lián)塊元素（inline-block）

擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行

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

外邊距重疊

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

折疊結(jié)果遵循下列計(jì)算規(guī)則：

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值

兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值

兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和

BFC Formatting context

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

BFC定義

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

BFC內(nèi)部規(guī)則

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

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

BFC的區(qū)域不會(huì)與float box重疊

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

BFC的作用

BFC的常用功能如下

文檔布局

清除浮動(dòng)

清除重疊外邊距

觸發(fā)BFC的條件

根元素

float屬性不為none

overflow不為visible

position為absolute或fixed

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

例子

自適應(yīng)兩欄式布局

效果

根據(jù)BFC第三條規(guī)則，雖然存在浮動(dòng)元素aside，但是main元素的左邊依然會(huì)跟包含塊的border相接觸，這時(shí)通過(guò)設(shè)置main元素的overflow：hidden觸發(fā)產(chǎn)生一個(gè)新的BFC，便實(shí)現(xiàn)了簡(jiǎn)單的兩欄自適應(yīng)布局。

更多例子可以查看

選擇器與優(yōu)先級(jí) 選擇器

css通過(guò)選擇器關(guān)聯(lián)html標(biāo)簽，以達(dá)到控制html元素樣式的效果，基本的選擇器有以下幾種：

派生選擇器： 直接用html標(biāo)簽進(jìn)行選擇

類選擇器： 使用html元素的class屬性進(jìn)行選擇

id選擇器： 使用html元素的id屬性進(jìn)行選擇

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

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

后代選擇器： 利用空格進(jìn)行后代的選擇

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

兄弟選擇器（貓頭鷹選擇器）： 使用+來(lái)選擇兩個(gè)緊接著的元素，且它們擁有相同的父元素，因?yàn)槠錁幼涌崴曝堫^鷹，所以又被稱為貓頭鷹選擇器，貓頭鷹選擇器雖然冷門，但是應(yīng)用在多個(gè)相同元素的排列的時(shí)候會(huì)自動(dòng)幫你處理一些邊緣問(wèn)題，這里就不展開(kāi)了詳情請(qǐng)戳

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

群組選擇器： 利用逗號(hào)進(jìn)行多個(gè)元素的選取

  div, .avatar, a{//選取所有div、avatar類和a標(biāo)簽}

屬性選擇器： 利用中括號(hào)選擇帶有特定屬性的元素

  a[title]{//選擇所有帶有title屬性的a標(biāo)簽}

優(yōu)先級(jí)（特殊性）

一般來(lái)說(shuō)，越復(fù)雜越精確的選擇器優(yōu)先級(jí)就越高，在css權(quán)威指南上，是這樣來(lái)定義和區(qū)分優(yōu)先級(jí)的：

選擇器的特殊性由選擇器本身的組件確定。特殊性值表現(xiàn)為4個(gè)部分，如：0， 0， 0， 0 

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

對(duì)于選擇器中給定的各個(gè)ID屬性值，加 0100

對(duì)于選擇器中給定的各個(gè)類屬性值、屬性選擇或偽類，加 0010

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

結(jié)合符和統(tǒng)配選擇器對(duì)特殊性沒(méi)有任何貢獻(xiàn)（后面還會(huì)更多地介紹這些值）

內(nèi)聯(lián)樣式的聲明特殊性都是1000

重要性：有時(shí)某個(gè)聲明可能非常重要，超過(guò)了其他所有聲明。CSS2.1稱之為重要聲明，并允許這些聲明的結(jié)束分號(hào)之前插入 !important 來(lái)標(biāo)志

CSS的優(yōu)先級(jí)還遵循疊加規(guī)則，即

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

補(bǔ)充

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

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

 123 

最后“123”的顏色是 red

CSS Hack 什么是CSS Hack

由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對(duì)CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果。這時(shí)，我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果，就需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過(guò)程，叫做CSS hack

CSS Hack的方法

條件注釋法

類內(nèi)屬性前綴法

.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