前面的話

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

 

Why CSS

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

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

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

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

 

Why 選擇器

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

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

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

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

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

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

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

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

 

Why 層疊

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

　　在下面的例子，元素選擇器div和類選擇器.test都可以選擇出<div class="test"></div>，這就發(fā)生了沖突。由于類選擇器的特殊性大于元素選擇器，所以通過層疊進(jìn)行排序，最終該元素的樣式為{height: 200px;} ，如果去掉 .test{height: 200px;}  這條規(guī)則，則元素的樣式為{height: 100px;}

<style>div{height: 100px;}.test{height: 200px;}    </style><div class="test"></div>

 

Why Hack

　　CSS Hack是實(shí)現(xiàn)瀏覽器樣式兼容的兜底辦法，能不用就盡量不要使用。但是，針對(duì)一些瀏覽器的bug，比如老版本IE的bug，有時(shí)使用CSS Hack是不得已而為之的做法

　　比如，對(duì)于IE6-瀏覽器主要使用下劃線_和中劃線-這兩種字符實(shí)現(xiàn)hack。如下所示，在IE6瀏覽器中，div的文本顏色為藍(lán)色，其他瀏覽器則為紅色

div{
　　color:red;
　　_color:blue;
}

 

Why 偽類和偽元素

　　個(gè)人認(rèn)為，偽類和偽元素是對(duì)HTML元素的一個(gè)擴(kuò)展，通過它們可以豐富元素的樣式表現(xiàn)

　　偽類即假的類，類似于通過添加一個(gè)實(shí)際的類來達(dá)到效果，比如常見的hover鼠標(biāo)懸停效果

a:hover{background-color:lightblue;}/*淺藍(lán)，鼠標(biāo)懸停*/

　　偽元素即假的元素，類似于通過添加一個(gè)實(shí)際的元素才能達(dá)到。當(dāng)然，添加的不是元素，而是生成內(nèi)容，生成內(nèi)容主要指由瀏覽器創(chuàng)建的內(nèi)容，比如:before和:after

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

 

Why 單位

　　從廣義上講，單位是一個(gè)相對(duì)概念，其為事物坐標(biāo)系中的坐標(biāo)軸中能構(gòu)成個(gè)體的抽象概念。長度單位是指丈量空間距離上的基本單元，是CSS為了規(guī)范長度而制定的基本單位。

　　為了更好的丈量和表示頁面的長度，CSS規(guī)定了絕對(duì)長度單位、字體相關(guān)的長度單位、視口相關(guān)的長度單位

【絕對(duì)長度單位】

　　絕對(duì)長度單位代表一個(gè)物理測(cè)量，包括像素px(pixels)、英寸in(inches)、英寸in(inches)、英寸in(inches)、英寸in(inches)、1/4毫米q(quarter-millimeters)、點(diǎn)pt(points)、派卡pc(picas)

　　在web上，像素px是典型的度量單位，很多其他長度單位直接映射成像素。最終，他們被按照像素處理　　

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

1in = 2.54cm = 96px　
1cm = 10mm = 96px/2.54 = 37.8px
1mm = 0.1cm = 3.78px
1q = 1/4mm = 0.945px
1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px
1pc = 12pt = 1/6in = 1/6*96px = 16px

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

【字體相關(guān)的長度單位】

　　字體相關(guān)的相對(duì)長度單位包括em、ex、ch、rem

　　em表示元素的font-size屬性的計(jì)算值，如果用于font-size屬性本身，相對(duì)于父元素的font-size；若用于其他屬性，相對(duì)于本身元素的font-size

　　rem是相對(duì)于根元素html的font-size屬性的計(jì)算值

　　ex是指所用字體中小寫x的高度。但不同字體x的高度可能不同。實(shí)際上，很多瀏覽器取em值一半作為ex值

　　ch與ex類似，被定義為數(shù)字0的寬度。當(dāng)無法確定數(shù)字0寬度時(shí)，取em值的一半作為ch值

【視口相關(guān)的長度單位】

　　視口相關(guān)的長度值相對(duì)于初始包含塊的大小。當(dāng)初始包含塊的寬高變化時(shí)，他們都會(huì)相應(yīng)地縮放。然而，當(dāng)根元素的overflow值為auto時(shí)，任何滾動(dòng)條會(huì)假定不存在

　　關(guān)于視口相關(guān)的單位有vh、vw、vmin、vmax4個(gè)單位

vh:布局視口高度的 1/100
vw:布局視口寬度的 1/100
vmin:布局視口高度和寬度之間的最小值的 1/100
vmax:布局視口高度和寬度之間的最大值的 1/100

 

Why 盒模型

　　盒模型是CSS布局的基礎(chǔ)，它描述了一個(gè)元素在文檔布局中所占的空間大小。而且，每個(gè)框影響著其他元素框的位置和大小　　

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

【box-sizing】

　　在CSS中盒模型被分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，第二種是IE怪異盒模型。不同之處在于后者的寬高定義的是可見元素框的尺寸，而不是元素框的內(nèi)容區(qū)尺寸。目前對(duì)于瀏覽器大多數(shù)元素都是基于W3C標(biāo)準(zhǔn)的盒模型，但對(duì)于表單form中的部分元素還是基于IE的怪異盒模型，如input里的radio、checkbox、button等元素，如果給其設(shè)置border和padding它們也只會(huì)往元素盒內(nèi)延伸

　　在W3C的標(biāo)準(zhǔn)模型下，寬度和高度僅僅包含了內(nèi)容寬度，除去了邊框和內(nèi)邊距兩個(gè)區(qū)域，這樣為web設(shè)計(jì)師處理效果帶來了不少麻煩。為了解決這個(gè)問題，CSS3新增了一個(gè)盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式

 

Why margin重疊

　　在網(wǎng)頁布局中，因?yàn)閙argin重疊的原因，我們常常把margin作為一個(gè)“問題樣式”而盡量少地使用它。但實(shí)際上，它是在很大的作用的

??HTML文檔創(chuàng)建的初衷只是用來展示信息的。HTML文檔只使用默認(rèn)樣式的前提下，如果上下margin不發(fā)生重疊，則會(huì)出現(xiàn)以下幾個(gè)問題：1、連續(xù)段落或列表之類，如果沒有margin重疊，首尾項(xiàng)間距會(huì)和其他兄弟元素呈現(xiàn)1:2的關(guān)系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都會(huì)影響原生的布局，與web設(shè)計(jì)原則相違背；3、遺落的空的任意多個(gè)p標(biāo)簽，會(huì)影響原來的閱讀排版

??所以，我們要善用重疊，可以在列表項(xiàng)中同時(shí)使用margin-top和margin-bottom。這樣，使頁面結(jié)構(gòu)更具有健壯性，最后一個(gè)元素移除或位置調(diào)換，都不會(huì)破壞原生的布局

【-webkit-margin-collapse】

-webkit-margin-collapse: <collapse>(默認(rèn)重疊) | <discard>(取消) | <separate>(分隔)

　　該屬性用于設(shè)置margin是否重疊，作用于發(fā)生margin重疊的兩個(gè)元素之一。如果，兩個(gè)都使用該屬性，一個(gè)設(shè)置為discard，一個(gè)設(shè)置為separate，則最終效果為重疊collase

 

Why auto

　　理解視覺格式化，可以確定得到的效果是應(yīng)該顯示的正確效果，還是瀏覽器兼容性的bug。視覺格式化中比較重要的一個(gè)概念就是auto，auto值是用來彌補(bǔ)實(shí)際值與所需總和的差距

【為什么塊級(jí)元素的寬度默認(rèn)撐滿父級(jí)元素】

　　因?yàn)閴K級(jí)元素width默認(rèn)值為auto，而margin、border和padding默認(rèn)值都為0，依據(jù)塊級(jí)元素框的水平總和等于父元素的width的計(jì)算公式，塊級(jí)元素的寬度width默認(rèn)等于包含塊也就是父元素的寬度width

【為什么塊級(jí)元素設(shè)置寬度后，默認(rèn)居左顯示】

　　因?yàn)闉閴K級(jí)元素設(shè)置寬度后，而margin、border和padding默認(rèn)值都為0，依據(jù)塊級(jí)元素框的水平總和等于父元素的width的計(jì)算公式。 這種情況，叫做格式化屬性過分受限(overconstrained)，此時(shí)總會(huì)把margin-right強(qiáng)制為auto，從而使居左顯示，margin-right來補(bǔ)足剩余的寬度

【為什么固定寬度的塊級(jí)元素設(shè)置margin:auto可以實(shí)現(xiàn)水平居中顯示】

　　同樣依據(jù)塊級(jí)元素框的水平總和等于父元素的width的計(jì)算公式，border、padding為0，設(shè)置固定寬度后，margin-left和margin-right平分剩余的寬度

【為什么塊級(jí)元素的高度默認(rèn)為元素自身高度】

　　個(gè)人認(rèn)為，這與瀏覽器先從左到右，再從上到下的渲染機(jī)制有關(guān)。這種渲染機(jī)制決定了寬度值是確定的，高度值是元素自身高度。如果高度值也是確定的，即視口高度，則每渲染一個(gè)塊級(jí)元素，就要占滿整個(gè)屏幕大小，無疑是一個(gè)災(zāi)難；所以，瀏覽器在保證足夠?qū)挼那闆r下，就需要盡量小的高度，這個(gè)盡量小的高度就是元素自身高度

【為什么塊級(jí)元素設(shè)置margin:auto無法實(shí)現(xiàn)垂直居中顯示】

　　瀏覽器對(duì)于margin-top、margin-bottom為auto時(shí)，會(huì)自動(dòng)將其重置為0。如果要實(shí)現(xiàn)垂直居中，可以利用calc()自己計(jì)算，如果height為100px，border為0，padding為10px，包含塊的高度為200px，則margin-top = calc((200px - 100px - 10px -10px) / 2)

　　[注意]要考慮垂直方向上的margin重疊問題

【為什么圖片設(shè)置margin:auto不可以實(shí)現(xiàn)水平居中顯示】

 　　圖片無法水平居中，類似于塊級(jí)元素?zé)o法垂直居中。因?yàn)閳D片的寬度width默認(rèn)是自身寬度，左右margin設(shè)置為auto，會(huì)被重置為0；如果要實(shí)現(xiàn)水平居中顯示，把圖片display設(shè)置為block即可

 

Why 行高和垂直對(duì)齊

　　普通流下，塊級(jí)元素的布局主要基礎(chǔ)是盒模型，而行內(nèi)元素(包括inline-block元素)的布局則主要依靠line-height和vertical-align

　　line-height行高是指文本行基線之間的距離。vertical-align用來設(shè)置垂直對(duì)齊方式，所有垂直對(duì)齊的元素都會(huì)影響行高

【為什么inline-block元素會(huì)存在底部空隙】

　　inline-block元素在塊級(jí)元素中留空隙是因?yàn)閳D像的默認(rèn)垂直對(duì)齊方式是基線對(duì)齊(基線對(duì)齊在原理上相當(dāng)于圖像底邊與匿名文本大寫英文字母X的底邊對(duì)齊)；而匿名文本是有行高的，繼承父級(jí)元素設(shè)置的行高，默認(rèn)為normal(chrome下為font-size的1.334倍)，所以X的底邊距離行框的底邊有一段距離，這段距離就是圖像留出的空隙

　　于是，解決這個(gè)問題有以下3種解決辦法

　　1、設(shè)置display:block，因?yàn)榇怪睂?duì)齊方式只能作用于替換元素和行內(nèi)元素，更改為塊級(jí)元素，會(huì)使垂直對(duì)齊方式失效

　　2、設(shè)置父級(jí)的line-height: 0，這樣使匿名文本與行框的距離為0

　　3、設(shè)置vertical-align為top/middle/bottom

【為什么行內(nèi)元素垂直margin無效】

　　因?yàn)樾袃?nèi)元素垂直布局主要是通過行高line-height和垂直對(duì)齊vertical-align來影響的，垂直margin并不會(huì)影響它們，所以不會(huì)影響垂直布局。而在顯示方式，margin區(qū)域不會(huì)顯示元素背景，所以也不會(huì)影響自身元素的顯示，所以行內(nèi)元素垂直margin無效

 

Why 浮動(dòng)

　　浮動(dòng)最早的使用是出自<img src="#" align="right">，用于文本環(huán)繞圖片的排版處理。如今浮動(dòng)作為CSS中常用的布局方式

　　浮動(dòng)元素脫離普通流，然后按照指定方向，向左或者向右移動(dòng)，碰到父級(jí)邊界或者另外一個(gè)浮動(dòng)元素停止。浮動(dòng)具有以下4個(gè)特性：

　　1、浮動(dòng)流：正常流中元素一個(gè)接一個(gè)排列；浮動(dòng)元素也構(gòu)成浮動(dòng)流

　　2、塊級(jí)框：浮動(dòng)元素自身會(huì)生成一個(gè)塊級(jí)框，不論這個(gè)元素本身是什么，使浮動(dòng)元素周圍的外邊距不會(huì)合并

　　3、包裹性：浮動(dòng)元素的包含塊是指其最近的塊級(jí)祖先元素，后代浮動(dòng)元素不應(yīng)該超出包含塊的上、左、右邊界。若不設(shè)置包含塊的高度，包含塊若浮動(dòng)，則包含塊會(huì)延伸，進(jìn)而包含其所有后代浮動(dòng)元素；若不設(shè)置包含塊的寬度，包含塊若浮動(dòng)，則包含塊寬度由后代浮動(dòng)元素?fù)伍_

　　4、破壞性：浮動(dòng)動(dòng)元素脫離正常流，并破壞了自身的行框?qū)傩?，使其包含塊元素的高度塌陷，使浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框重新排列

【為什么需要清除浮動(dòng)】

　　清浮動(dòng)，其實(shí)就是解決浮動(dòng)元素的包含塊高度塌陷的問題

　　對(duì)于標(biāo)準(zhǔn)瀏覽器來說，清浮動(dòng)其實(shí)就兩種方法，一種是在浮動(dòng)元素下面添加新元素設(shè)置clear屬性；另一種是觸發(fā)包含塊的BFC，使其包含浮動(dòng)元素

 

Why BFC

　　經(jīng)常地，我們使用BFC來清除浮動(dòng)，但實(shí)際上BFC還有很多其他的用途

　　在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流、浮動(dòng)流和普通流三種。而普通流其實(shí)就是指BFC中的FC。FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。常見的FC有BFC、IFC，還有GFC和FFC。BFC是block formatting context，也就是塊級(jí)格式化上下文，是用于布局塊級(jí)盒子的一塊渲染區(qū)域

　　滿足下列條件之一就可觸發(fā)BFC

　　1、根元素，即HTML元素

　　2、float的值不為none

　　3、overflow的值不為visible

　　4、display的值為inline-block、table-cell、table-caption

　　5、position的值為absolute或fixed

　　BFC是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素，反之亦然。經(jīng)常使用BFC實(shí)現(xiàn)以下3個(gè)用途

　　1、阻止元素被浮動(dòng)元素覆蓋

　　<說明>通過改變內(nèi)容為BFC背景為紅色的盒子的屬性值，使其成為BFC，以此阻止被綠色的浮動(dòng)盒子覆蓋

　　2、包含浮動(dòng)元素

　　<說明>通過改變高度塌陷的黑色邊框的盒子的屬性值，使其成為BFC，以此來包含綠色的浮動(dòng)盒子 

　　3、屬于同一個(gè)BFC的兩個(gè)相鄰塊級(jí)子元素的上下margin會(huì)發(fā)生重疊，(設(shè)置writing-mode:tb-rl時(shí)，水平margin會(huì)發(fā)生重疊)。所以當(dāng)兩個(gè)相鄰塊級(jí)子元素分屬于不同的BFC時(shí)可以阻止margin重疊

　　<說明>淡紅色背景的塊級(jí)盒子二的外面包一個(gè)div，通過改變此div的屬性使紅色盒子與綠色盒子分屬于兩個(gè)不同的BFC，以此來阻止margin重疊 

 

Why 定位

　　CSS有三種基本的布局機(jī)制：普通流、浮動(dòng)流和定位流。利用定位，可以準(zhǔn)確地定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置

　　當(dāng)元素絕對(duì)定位時(shí)，會(huì)從文檔流中完全刪除。元素位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于初始包含塊document，其邊界根據(jù)偏移屬性放置。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。定位元素不會(huì)流入其他元素的內(nèi)容，反之亦然

　　當(dāng)元素相對(duì)定位時(shí)，它會(huì)從其正常位置移走，不過，原來所占的空間并不會(huì)因此消失。相對(duì)定位元素，會(huì)為其所有子元素建立一個(gè)新的包含塊。這個(gè)包含塊對(duì)應(yīng)于該元素原本所在的位置

　　固定定位與絕對(duì)定位很類似，元素會(huì)完全從文檔流中去除，但固定元素的偏移是相對(duì)于視窗

【為什么clip屬性無效】

　　絕對(duì)定位或固定定位元素才可以使用clip屬性。絕對(duì)定位元素常配合clip屬性達(dá)到元素隱藏的效果

.hide{
    position:absolute;
    clip: rect(0,0,0,0);
}

【為什么靜態(tài)位置的元素會(huì)發(fā)生跳動(dòng)】

　　對(duì)于居中對(duì)齊的行內(nèi)元素來說，將元素設(shè)置為absolute或fixed會(huì)發(fā)生靜態(tài)位置跳動(dòng)問題。而relative或static則不會(huì)有此問題。這是因?yàn)樵啬J(rèn)的居中對(duì)齊是元素的內(nèi)容中線對(duì)應(yīng)父級(jí)塊級(jí)元素中線，而當(dāng)元素絕對(duì)定位或固定定位之后，定位元素左邊界將與其父級(jí)塊級(jí)元素的中線對(duì)齊

【為什么overflow屬性會(huì)失效】

　　當(dāng)overflow在絕對(duì)定位元素和其包含塊之間時(shí)，絕對(duì)定位元素不會(huì)被父級(jí)overflow屬性剪裁

　　解決辦法就是有兩種， 一種是讓overflow元素自身成為包含塊，給父級(jí)設(shè)置position:absolute或fixed或relative；另一種是設(shè)置overflow元素的子元素為包含塊，在絕對(duì)定位元素和overflow元素之間增加一個(gè)元素并設(shè)置position:absolute或fixed或relative

 

Why z-index

　　對(duì)于所有定位，最后都不免遇到兩個(gè)元素試圖放在同一位置上的情況。顯然，其中一個(gè)必須蓋住另一個(gè)。但，如何控制哪個(gè)元素放在上層，這就引入了屬性z-index

　　利用z-index，可以改變?cè)叵嗷ジ采w的順序。這個(gè)屬性的名字由坐標(biāo)系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個(gè)坐標(biāo)系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會(huì)導(dǎo)致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放

　　對(duì)于CSS2.1來說，頁面元素的堆疊規(guī)則如下圖所示

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

　　對(duì)于定位元素(position不是static的元素)來說，不設(shè)置z-index或z-index相同時(shí)，后面元素覆蓋前面元素；對(duì)于處于同一堆疊上下文中的同一層次的元素來說，默認(rèn)z-index較大值覆蓋z-index較小值

　　一旦為一個(gè)元素指定了z-index值(不是auto)，該元素會(huì)建立自己的局部堆疊上下文。這意味著，元素的所有后代相對(duì)于該祖先元素都有其自己的疊放順序

　　[注意]auto值指當(dāng)前堆疊上下文中生成的棧層次與其父框的層次相同，這個(gè)框不會(huì)建立新的局部疊放上下文。z-index:auto與z-index:0的值相等，但z-index:0會(huì)建立新的局部堆疊上下文

　　CSS3的出現(xiàn)對(duì)過去的很多規(guī)則發(fā)出了挑戰(zhàn)。對(duì)層疊上下文z-index的影響更加顯著，主要包括以下8個(gè)屬性 

　　1、z-index值不為auto的flex項(xiàng)(父元素display:flex | inline-flex)

　　2、元素的透明度opacity值不等于1

　　3、元素的變形transform不是none

　　4、元素的mix-blend-mode值不是normal

　　5、元素的filter值不是none

　　6、元素的isolation值是isolate

　　7、will-change指定的屬性值為上面的任意一個(gè)

　　8、元素的-webkit-overflow-scrolling設(shè)置為touch

　　設(shè)置以上8個(gè)屬性的任意一個(gè)，都和設(shè)置absolute類似，層疊上下文z-index會(huì)生效

 

Why 溢出

　　當(dāng)一個(gè)元素固定為某個(gè)特定大小，但內(nèi)容在元素中放不下。此時(shí)可以利用溢出(overflow)來控制這種情況

　　overflow-x和overflow-y的屬性原本是IE瀏覽器獨(dú)自拓展的屬性，后來被CSS3采用，并標(biāo)準(zhǔn)化。overflow-x主要用來定義對(duì)水平方向內(nèi)容溢出的剪切，而overflow-y主要用來定義對(duì)垂直方向內(nèi)容溢出的剪切

　　當(dāng)overflow設(shè)置為auto或scroll或hidden時(shí)可以觸發(fā)BFC，使得overflow可以實(shí)現(xiàn)一些相關(guān)應(yīng)用 

【為什么會(huì)出現(xiàn)滾動(dòng)條】

　　滾動(dòng)條和overflow是緊密相關(guān)的。只有當(dāng)父級(jí)的overflow的值是auto或scroll，并且元素的內(nèi)容超出元素區(qū)域時(shí)，才有可能出現(xiàn)滾動(dòng)條

　　無論什么瀏覽器，默認(rèn)滾動(dòng)條均來自<html>，而不是<body>。因?yàn)?lt;body>元素默認(rèn)有8px的margin。若滾動(dòng)條來自<body>元素，則滾動(dòng)條與頁面則應(yīng)該有8px的間距，實(shí)際上并沒有間距，所以滾動(dòng)條來自<html>元素

　　chrome/firefox/IE瀏覽器的默認(rèn)滾動(dòng)條寬度是17px，safari瀏覽器則是21px

 

Why flex

　　CSS3引入了一種新的布局模型——flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。flex布局提供一種更加有效的方式來進(jìn)行容器內(nèi)的項(xiàng)目布局，以適應(yīng)各種類型的顯示設(shè)備和各種尺寸的屏幕 

移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

　　伸縮容器默認(rèn)存在兩條軸: 水平的主軸(main axis) 和垂直的側(cè)軸(cross axis)

　　[注意]主軸方向不一定是水平的，它主要取決于justify-content屬性

　　主軸起點(diǎn)叫main start，主軸終點(diǎn)叫main end；側(cè)軸起點(diǎn)叫cross start，側(cè)軸終點(diǎn)叫cross end

　　伸縮項(xiàng)目默認(rèn)沿主軸排列。單個(gè)伸縮項(xiàng)目占據(jù)的主軸空間叫main size ，占據(jù)的側(cè)軸空間叫cross size

　　[注意]伸縮項(xiàng)目的main size和cross size主要由寬度或高度決定

　　利用flex可以簡單的實(shí)現(xiàn)各種布局形式，詳細(xì)情況移步至此

 

Why 多列布局

　　浮動(dòng)作為常見排版方式只是不得已為之的行為，最初只是用來實(shí)現(xiàn)圖文混排，也最好只用于圖文混排，而不是更復(fù)雜的布局結(jié)構(gòu)

　　定位用于對(duì)元素的精準(zhǔn)定位布局

　　個(gè)人認(rèn)為，flex布局提供的靈活布局方式可以用來替代被泛濫使用的浮動(dòng)布局

　　而多列布局則提供了類似于報(bào)紙、雜志類的排版方式

　　CSS新增了多列布局特性，可以讓瀏覽器確定何時(shí)結(jié)束一列和開始下一列，無需任何額外的標(biāo)記。簡單來說，就是CSS3多列布局可以自動(dòng)將內(nèi)容按指定的列數(shù)排列，這種特性實(shí)現(xiàn)的布局效果和報(bào)紙、雜志類排版非常相似

 

http://www.cnblogs.com/xiaohuochai/p/7072546.html