在CSS學(xué)習(xí)目錄中，已經(jīng)詳細地介紹了CSS如何使用。知其然，還要知其所以然。本文將介紹CSS各部分出現(xiàn)的原因，僅限個人理解，如有不妥，歡迎交流

早期的大多數(shù)網(wǎng)站標(biāo)記幾乎完全由表格和font元素組成，且對于所要表現(xiàn)的內(nèi)容不能傳達任何實際含義，使文檔可用性降低，且不易于維護。于是1995年，W3C發(fā)布了CSS草案，試圖解決結(jié)構(gòu)與樣式混雜的問題

1、如果考慮結(jié)構(gòu)與樣式徹底分離，且樣式表可能用于多個HTML文件，使用外部樣式表

2、如果樣式表僅用于當(dāng)前頁面，且減少HTTP請求數(shù)量，使用內(nèi)部樣式表

3、如果只是想為單個元素指定一些樣式，可以使用HTML的style屬性來設(shè)置一個行間樣式

通過CSS選擇器，向文檔中的一組元素類型應(yīng)用某些規(guī)則

1、通配選擇器選擇所有元素

2、元素選擇器按照HTML標(biāo)簽來選擇元素

3、類選擇器通過定義類名來選擇一類元素

4、ID選擇器選擇特定ID的元素

5、屬性選擇器根據(jù)元素的屬性及屬性值來選擇元素

6、后代選擇器通過HTML層級關(guān)系來選擇元素

7、分組選擇器將具有相同規(guī)則的元素合并設(shè)置

CSS（cascading style sheets）中文翻譯過來是層疊樣式表，最基本的一個特性就是層疊。沖突的聲明通過層疊進行排序，由此確定最終的文檔表示

在下面的例子，元素選擇器div和類選擇器.test都可以選擇出 div >

 style div{height: 100px;}.test{height: 200px;} /style div >
 
Why Hack
 CSS Hack是實現(xiàn)瀏覽器樣式兼容的兜底辦法，能不用就盡量不要使用。但是，針對一些瀏覽器的bug，比如老版本IE的bug，有時使用CSS Hack是不得已而為之的做法
 比如，對于IE6-瀏覽器主要使用下劃線_和中劃線-這兩種字符實現(xiàn)hack。如下所示，在IE6瀏覽器中，div的文本顏色為藍色，其他瀏覽器則為紅色
div{
 color:red;
 _color:blue;
}
 
Why 偽類和偽元素
 個人認為，偽類和偽元素是對html' target='_blank'>HTML元素的一個擴展，通過它們可以豐富元素的樣式表現(xiàn)
 偽類即假的類，類似于通過添加一個實際的類來達到效果，比如常見的hover鼠標(biāo)懸停效果
a:hover{background-color:lightblue;}/*淺藍，鼠標(biāo)懸停*/

 偽元素即假的元素，類似于通過添加一個實際的元素才能達到。當(dāng)然，添加的不是元素，而是生成內(nèi)容，生成內(nèi)容主要指由瀏覽器創(chuàng)建的內(nèi)容，比如:before和:after
 
Why 單位
 從廣義上講，單位是一個相對概念，其為事物坐標(biāo)系中的坐標(biāo)軸中能構(gòu)成個體的抽象概念。長度單位是指丈量空間距離上的基本單元，是CSS為了規(guī)范長度而制定的基本單位。
 為了更好的丈量和表示頁面的長度，CSS規(guī)定了絕對長度單位、字體相關(guān)的長度單位、視口相關(guān)的長度單位
【絕對長度單位】
 絕對長度單位代表一個物理測量，包括像素px(pixels)、英寸in(inches)、英寸in(inches)、英寸in(inches)、英寸in(inches)、1/4毫米q(quarter-millimeters)、點pt(points)、派卡pc(picas)
 在web上，像素px是典型的度量單位，很多其他長度單位直接映射成像素。最終，他們被按照像素處理 
1in = 2.54cm = 96px 1cm = 10mm = 96px/2.54 = 37.8px1mm = 0.1cm = 3.78px1q = 1/4mm = 0.945px1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px1pc = 12pt = 1/6in = 1/6*96px = 16px
【字體相關(guān)的長度單位】
 字體相關(guān)的相對長度單位包括em、ex、ch、rem
 em表示元素的font-size屬性的計算值，如果用于font-size屬性本身，相對于父元素的font-size；若用于其他屬性，相對于本身元素的font-size
 rem是相對于根元素html的font-size屬性的計算值
 ex是指所用字體中小寫x的高度。但不同字體x的高度可能不同。實際上，很多瀏覽器取em值一半作為ex值
 ch與ex類似，被定義為數(shù)字0的寬度。當(dāng)無法確定數(shù)字0寬度時，取em值的一半作為ch值
【視口相關(guān)的長度單位】
 視口相關(guān)的長度值相對于初始包含塊的大小。當(dāng)初始包含塊的寬高變化時，他們都會相應(yīng)地縮放。然而，當(dāng)根元素的overflow值為auto時，任何滾動條會假定不存在
 關(guān)于視口相關(guān)的單位有vh、vw、vmin、vmax4個單位
vh:布局視口高度的 1/100vw:布局視口寬度的 1/100vmin:布局視口高度和寬度之間的最小值的 1/100vmax:布局視口高度和寬度之間的最大值的 1/100
 
Why 盒模型
 盒模型是CSS布局的基礎(chǔ)，它描述了一個元素在文檔布局中所占的空間大小。而且，每個框影響著其他元素框的位置和大小 
【box-sizing】
 在CSS中盒模型被分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，第二種是IE怪異盒模型。不同之處在于后者的寬高定義的是可見元素框的尺寸，而不是元素框的內(nèi)容區(qū)尺寸。目前對于瀏覽器大多數(shù)元素都是基于W3C標(biāo)準(zhǔn)的盒模型，但對于表單form中的部分元素還是基于IE的怪異盒模型，如input里的radio、checkbox、button等元素，如果給其設(shè)置border和padding它們也只會往元素盒內(nèi)延伸
 在W3C的標(biāo)準(zhǔn)模型下，寬度和高度僅僅包含了內(nèi)容寬度，除去了邊框和內(nèi)邊距兩個區(qū)域，這樣為web設(shè)計師處理效果帶來了不少麻煩。為了解決這個問題，CSS3新增了一個盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式

 
Why margin重疊
 在網(wǎng)頁布局中，因為margin重疊的原因，我們常常把margin作為一個“問題樣式”而盡量少地使用它。但實際上，它是在很大的作用的
??HTML文檔創(chuàng)建的初衷只是用來展示信息的。HTML文檔只使用默認樣式的前提下，如果上下margin不發(fā)生重疊，則會出現(xiàn)以下幾個問題：1、連續(xù)段落或列表之類，如果沒有margin重疊，首尾項間距會和其他兄弟元素呈現(xiàn)1:2的關(guān)系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都會影響原生的布局，與web設(shè)計原則相違背；3、遺落的空的任意多個p標(biāo)簽，會影響原來的閱讀排版
??所以，我們要善用重疊，可以在列表項中同時使用margin-top和margin-bottom。這樣，使頁面結(jié)構(gòu)更具有健壯性，最后一個元素移除或位置調(diào)換，都不會破壞原生的布局
【-webkit-margin-collapse】
-webkit-margin-collapse: collapse (默認重疊) | discard (取消) | separate (分隔)
 該屬性用于設(shè)置margin是否重疊，作用于發(fā)生margin重疊的兩個元素之一。如果，兩個都使用該屬性，一個設(shè)置為discard，一個設(shè)置為separate，則最終效果為重疊collase

 
Why auto
 理解視覺格式化，可以確定得到的效果是應(yīng)該顯示的正確效果，還是瀏覽器兼容性的bug。視覺格式化中比較重要的一個概念就是auto，auto值是用來彌補實際值與所需總和的差距
【為什么塊級元素的寬度默認撐滿父級元素】
 因為塊級元素width默認值為auto，而margin、border和padding默認值都為0，依據(jù)塊級元素框的水平總和等于父元素的width的計算公式，塊級元素的寬度width默認等于包含塊也就是父元素的寬度width
【為什么塊級元素設(shè)置寬度后，默認居左顯示】
 因為為塊級元素設(shè)置寬度后，而margin、border和padding默認值都為0，依據(jù)塊級元素框的水平總和等于父元素的width的計算公式。 這種情況，叫做格式化屬性過分受限(overconstrained)，此時總會把margin-right強制為auto，從而使居左顯示，margin-right來補足剩余的寬度
【為什么固定寬度的塊級元素設(shè)置margin:auto可以實現(xiàn)水平居中顯示】
 同樣依據(jù)塊級元素框的水平總和等于父元素的width的計算公式，border、padding為0，設(shè)置固定寬度后，margin-left和margin-right平分剩余的寬度
【為什么塊級元素的高度默認為元素自身高度】
 個人認為，這與瀏覽器先從左到右，再從上到下的渲染機制有關(guān)。這種渲染機制決定了寬度值是確定的，高度值是元素自身高度。如果高度值也是確定的，即視口高度，則每渲染一個塊級元素，就要占滿整個屏幕大小，無疑是一個災(zāi)難；所以，瀏覽器在保證足夠?qū)挼那闆r下，就需要盡量小的高度，這個盡量小的高度就是元素自身高度
【為什么塊級元素設(shè)置margin:auto無法實現(xiàn)垂直居中顯示】
 瀏覽器對于margin-top、margin-bottom為auto時，會自動將其重置為0。如果要實現(xiàn)垂直居中，可以利用calc()自己計算，如果height為100px，border為0，padding為10px，包含塊的高度為200px，則margin-top = calc((200px - 100px - 10px -10px) / 2)
 [注意]要考慮垂直方向上的margin重疊問題
【為什么圖片設(shè)置margin:auto不可以實現(xiàn)水平居中顯示】
 圖片無法水平居中，類似于塊級元素?zé)o法垂直居中。因為圖片的寬度width默認是自身寬度，左右margin設(shè)置為auto，會被重置為0；如果要實現(xiàn)水平居中顯示，把圖片display設(shè)置為block即可
 
Why 行高和垂直對齊
 普通流下，塊級元素的布局主要基礎(chǔ)是盒模型，而行內(nèi)元素(包括inline-block元素)的布局則主要依靠line-height和vertical-align
 line-height行高是指文本行基線之間的距離。vertical-align用來設(shè)置垂直對齊方式，所有垂直對齊的元素都會影響行高
【為什么inline-block元素會存在底部空隙】
 inline-block元素在塊級元素中留空隙是因為圖像的默認垂直對齊方式是基線對齊(基線對齊在原理上相當(dāng)于圖像底邊與匿名文本大寫英文字母X的底邊對齊)；而匿名文本是有行高的，繼承父級元素設(shè)置的行高，默認為normal(chrome下為font-size的1.334倍)，所以X的底邊距離行框的底邊有一段距離，這段距離就是圖像留出的空隙
 于是，解決這個問題有以下3種解決辦法
 1、設(shè)置display:block，因為垂直對齊方式只能作用于替換元素和行內(nèi)元素，更改為塊級元素，會使垂直對齊方式失效
 2、設(shè)置父級的line-height: 0，這樣使匿名文本與行框的距離為0
 3、設(shè)置vertical-align為top/middle/bottom
【為什么行內(nèi)元素垂直margin無效】
 因為行內(nèi)元素垂直布局主要是通過行高line-height和垂直對齊vertical-align來影響的，垂直margin并不會影響它們，所以不會影響垂直布局。而在顯示方式，margin區(qū)域不會顯示元素背景，所以也不會影響自身元素的顯示，所以行內(nèi)元素垂直margin無效
 
Why 浮動
 浮動最早的使用是出自 img src= # align= right ，用于文本環(huán)繞圖片的排版處理。如今浮動作為CSS中常用的布局方式
 浮動元素脫離普通流，然后按照指定方向，向左或者向右移動，碰到父級邊界或者另外一個浮動元素停止。浮動具有以下4個特性：
 1、浮動流：正常流中元素一個接一個排列；浮動元素也構(gòu)成浮動流
 2、塊級框：浮動元素自身會生成一個塊級框，不論這個元素本身是什么，使浮動元素周圍的外邊距不會合并
 3、包裹性：浮動元素的包含塊是指其最近的塊級祖先元素，后代浮動元素不應(yīng)該超出包含塊的上、左、右邊界。若不設(shè)置包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其所有后代浮動元素；若不設(shè)置包含塊的寬度，包含塊若浮動，則包含塊寬度由后代浮動元素撐開
 4、破壞性：浮動動元素脫離正常流，并破壞了自身的行框?qū)傩?，使其包含塊元素的高度塌陷，使浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框重新排列
【為什么需要清除浮動】
 清浮動，其實就是解決浮動元素的包含塊高度塌陷的問題
 對于標(biāo)準(zhǔn)瀏覽器來說，清浮動其實就兩種方法，一種是在浮動元素下面添加新元素設(shè)置clear屬性；另一種是觸發(fā)包含塊的BFC，使其包含浮動元素
 
Why BFC
 經(jīng)常地，我們使用BFC來清除浮動，但實際上BFC還有很多其他的用途
 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC。FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。常見的FC有BFC、IFC，還有GFC和FFC。BFC是block formatting context，也就是塊級格式化上下文，是用于布局塊級盒子的一塊渲染區(qū)域
 滿足下列條件之一就可觸發(fā)BFC
 1、根元素，即HTML元素
 2、float的值不為none
 3、overflow的值不為visible
 4、display的值為inline-block、table-cell、table-caption
 5、position的值為absolute或fixed
 BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然。經(jīng)常使用BFC實現(xiàn)以下3個用途
 1、阻止元素被浮動元素覆蓋
 說明 通過改變內(nèi)容為BFC背景為紅色的盒子的屬性值，使其成為BFC，以此阻止被綠色的浮動盒子覆蓋

 2、包含浮動元素
 說明 通過改變高度塌陷的黑色邊框的盒子的屬性值，使其成為BFC，以此來包含綠色的浮動盒子 

 3、屬于同一個BFC的兩個相鄰塊級子元素的上下margin會發(fā)生重疊，(設(shè)置writing-mode:tb-rl時，水平margin會發(fā)生重疊)。所以當(dāng)兩個相鄰塊級子元素分屬于不同的BFC時可以阻止margin重疊
 說明 淡紅色背景的塊級盒子二的外面包一個div，通過改變此div的屬性使紅色盒子與綠色盒子分屬于兩個不同的BFC，以此來阻止margin重疊 

 
Why 定位
 CSS有三種基本的布局機制：普通流、浮動流和定位流。利用定位，可以準(zhǔn)確地定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置
 當(dāng)元素絕對定位時，會從文檔流中完全刪除。元素位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于初始包含塊document，其邊界根據(jù)偏移屬性放置。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。定位元素不會流入其他元素的內(nèi)容，反之亦然
 當(dāng)元素相對定位時，它會從其正常位置移走，不過，原來所占的空間并不會因此消失。相對定位元素，會為其所有子元素建立一個新的包含塊。這個包含塊對應(yīng)于該元素原本所在的位置
 固定定位與絕對定位很類似，元素會完全從文檔流中去除，但固定元素的偏移是相對于視窗
【為什么clip屬性無效】
 絕對定位或固定定位元素才可以使用clip屬性。絕對定位元素常配合clip屬性達到元素隱藏的效果
.hide{ position:absolute; clip: rect(0,0,0,0);}
【為什么靜態(tài)位置的元素會發(fā)生跳動】
 對于居中對齊的行內(nèi)元素來說，將元素設(shè)置為absolute或fixed會發(fā)生靜態(tài)位置跳動問題。而relative或static則不會有此問題。這是因為元素默認的居中對齊是元素的內(nèi)容中線對應(yīng)父級塊級元素中線，而當(dāng)元素絕對定位或固定定位之后，定位元素左邊界將與其父級塊級元素的中線對齊

【為什么overflow屬性會失效】
 當(dāng)overflow在絕對定位元素和其包含塊之間時，絕對定位元素不會被父級overflow屬性剪裁

 解決辦法就是有兩種， 一種是讓overflow元素自身成為包含塊，給父級設(shè)置position:absolute或fixed或relative；另一種是設(shè)置overflow元素的子元素為包含塊，在絕對定位元素和overflow元素之間增加一個元素并設(shè)置position:absolute或fixed或relative
 
Why z-index
 對于所有定位，最后都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中一個必須蓋住另一個。但，如何控制哪個元素放在上層，這就引入了屬性z-index
 利用z-index，可以改變元素相互覆蓋的順序。這個屬性的名字由坐標(biāo)系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個坐標(biāo)系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會導(dǎo)致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放
 對于CSS2.1來說，頁面元素的堆疊規(guī)則如下圖所示
 對于定位元素(position不是static的元素)來說，不設(shè)置z-index或z-index相同時，后面元素覆蓋前面元素；對于處于同一堆疊上下文中的同一層次的元素來說，默認z-index較大值覆蓋z-index較小值
 一旦為一個元素指定了z-index值(不是auto)，該元素會建立自己的局部堆疊上下文。這意味著，元素的所有后代相對于該祖先元素都有其自己的疊放順序
 [注意]auto值指當(dāng)前堆疊上下文中生成的棧層次與其父框的層次相同，這個框不會建立新的局部疊放上下文。z-index:auto與z-index:0的值相等，但z-index:0會建立新的局部堆疊上下文
 CSS3的出現(xiàn)對過去的很多規(guī)則發(fā)出了挑戰(zhàn)。對層疊上下文z-index的影響更加顯著，主要包括以下8個屬性 
 1、z-index值不為auto的flex項(父元素display:flex | inline-flex)
 2、元素的透明度opacity值不等于1
 3、元素的變形transform不是none
 4、元素的mix-blend-mode值不是normal
 5、元素的filter值不是none
 6、元素的isolation值是isolate
 7、will-change指定的屬性值為上面的任意一個
 8、元素的-webkit-overflow-scrolling設(shè)置為touch
 設(shè)置以上8個屬性的任意一個，都和設(shè)置absolute類似，層疊上下文z-index會生效
 
Why 溢出
 當(dāng)一個元素固定為某個特定大小，但內(nèi)容在元素中放不下。此時可以利用溢出(overflow)來控制這種情況
 overflow-x和overflow-y的屬性原本是IE瀏覽器獨自拓展的屬性，后來被CSS3采用，并標(biāo)準(zhǔn)化。overflow-x主要用來定義對水平方向內(nèi)容溢出的剪切，而overflow-y主要用來定義對垂直方向內(nèi)容溢出的剪切

 當(dāng)overflow設(shè)置為auto或scroll或hidden時可以觸發(fā)BFC，使得overflow可以實現(xiàn)一些相關(guān)應(yīng)用 
【為什么會出現(xiàn)滾動條】
 滾動條和overflow是緊密相關(guān)的。只有當(dāng)父級的overflow的值是auto或scroll，并且元素的內(nèi)容超出元素區(qū)域時，才有可能出現(xiàn)滾動條

 無論什么瀏覽器，默認滾動條均來自 html ，而不是 body 。因為 body 元素默認有8px的margin。若滾動條來自 body 元素，則滾動條與頁面則應(yīng)該有8px的間距，實際上并沒有間距，所以滾動條來自 html 元素
 chrome/firefox/IE瀏覽器的默認滾動條寬度是17px，safari瀏覽器則是21px
 
Why flex
 CSS3引入了一種新的布局模型——flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。flex布局提供一種更加有效的方式來進行容器內(nèi)的項目布局，以適應(yīng)各種類型的顯示設(shè)備和各種尺寸的屏幕 
 伸縮容器默認存在兩條軸: 水平的主軸(main axis) 和垂直的側(cè)軸(cross axis)
 [注意]主軸方向不一定是水平的，它主要取決于justify-content屬性
 主軸起點叫main start，主軸終點叫main end；側(cè)軸起點叫cross start，側(cè)軸終點叫cross end
 伸縮項目默認沿主軸排列。單個伸縮項目占據(jù)的主軸空間叫main size ，占據(jù)的側(cè)軸空間叫cross size
 [注意]伸縮項目的main size和cross size主要由寬度或高度決定
 利用flex可以簡單的實現(xiàn)各種布局形式，詳細情況移步至此
 
Why 多列布局
 浮動作為常見排版方式只是不得已為之的行為，最初只是用來實現(xiàn)圖文混排，也最好只用于圖文混排，而不是更復(fù)雜的布局結(jié)構(gòu)
 定位用于對元素的精準(zhǔn)定位布局
 個人認為，flex布局提供的靈活布局方式可以用來替代被泛濫使用的浮動布局
 而多列布局則提供了類似于報紙、雜志類的排版方式
 CSS新增了多列布局特性，可以讓瀏覽器確定何時結(jié)束一列和開始下一列，無需任何額外的標(biāo)記。簡單來說，就是CSS3多列布局可以自動將內(nèi)容按指定的列數(shù)排列，這種特性實現(xiàn)的布局效果和報紙、雜志類排版非常相似
以上就是CSS為什么能被廣泛使用？的詳細內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。