CSS的101塊格式化上下文

5月19日，二零一零年在由蒂埃里Koblentz上午11:46 | 發展 | 10評論

作者簡介：蒂埃里Koblentz是在雅虎前端工程師
他擁有TJK設計 ， EZ-css.org和CSS-101.org 。 你可以按照在Twitter蒂埃里@ thierrykoblentz 。

塊格式上下文是一個盒子，至少滿足下列之一：

  • “浮動”的價值是不是“無”，
  • “溢出”的值是不是“看得見”，
  • “顯示”的值是“細胞表”，“表標題”或“內聯塊”
  • “位置”的價值是既不是“靜態”的，也不是“相對”。

當它涉及到的可視化格式模型 （這是用戶代理是如何處理的文檔樹，視覺媒體 ），塊格式化上下文是大牌球員。 因此它是至關重要的CSS作者流，花車，清晰，和利潤率與他們的關係有堅實的理解。

規範說什麼...

如何阻止格式化背景流

塊格式化上下文所屬的定位方案 ，是正常的流動 。 因此，“塊”塊格式上下文被定位在頁面流中塊框， 內嵌 內嵌盒的格式 ， 相對定位塊或內聯盒如你所期望，定位運行箱 。 簡而言之，他們是頁面流的一部分。

什麼觸發塊格式化上下文

9.4.1節說，下面將建立新的塊格式化上下文：

  • 花車，
  • 絕對定位的元素，
  • 內聯塊，
  • 表細胞，
  • 表的標題，
  • “溢出”（比“看得見”的其他任何值）風格的元素

但根據CSS 3級規範 ，塊格式化內容（“流根”在CSS3點講）時創建符合下列條件：

這個定義意味著position:fixed建立一個新的塊格式化的背景下，太。 這是不是在9.4.1節的思念，雖然固定的定位是絕對定位（9.6.1），並在規範中引用絕對定位的元素（或包裝盒），意味著該元素的“ 位置 “屬性的子類值“絕對”或“固定”。

請注意， display:table不建立本身的塊格式化上下文。 但是，因為它可以生成匿名箱 ，其中之一（ display:table-cell ）建立一個新的塊格式化內容。 換句話說，觸發是匿名框，不display:table 。 這是作者應該牢記，因為即使兩種風格建立新的塊格式化上下文（或明或暗地）， clear不使用相同的display:table ，因為它確實display:table-cell 。

最後一個觸發fieldset元素。 奇怪的是，有沒有對這種行為，直到上www.w3.org信息HTML5的規範。 有瀏覽器的bug（ Webkit的 ， Mozilla的 ）提到這一點，但沒有“官方”。 事實上，即使在大多數瀏覽器中建立新的塊格式上下文字段集，每節3.2（UA一致性），作者並沒有認為這是理所當然的事：

CSS 2.1的不定義屬性適用於形成控制和幀，或者如何將CSS風格他們可以用來。 用戶代理可申請到這些元素的CSS屬性。 作者建議把這種支持作為實驗。 未來的CSS水平可能進一步指定此。

塊格式的背景下做

塊格式化上下文包含的花車，因為他們的流動方式，每節9.4.1，防止崩潰的邊緣，不重疊的彩車：

在一個塊格式的情況下，盒子被解僱後，垂直，一個包含塊的頂部開始。 兩兄弟框的垂直距離是確定的“保證金”的屬性。 在塊格式化方面的相鄰塊盒之間的垂直崩潰的邊緣。

在一個塊格式的情況下，每個方塊的左外緣接觸的包含塊的左邊緣（從右到左的格式，觸摸右邊緣）。 這是真實的，甚至在花車的存在（雖然一個盒子的線箱可能縮小由於彩車），除非框建立一個新的塊格式化的情況下（在這種情況下，框本身可能變得更窄由於彩車）。

不夠用的規格，這意味著在現實世界中嗎？

像任何塊框塊格式化上下文或多或少，除了這些重要的例外：

  • 塊格式化上下文防止保證金倒塌

    相鄰的塊框的垂直崩潰的邊緣，但只有當他們是在同一個塊格式化的內容。 換句話說，如果相鄰的框不屬於同一個塊格式化的內容，其保證金將不會崩潰。

    例如：

    這是第一個DIV裡面一個藍色的背景與風格， margin:20px 。

    這是第一個DIV裡面一個藍色的背景與風格， margin:20px 。

    這是一個藍色背景的DIV內的段，它與樣式margin:20px ，父DIV的樣式與overflow:hidden;zoom:1 。

    上述兩者之間的首次藍框，底部和頂部段落崩潰（差距等於20像素，40像素）的保證金，但由於過去DIV創建一個新的塊格式化內容，第三段的利潤率不崩潰，因此他們不“粘”段的容器，而該塊框的一部分。

    注 ：在IE6中，沒有明確的利潤率的DIV將無法附上的邊緣。

    當涉及到崩潰的邊緣，創建一個新的塊格式化內容為適用相同的border或padding的元素的行為。

  • 塊格式化上下文包含彩車

    我相信你已經聽說過的一句話，“ 花車始終包含浮 ”，或者聽到FNE（ 幾乎所有浮動 ）方法。 但是，在此基礎上是浮動塊格式化的背景，所以制定一個更好的辦法是說，“ 塊格式上下文始終包含花車 ”。

    例如：

    這一段是一個藍色背景的DIV內浮動，它的樣式與margin:20px

    這一段是一個藍色背景的DIV內浮動，這是風格與margin:20px 。 父DIV的樣式與overflow:hidden;zoom:1 。

    第一段是一個，所以它從流量和它的容器崩潰 ，因此，這個容器的背景不顯示浮動。

    第二段是一個浮動，但它被包含在一個DIV，創建一個新的塊格式化內容，因此，容器包住孩子的“緣盒”。 你也應該注意的是，與第一款不同的是，有沒有需要清除以前的方塊。 這通常被稱為“自我清算”，這使得很多意義上考慮，塊格式化上下文是一個流動的正常組成部分。

    注 ： clear只清除相同的塊格式化上下文內浮動。

  • 塊格式化上下文不重疊的花車

    這是我最喜歡的 。 根據規範，塊格式化上下文的邊界框不能重疊在同一個塊元素本身的格式上下文框的浮動幅度。 這意味著瀏覽器創建塊格式化上下文隱含的利潤，以防止它們重疊的浮動幅度盒。 正是由於這個原因，負利潤率應該沒有影響時，適用於塊格式的背景下花車（WebKit和IE6有一個問題-這雖然測試案例 ）。

    例如： 

     側邊欄{背景：天藍;浮動：左;寬度：180px;} 
      。側邊欄背景：黃色;浮法：右寬度：180px;} 
      ＃主{背景：粉紅，溢出：隱藏;變焦：1;邊境：5PX的固體水鴨;}

    因為這種行為是“邊界框”（而不是“緣盒”），粉紅色的框和它的兄弟姐妹之間的創造空間（例如，一個20像素的差距），作家要么需要：

    • 彩車上設置20像素的保證金
    • 邊距值設置上的粉紅色框大於彩車寬度（即margin:0 220px ）

    是的，你會使用220px ， 而不是 20px 。 因為它是試圖以適應之間的花車，沒有保證金框的邊界框 。 如果我說嘗試 ，它是因為該容器將下降，當然，如果沒有足夠的空間，兩個浮點數之間的。

    換句話說，如果粉紅色的盒子被賦予了寬度為400像素，該框應下降時，父容器是窄於770萬像素（180px + 180px + 400px【+ 10px）。 作為一個側面說明，在少數情況下，這種行為出現在Firefox中被打破（至少在v.3.5.9）（即，當上述構造的第一個孩子的body -看到測試用例 ）。

    注 ：在粉紅色的框和兩個浮點數之間的IE6顯示的空間，是由於三個像素慢跑錯誤 。

hasLayout的與塊格式化內容

正如你可能已經注意到，所有前面的例子中使用overflow:hidden;zoom:1樣式overflow:hidden;zoom:1 。 而後者則在Internet Explorer（IE 5.5/6/7）觸發hasLayout的前聲明建立在現代瀏覽器中的新塊格式化內容。 這是因為這些渲染是非常接近（ CSS規範的異同 ）。 像塊格式的背景，給出了一個佈局的元素出現，以防止崩潰的邊緣，包含花車，不重疊彩車的。

屬性/元素佈局的聲明

下面的列表表明，建立一個新的塊格式化上下文的屬性也觸發hasLayout，至少支持的瀏覽器，異常overflow在IE <7。

在Internet Explorer 5和6
position:absolute
position:fixed
float （其他比“ none “的任何值）
display:inline-block
width （任何值比“其他auto “）
height （比“其他auto “的任何值）
zoom （任何值比“ normal “）
writing-mode:tb-rl
-ms-writing-mode:tb-rl
在Internet Explorer 7
min-width （任意值）
min-height （任意值）
max-width （比其他none任何價值）
max-height （比其他none任何價值）
元素風格與overflow （任何值比其他visible ）
overflow-x和overflow-y （任何值比其他visible ）
需要考慮的事情
  • zoom和writing-mode是專有的屬性並沒有驗證。
  • IE瀏覽器5.0不支持zoom
  • 內聯元素的height width和height上觸發hasLayout，只有當這些屬性適用於這些元素（即IE6的quirks模式）。
  • overflow-x和overflow-y是對CSS3盒模型模塊的一部分
  • hasLayout的也觸發時佈局流從父佈局流是不同的（即rtl到ltr ）

在Quirks模式和IE7模式（所有版本）

  • 溢出，比可見光的東西時，細胞表元素不建立新的塊格式化的背景。
  • 溢出時的設置為可見， 建立一個新的塊格式化內容表細胞元素。

總是有一個佈局的HTML元素：

在Internet Explorer中，這些元素-默認 -佈局。

  • <body> （以及作為<html>嚴格模式下）
  • <table> ， <tr> ， <th> ， <td>
  • <img>
  • <hr>
  • <input> ， <button> ， <select> ， <textarea> ， <fieldset> ， <legend>
  • <iframe> ， <embed> ， <object> ， <applet>
  • <marquee>

收官

現代瀏覽器和Internet Explorer（<8）之間的問題，以減少風險，作者可能會選擇放棄佈局，建立新的塊格式化上下文盒。 這樣的流量是相同的，元素逃生浮以同樣的方式， clear清除相同的花車，其中預計利潤率崩潰。 此外，作者必須注意造型盒時使用hasLayout的觸發器 （即width等造型），可能需要使該元素以及一個新的塊格式化內容。

進一步閱讀

啟示

演示和測試用例

hasLayout的文章

特別感謝菲利普Wittenbergh和布魯諾·法西諾為尋找規範的引用，當一個人需要他們給我們上最好的資源和英戈超有佈局 。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

10評論

  1. 發人深省的文章，是的， - 但不回答任何問題。 我想有一側並排比較圖像將是很好的......

    PS：誰關心IE5在2010年？

    康斯坦丁 - 5月23日，2010 ＃

  2. @康斯坦丁

    我想有一側並排比較圖像將是很好的......

    本文包含活生生的實例（我想這將是比圖片更好）。

    兩人第一次演示表明塊之間的比較。 與第三演示，可以使用Firebug（或其他開發工具）把overflow宣言和關閉來看看它的中間列。

    感謝您的反饋

    評論由蒂埃里Koblentz - 5月23日，2010 ＃

  3. 在您的包裹起來你有“（8）”。 我認為應該是“（8）”。

    評論由亞當 - 2010年5月26日， ＃

  4. 感謝亞當醒目，錯字。

    評論由 Thierry Koblentz - 5月26日，2010 ＃

  5. @亞當錯別字已得到修復，謝謝！

    評論珍妮韓唐納利 - 5月26日，2010 ＃

  6. @蒂埃里

    Live是不錯，但你需要相當大的瀏覽器動物園欣賞它完全;)，如Opera有40％和FF在烏克蘭有30％的瀏覽器份額的原因 - 這是有點多餘，以保持所有這些舊的IE和FF版本你的電腦，除非你是做中國或美國的佈局。

    康斯坦丁 - 5月26日，2010 ＃

  7. @康斯坦丁

    我明白你在說什麼，但我相信它在這裡是無關緊要的作為之間的瀏覽器，但在同一頁上的不同塊在同一個瀏覽器之間的比較使不 。

    評論由 Thierry Koblentz - 5月26日，2010 ＃

  8. 我在與蒂埃里協議 - >點是，Web開發人員需要這方面的知識，與應用程序的開發人員可以針對特定的瀏覽器相比。

    換句話說，它比較容易建立一個網站，有正確的佈局時，針對特定的瀏覽器（甚至MSIE中）......頗有幾分難以建立一個網站，所有瀏覽器上，勾畫出不錯的。

    馬修·羅伯遜- 6月2日，2010 ＃

  9. 偉大的總結文章，我讀過您的另一個認為維生素，這是一個偉大的跟進！

    評論約努茨波帕 - 6月8日，2010 ＃

  10. 您好約努茨
    感謝您的反饋！

    評論由蒂埃里Koblentz - 6月8日，2010 ＃

很抱歉，評論已被封閉，在這個時候。

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機 。