2016-06-01 71 views
7
<style type="text/css"> 
body > div { 
    display: inline; 
    position: relative; 
} 
body > div > div { 
    position: absolute; 
} 
</style> 
<div> 
    <div></div> 
</div> 

什麼是內部div的確切包含塊?如果包含的塊是內聯的,那麼絕對定位元素的確切含義塊是什麼?

如果祖先是內聯元素,則包含塊是爲該元素生成的第一個和最後一個內聯框的填充框周圍的邊界框。在CSS 2.1中,如果內聯元素被分割成多行,那麼包含塊是未定義的。

上面的文本中,「爲該元素生成的第一個和最後一個行內框的填充框周圍的邊界框是什麼意思?

回答

1

內聯元素不能「包含」傳統意義上的塊級框。會發生什麼是內聯元素被拆分成單獨的內聯框,其中生活在圍繞該塊級框的匿名塊框。見section 9.2.1.1過去的第一個例子:

當inline框包含一個在流塊級框,內聯框(和相同的行框內的內聯祖先)圍繞塊級箱損壞(和任何只能由可摺疊空白和/或溢出元素連續或分隔的塊級別的兄弟姐妹),將內聯框分成兩個框(即使任何一方都是空的),塊的每一側都有一個框 - 級別框(es)。休息之前和休息之後的線框包含在匿名塊框中,並且塊級框成爲這些匿名框的兄弟。當這樣的內聯框受到相對定位的影響時,任何生成的轉換也會影響內聯框中包含的塊級框。

(沒有翻譯在這裏發生,所以最後一句是不恰當的。)

你的情況下,但有一點比較特殊,因爲外層div的開始標記之間的只有的事情,內部div的開始標籤,內部div的結束標籤和外部div的結束標籤,是元素間空白(包括換行符和縮進),在正常情況下會得到collapsed。這樣所生成的內聯框最終成爲在同一位置

  1. 空的,並且
  2. :相同的位置的strut

而且由於內聯元素沒有填充,所以空行內框的填充框被測量爲長度爲零,乘以行高。 (請注意,當您檢查外部div時,某些瀏覽器開發人員工具可能會將此顯示爲由十字形標記的單個點。)內部(絕對定位)div的包含塊由組合的邊界定義,並且任何內部div上的偏移(頂部,右側,底部,左側)與該周界相關。但是,請注意,由於內聯框實際上沒有內容,所以內部div的實際位置與外部div相同,的外部div具有的內容。

相關問題