div 疑惑？

01-25

& div{position: absolute;} #main{position: relative;} img{ display: block; width:100%; height:100%} &
& & & &&& &&& & & & & & &
上面的這段代碼中出現的效果是box2中的logo 顯示了，box1中的兩張圖片都沒顯示，如果將img的樣式width:100%; height:100%;去掉就能都顯示了，為什麼會出現這種不一致的情況呢？

牽扯到幾個問題，細說起來又得一大篇，簡單說說，不一定好懂。

1、shrink-to-fit

2、Replace Element

3、Replace Element 的 width 百分比約束

shrink-to-fit 的作用為 "收縮至合適" ，如果非替換元素（這個懶得細說了，你就簡單理解為非圖片、iframe、video、audio、表單元素之外的無特殊渲染效果的東東），有float、absolute、fix 啊這些樣式，並且它沒明確的給寬的時候，就會觸發。

簡單的說，可以想像為收縮包裹效果。比如戴橡膠手套，膠皮的彈性會自動裹住手。

因此， shrink-to-fit 後的容器，自動在寬上去適應其子容器的實際寬度

替換元素（Replace Element），相對於非替換來說，官話是指所有具備內置寬高的元素（就是不給設寬高，渲染出來自己就有寬高的玩意）。好了，這裡就是 img 了。

替換元素的百分比寬高有點特殊，在容器寬高足夠的情況下，它可以使用元素實際寬高。一旦容器比實際寬高小，那麼最大不能超過容器的寬高。

如上例：

position: absolute; 之後容器會產生 shrink-to-fit

#box1 div 已經 absolute，實際寬度計算需要根據它的子容器 div 在普通流內的寬度來決定（由於高度是auto，也需要根據子容器實際高度來確定）。

那麼好了，#box1 的子容器 div 又是absolute，不是普通流內，那麼它自身就是 0 X 0。

box1 里的替換元素 img 雖然被設定為 100% 寬高，可以最大使用外鏈圖片實際寬高數值，但是它的寬高不能超過它的包含塊（簡單理解為父容器寬高就好了），所以收縮成 0 x 0 了。

再看 #box2 div，它也已經 absolute，要計運算元元素寬度。其子 img 寬 100%，那麼容器沒有給明確的寬高約束（沒有上層容器寬高約束），img 最大可以使用到實際寬高值。由此，處於普通流的子元素 img 寬高絕定。它的包含塊寬高決定。#box2 div 具有img實際寬高值，可以被渲染出來。

所以，#box1 div 內的 img 由於是 0x0 px 沒有被渲染，你只看到了 #box2 div 的渲染結果。

ps：為了簡單不作長篇大論，故意混淆和簡略了一些概念，比如容器與包含塊、替換非替換元素等。

附帶資料：

shrink-to-fit 請參考 CSS2.1 規範 10.3.5 Floating, non-replaced elements

替換元素請參考 W3C CSS 2.1 規範Conformance: requirements and recommendations

前提：未去掉width:100%; height:100%;

Q：為什麼box2中的圖片顯示了，而box1中的圖片沒顯示。

A：之前有沒有遇到過圖片顯示不了的問題（已確定URL正確），就我目前遇到過的situation有2種。（width || height ) === 0, 或者overlapping。

為了驗證是哪種，於是我Inspect Element，發現是前者。

Q： width或者height為什麼等於0，他們是怎麼計算的？

A： Visual formatting model details，由doc可知，由於題中img的unit是percentage，所以他的width和height是由他的**containing block**所決定的

Q：誰是Img的containing blcok, 以及怎麼計算他的width和height。

A： Visual formatting model details ，由doc可以判斷img的containing block是他的parent;; 即是div。

又，由於沒有賦值給containing block，所以他width和height的value為initial, 也即是`auto`。

經過 !@^*%之後， img的containing block大小為0*0, 所以box1中的img的大小為0*100%， 0*100%。 為什麼Img的parent(div)是0*0?

而， box2中的img不也是一樣嗎？ 此時img的parent為什麼不是0*0？

誰能告訴我 T T