框大小和高度預期行爲

我最近遇到了一個問題，我似乎與css中的box-sizing:border-box標記有非常不一致的行爲。例如，下面的代碼塊似乎完全忽略了標籤。框大小和高度預期行爲

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.one { 
margin-bottom:30px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
margin-left:10px; 
overflow:hidden; 
background-color:green; 
width:40px; 
height:40px; 
} 
.two { 
height:30px; 
width:30px; 
background-color:black; 
} 
</style> 
</head> 
<body> 
<div class = 'two'></div> 
<div class = 'one'></div> 
<div class = 'two'></div> 
</body> 
</html>

我要承擔這是預期的行爲，但我還沒有看到明確講實例，其中箱尺寸是行不通的任何物品，並通過實驗我一直無法找到什麼CSS屬性似乎影響它，除了基於像素的寬度/高度似乎與它發揮不佳。任何人都願意澄清，這是一種只適用於百分比還是僅適用於水平的房產？

來源

2013-04-10 danShumway

預期的行爲是什麼？ http://tinker.io/00be0 – cimmanon 2013-04-10 18:27:58

你的元素沒有邊框或填充。我不明白爲什麼'box-sizing：border-box'會改變任何東西。 – BoltClock 2013-04-10 18:30:42

保證金不是盒子模型的一部分。這解釋了很多。我假設實現類似行爲的正確過程將嵌套在使用填充的父div中的內容。感謝您的回答，我應該早點解決這個問題。 – danShumway 2013-04-10 19:08:42

我不確定你明白box-sizing:border-box應該做什麼。那段代碼會忽略標籤？請解釋你期望的行爲以及這種差異。

至於物業本身，我假設你已經做了一些四處看看，你熟悉box-model。

例如，使用「正常」盒模型將添加填充到外側的元件的添加填充到一個元素，但是，使用相同的填充有box-sizing:border-box將增加內部的填充到該元素將保留您的原始大小。

這可以在以下jsFiddle中說明。

<style> .one { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:50px; height:50px; padding:10px; background-color:#3e3e3e; } .two { width:50px; height:50px; padding:10px; background-color:red; }

<div class = "one">one1</div><div class = "one">one2</div><div class = "one">one3</div> <div class = "two">two1</div><div class = "two">two2</div><div class = "two">two3</div>

這種情況造成的需要，以確保你的數學是正確的或風險不使用邊界框屬性時，破壞你的造型。舉例來說，如果你有<div>原來決心分別跨越你的頁面的三分之一，您可以設置它是這樣的：

<style> .one { width:33%; background-color:#3e3e3e; float:left; } </style> <div class = "one">one1</div> <div class = "one">one2</div> <div class = "one">one3</div>

http://jsfiddle.net/b4LNp/

這是好的，但添加填充它沒有border-box會導致div的總大小等於大於33％（在這種情況下，寬度+ 1em填充33％）。這會破壞您創建的列，因爲它們現在太寬而不能彼此並排。

<style> .one { width:33%; background-color:#3e3e3e; float:left; padding:1em; } </style> <div class = "one">one1</div> <div class = "one">one2</div> <div class = "one">one3</div>

http://jsfiddle.net/u4w5B/

使用border-box反而把填充在元件的內側，保持每個在它的33％，並確保不管你怎麼空間的元素，他們將留在寬度你最初告訴它。這消除了大量額外的，不必要的數學的需要。

<style> .one { width:33%; background-color:#3e3e3e; float:left; padding:1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> <div class = "one">one1</div> <div class = "one">one2</div> <div class = "one">one3</div>

http://jsfiddle.net/u4w5B/1/

欲瞭解更多信息，請查看以下鏈接：

w3 box-model explanation

Paul Irish's suggestion for *{box-sizing:border-box}

CSS Tricks box-sizing

Hong Kiat box-sizing in CSS3

希望有幫助！

來源

2013-04-10 18:42:37 Jason

只是我很愚蠢，錯過了保證金和填充/邊框之間的區別。 – danShumway 2013-04-10 19:13:55

框大小和高度預期行爲

回答

相關問題