盒模型中的一些小坑,一踩一個準.

已經入行一年多, 不過自詡HTML基礎已經十分牢固,沒想到很多HTML扒開來詳細問的時候,卻完全懵逼. 人吶,還是不能太跳....

這些坑雖然在日常開發中看起來沒有碰到過, 可也算是前端最基礎知識裡面的坑了.

答案放到了最後,方便自測

1. div1 盒子和div2盒子之間的margin是20+20 40px么.

css:.div1,.div2{ background: red;width:100px;height:100px; margin:20px;}

html: <div class="div1">hello</div> <div class="div2">world</div>

2.這段代碼的效果是下面哪一種效果,那另外一種效果該如何實現.

css: .span1{ background: red; } .span2{ background: yellow; }html: <span class="span1">hello</span> <span class="span2">world</span>

3. span設置padding值之後,會是下面這種效果么

.div1{ background:green; padding:20px; width:100px; height:100px; } .span1{ background: red; padding:20px; }<div class="div1">hello</div><span class="span1">world</span>

4. 續第三項,追加代碼,實現的效果會是下圖么

.div2{ width:100px; height:100px; background: blue; } <div class="div1">hello</div> <span class="span1">world</span> <div class="div2">welcome</div>

5. 懶得描述,直接上代碼和圖,反正都是能看得懂的.

代碼實現效果是下圖么.

.span1{ background: red; width:100px; height:100px; float:left; } <span class="span1">world</span>

6.下面哪個代碼段對應哪個效果圖

代碼段1: .div1{ background:green;padding:20px;width:100px;height:100px; position:absolute; } .div2{ width:100px;height:100px;background: blue; float:left; }代碼段2: .div1{ background:green;padding:20px;width:100px;height:100px; float:left; } .div2{ width:100px;height:100px;background: blue; position:absolute; }共同代碼: <div class="div1">hello</div> <div class="div2">welcome</div>

效果圖1

------------------先來一波圖緩一緩----------------------------------------------------

答案:

1. 不是40px,而是20px.

因為盒子的上下margin 會與上一個/下一個盒子的上下margin發生重疊,所以這裡應該是20px,而非40px. 在所以在日常開發中, 推薦對盒子統一用margin-bottom 或者 margin-top比較好.

2. 上面的代碼實現的效果是第一幅圖,第二圖效果圖的實現只要將兩個span寫在一行.

原因是因為瀏覽器會將換行當成一行佔位符來解析.

3. 上面那個代碼實現那個圖其實是錯誤的,上面那個圖實現的代碼應該如下圖

span的padding-top和padding-bottom是"很不符合"盒模型規範的東西, 按照剛學習盒模型時候的思路來理解,這倆元素沒有設置其他樣式,不會有重疊的地方.

可 事實是span的padding-top/bottom作為一個很特殊的存在 :有padding的樣子,但是不做padding該做的事(撐盒子) . 也就是說上圖span的padding-top/bottom只是顯示出來它padding了這麼多,可是padiing出來的這個並不會影響到盒子的顯示位置.

4. 如果能看懂第三個問題的回答的話 其實第四個問題也就差不多能知道原因了,4代碼的實現效果並不是上圖那樣,而是下圖這樣

span的padding-top/bottom是很特殊的盒模型屬性存在, 還是上面的話:有padding的樣子,但是不做padding該做的事,

可是至於為什麼welcome會在span的紅色背景上面顯示,我並不知道,看官們,知道的話麻煩評論里告訴我

5. 實現效果應該如下圖

要想在不改變span的display的情況下來實現這個效果, 還有一個辦法就是讓span脫離文檔流.

6. 因為答案5剛好提到了文檔流,所以這個是這個就是文檔流里的一個坑,

第一個代碼段對應的是第一幅圖,第二個代碼段對應的是第二幅圖

為什麼嘞. 相比於float, position:absolute是更加徹底的脫離文檔流, float並不能算完全脫離文檔流( 反正我是這麼說服我自己的,求更科學的解釋) ,所以完全脫離文檔流的div會覆蓋在不完全脫離文檔流的div上.

----------------------------------------------------------------------------------------------

太晚了 以後碰到了坑隨後再更, 很基礎的東西裡面有這麼多沒注意到的東西,

T.T

推薦閱讀：