欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

　　最初這篇文章打算回答寒冬大神的第一問(wèn)，談?wù)凜SS布局。本來(lái)呢我以為布局主要涉及float跟display相關(guān)屬性，以及他們的包含框、靜態(tài)位置等等。后來(lái)看了大神的一片面試文章，嗯？這里怎么還有個(gè)BFC，這是神馬東東。待我搜索一下，薩薩薩，不看不知道，越看越糊涂，這到底是個(gè)神馬東東。。。經(jīng)過(guò)一個(gè)周時(shí)間的查閱資料和自我思考，在此總結一下我對BFC的認識，愿與各位道友分享，歡迎拍磚！

　　對CSS有了解的道友們肯定都知道盒式模型這個(gè)概念，對一個(gè)元素設置CSS，首先需要知道這個(gè)元素是block還是inline類(lèi)型。而B(niǎo)FC就是用來(lái)格式化塊級盒子，同樣管理inline類(lèi)型的盒子還有IFC，以及其他的FC。那首先我們就來(lái)看一下FC的概念。

　  Formatting Context：指頁(yè)面中的一個(gè)渲染區域，并且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。

　 BFC：塊級格式化上下文，它是指一個(gè)獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來(lái)約束塊級盒子的布局，且與區域外部無(wú)關(guān)。

　　BFC的生成

　　既然上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定，CSS2.1中規定滿(mǎn)足下列CSS聲明之一的元素便會(huì )生成BFC。

• 根元素
• float的值不為none
• overflow的值不為visible
• display的值為inline-block、table-cell、table-caption
• position的值為absolute或fixed

　　看到有道友文章中把display：table也認為可以生成BFC，其實(shí)這里的主要原因在于Table會(huì )默認生成一個(gè)匿名的table-cell，正是這個(gè)匿名的table-ccell生成了BFC

　　BFC的約束規則

　瀏覽器對于BFC這塊區域的約束規則如下：

• 生成BFC元素的子元素會(huì )一個(gè)接一個(gè)的放置。垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部，兩個(gè)相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素外邊距會(huì )折疊。
• 生成BFC元素的子元素中，每一個(gè)子元素做外邊距與包含塊的左邊界相接觸，（對于從右到左的格式化，右外邊距接觸右邊界），即使浮動(dòng)元素也是如此（盡管子元素的內容區域會(huì )由于浮動(dòng)而壓縮），除非這個(gè)子元素也創(chuàng )建了一個(gè)新的BFC（如它自身也是一個(gè)浮動(dòng)元素）。

　　有道友對它做了分解，我們直接拿來(lái)：

1. 內部的Box會(huì )在垂直方向上一個(gè)接一個(gè)的放置
2. 垂直方向上的距離由margin決定。（完整的說(shuō)法是：屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì )發(fā)生重疊，與方向無(wú)關(guān)。）
3. 每個(gè)元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動(dòng)元素也是如此。（這說(shuō)明BFC中子元素不會(huì )超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
4. BFC的區域不會(huì )與float的元素區域重疊
5. 計算BFC的高度時(shí)，浮動(dòng)子元素也參與計算
6. BFC就是頁(yè)面上的一個(gè)隔離的獨立容器，容器里面的子元素不會(huì )影響到外面元素，反之亦然

　　看到以上的幾條約束，讓我想起學(xué)習css時(shí)的幾條規則

• Block元素會(huì )擴展到與父元素同寬，所以block元素會(huì )垂直排列
• 垂直方向上的兩個(gè)相鄰DIV的margin會(huì )重疊，而水平方向不會(huì )(此規則并不完全正確)
• 浮動(dòng)元素會(huì )盡量接近往左上方（或右上方）
• 為父元素設置overflow：hidden或浮動(dòng)父元素，則會(huì )包含浮動(dòng)元素
• ......

　　哈哈，一股恍然大悟的感覺(jué)有木有，原來(lái)這些規則的背后都有更深層的概念，冥冥之中自有定數。。。

　　BFC在布局中的應用

　　上面說(shuō)了那么多，那BFC究竟有何用處，畢竟再好的東西也要為我所用才行。

　　防止margin重疊：

　　同一個(gè)BFC中的兩個(gè)相鄰Box才會(huì )發(fā)生重疊與方向無(wú)關(guān)，不過(guò)由于上文提到的第一條限制，我們甚少看到水平方向的margin重疊。這在IE中是個(gè)例外，IE可以設置write-mode。下面這個(gè)demo來(lái)自寒冬大神的博客。

margin水平重疊

　　可以看到水平方向的margin發(fā)生了重疊?！　?/p>

　　要阻止margin重疊，只要將兩個(gè)元素別放在一個(gè)BFC中即可（可以用上文提到的方式讓相鄰元素其中一個(gè)生成BFC）。阻止兩個(gè)相鄰元素的margin重疊看起來(lái)沒(méi)有什么意義，主要用于嵌套元素。

margin嵌套重疊

　　此時(shí)div與ul之間的垂直距離，取div、ul、li三者之間的最大外邊距。

　　要阻止嵌套元素的重疊，只需讓ul生成BFC即可（將上例中的注釋去掉），這樣div、ul、li之間便不會(huì )發(fā)生重疊現象。而li位于同一BFC內所以仍然存在重疊現象。

　　需要注意的是：

• 如果將為ul使用overflow：hidden的方式，ul生成BFC不應該再發(fā)生重疊現象可是我在chrome、firefox、ie上的測試結果都有發(fā)生重疊現象。這個(gè)問(wèn)題，我沒(méi)找到答案，還請道友們給解答一下
• 如果為ul設置了border或padding，那元素的margin便會(huì )被包含在父元素的盒式模型內，不會(huì )與外部div重疊?！禖SS權威指南》中提到塊級正常流元素的高度設置為auto，而且只有塊級子元素，其默認高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。如果塊級元素右上內邊距或下內邊距，或者有上邊框或下邊框，其高度是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離。

　　浮動(dòng)相關(guān)問(wèn)題：

　　使得父元素包含子元素，常見(jiàn)的方式是為父元素設置overflow:hidden或浮動(dòng)父元素。根本原因在于創(chuàng )建BFC的元素，子浮動(dòng)元素也會(huì )參與其高度計算，即不會(huì )產(chǎn)生高度塌陷問(wèn)題。實(shí)際上只要讓父元素生成BFC即可，并不只有這兩種方式。

包圍浮動(dòng)

　　將上例中first中任意一項注釋去掉都可以得到包圍浮動(dòng)的效果，其中overflow：hidden方式，與正常流最接近。

　　關(guān)于清除浮動(dòng)更詳盡的方式，請大家參考這篇文章此處，dolphinX道友的博客簡(jiǎn)潔明了。

　　多欄布局的一種方式

　　上文提到的一條規則：與浮動(dòng)元素相鄰的已生成BFC的元素不能與浮動(dòng)元素相互覆蓋。利用該特性可以作為多欄布局的一種實(shí)現方式。

多欄布局

　　這種布局的特點(diǎn)在于左右兩欄寬度固定，中間欄可以根據瀏覽器寬度自適應。

　　IE中也有與BFC類(lèi)似的概念成為hasLayout,我平時(shí)工作最低也是使用IE8，并沒(méi)有涉及到這部分所以還請道友們查詢(xún)其他資料。

　　總結

　　在我第一次接觸到BFC時(shí)經(jīng)常有一個(gè)疑問(wèn)，BFC的結構是什么樣的，像DOM一樣的樹(shù)狀結構，還是一個(gè)BFC集合。其實(shí)我們不需要關(guān)心BFC的具體結構，這要看瀏覽器的具體實(shí)現采用什么樣的數據結構。對于BFC我們只需要知道使用一定的CSS聲明可以生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則可以達到一定的布局效果，為了達到特定的布局效果我們讓元素生成BFC。

　　對于CSS新手來(lái)說(shuō)不建議涉獵BFC，還是應該去看看相應的CSS布局規則，像《CSS設計指南》、《CSS權威指南》這兩本都很不錯，達到一定積累再來(lái)看BFC，說(shuō)不定會(huì )有一種豁然開(kāi)朗的感覺(jué)。BFC中幾乎涉及到CSS布局的所有重要屬性，這也是BFC的難點(diǎn)和我們需要掌握BFC的意義所在。

　　文章中的部分內容可能與道友看到的其他博客有所出入，畢竟每個(gè)人的工作經(jīng)驗、所遇問(wèn)題跟測試方法不一樣，差異在所難免，探討技術(shù)的樂(lè )趣在于不斷的總結積累與自我推翻，只要大方向正確細節問(wèn)題可以慢慢探索。

　  參考文章

　　http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html

　　http://f2e-js.com/?p=2599

　　http://www.cnblogs.com/dolphinX/p/3508869.html

　　http://wenku.baidu.com/link?url=yRqbHnEVEL58mfPg1KDneWqX5AjcL34U70ANznTaWU6DUcTx6yaEcKBbDjPxyP3GVoNN7-GdTSPbEmty6RmCTJ3qY6FzPqSB7TvwbmFayYO

　　http://reference.sitepoint.com/css/blockformatting

　　http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

　　http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html

　　到了各位道友點(diǎn)評時(shí)間，如有錯誤，還請不吝指正。。。