所有比喻中的CSS百分比寬度和百分比填充錯誤？

請看下面的例子：所有比喻中的CSS百分比寬度和百分比填充錯誤？

http://jsfiddle.net/nvcode/BnGyu/2/

現在它顯然是顯而易見的是，瀏覽器就可以正常工作了寬度爲第一個div被完全填滿，但在第二個div我把98％的寬度和1％填補任何一方，總共100％。

瀏覽器知道100％是父寬度的全部寬度，那麼爲什麼子div不填充父級空間？

即使您更改寬度的值，它會破壞更多？

來源

2011-10-12 nvcode

默認情況下，任何塊級元素都將展開以填充其包含元素的寬度。在這種情況下，指定內部元素的寬度是多餘的。一般來說，使用明確的指標來衡量佈局的百分比會更好（也更容易混淆）。

This sums it up nicely.

來源

2011-10-12 00:37:46 jathanism

謝謝你，這讓我感到奇怪，爲什麼會發生這種事！ – nvcode

不客氣。如果你想讓一個塊100％寬，然後再添加填充，你會碰到一個相關的問題。你最終的內容總是希望你無限地滾動到右邊，因爲塊繼續填充頁面然後填充頁面。 – jathanism

我不能投票給你，因爲我沒有足夠的代表聲音，我會當我這樣做，並接受我什麼時候能夠:) – nvcode

@nvcode;第一件事div是block元件& block元件默認採用其全角parent。所以，如果你給padding & margin它不會影響結構。但有些原因，你定義width:100% &想要padding它，那麼你可以使用box-sizing: border-box財產爲此。

div{ 
     width:100%; 
     padding-left:2%; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

檢查這個http://www.quirksmode.org/css/box.html

，但它不是在IE7工作。

來源

2011-10-12 03:09:16 sandeep

所有比喻中的CSS百分比寬度和百分比填充錯誤？

回答

相關問題