489
w3c係列CSS之路（五）：詳解visual formatting model
本文是對w3c係列CSS之路（四）種的VFM的完善和補充，官方原文：https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
1 containing block
containing block（包含框）上節有提到，這裏給出更詳細的介紹。一個盒子的位置和大小通常都跟包含它的矩形框有關，這個矩形框就是這個盒子的包含框。標準給出了一個元素的containing block的定義：
- 首先，根元素的居住的包含框叫做initial containing block(初始包含框)；
- 對於非根元素，如果其position為static或relative，containing block的形成依賴於其最近的block container祖先塊的內容邊界；
- 如果position屬性為fixed，containing block依賴於viewport而建立；
- 如果position屬性為absolute，containing block的形成依賴於最近的，並且position值為relative | absolute | fixed 的先祖元素。如果它沒有這樣的先祖元素的話，containing block就是initial containing block。
為了更好的理解，我們舉個例子就知道了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY >
<DIV >
<P >This is text in the first paragraph...</P>
<P >This is text <EM > in the
<STRONG >second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>html的containing block是由initial containing block建立的，#div1的containing block是由body建立的，#p1的containing block是由#div1建立的，#em1的containing block是由#p2建立的......如果加上以下樣式的話：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }#div1的containing block則是由initial containing block建立的。而#em1的containing block則是由#div1建立的。2 width寬度的計算
width屬性指定了元素內容的寬度，相關信息如下：
| 可取值： | <length> | <percentage> | auto | inherit |
| 初始值: | auto |
| 適用於: | all elements but non-replaced inline elements, table rows, and row groups |
| 是否繼承: | no |
| 百分比: | 取決於containing block的寬度 |
| Media: | visual |
| Computed value: | 百分值， 或者auto，或者是絕對長度 |
width屬性對non-replaced inline elements無效，因為non-replaced inline elements 的寬度就是其內容的寬度。
最後更新：2017-04-03 05:40:12