爲什麼box-sizing：border-box仍然顯示寬度爲0px的邊框？

在CSS中使用盒子大小：邊框時，我假定元素的總寬度將在其「寬度」值中定義。所以如果我說分區的寬度是20px，右邊框是10px，那麼我最終會得到一個佔用20px空間的框，其中一半是右邊框。它推到我設置寬度爲10px點和右邊界，也喜歡這裏：爲什麼box-sizing：border-box仍然顯示寬度爲0px的邊框？

#box{ 
    overflow: hidden; 
    width: 10px; 
    box-sizing: border-box; 
    height: 100px; 
    background: black; 
    border-right: 10px solid red; 
}

框將只包含紅色邊框的。當我將寬度設置爲0px時會發生什麼？我認爲這會使整個事情消失，但不，結果是完全一樣的，如上所示：jsFiddle

我的問題是，如果這是預期的行爲。似乎與我不一致。我想讓一個盒子消失，只能操縱寬度/高度。感謝您的任何意見。

來源

2012-06-21 Seka

你使用什麼瀏覽器？並非所有瀏覽器都直接支持框尺寸。有些人擁有自己專有的盒子尺寸，例如'-moz-box-sizing'和'-webkit-box-sizing'。如果你想讓東西消失，可以考慮使用'display：none;'或'visibility：hidden;' – Jrod

我也可以用錘子打破一個蛋......但是我不想:)只是在開玩笑，我真的需要元素消失就像...想到一個裂縫... – Seka

你的意思是某種動畫，你慢慢地將寬度減少到沒有？不完全確定你說的是什麼意思。如果你可以詳細闡述你想要達到的目標，那麼可能有另一種更合適的解決方案。與大多數事情一樣，有很多方法可以做到這一點。也許一個爪錘是一個不好的選擇，但也許一個劈啪作響的錘子就在你的衚衕裏。 – Jrod

減去邊框的寬度後，內容區域就是任何東西。

內容寬度和高度減去邊界從指定的「寬度」和「高度」屬性的各邊的和填充寬度計算。

指定的寬度= 10像素
邊框寬度= 10像素
內容寬度=指定的寬度（10像素） - 邊緣寬度（10像素）
內容寬度10 - 10 = 0

指定寬度= 0 PX
邊框寬度= 10像素
內容寬度=指定的寬度（0 PX） - 邊緣寬度（10像素）
內容寬度0 - 10 = -10（這將消除由邊界所用的10像素）

但是

由於內容的寬度和高度不可能是負的（[CSS21]，部分 10.2），這一計算是在0

指定的寬度= 0 PX
地板邊框寬度= 10 px
內容寬度=指定寬度（0 px） - 邊框寬度（10 px）
內容寬度0 - 10 = 0（不會除去邊框使用的10個像素）

如果您不想使用display:none;或visibility:hidden;，則需要將width:XX;和border-right:XX;都設置爲零。

來源

2012-06-21 16:52:45 codewaggle

謝謝你的回答;關鍵在於瞭解邊界因負面結果而停留，我想。但是，在你看來，你認爲這是一種行爲嗎？我想知道，因爲在最後一種情況下，邊界框和內容框的行爲是相同的，這對我來說似乎是非常直觀的。你怎麼看？ – Seka

我同意，問題是你不能允許消極大小的塊，所以這是他們如何決定處理它。我想不出一個更好的選擇。 – codewaggle

這就是你如何製作三角形！ https://css-tricks.com/examples/ShapesOfCSS/ –

看看這張截圖：

box metrics

整個箱體是100x100px你所期望的，但實際寬度爲90px + 10px右邊框。所以當你將寬度設置爲0時，寬度仍然爲0（不能有負寬度），但你仍然有10px的邊框。

來源

2012-06-21 16:16:54 sachleen

但你爲什麼還有邊框？因爲在規範之後它不應該在那裏：「內容的寬度和高度是通過從指定的'寬度'和'高度'屬性中減去相應邊的邊框和填充寬度來計算的，因爲內容寬度和高度不能是負值（[CSS21]，第10.2節），這個計算被置爲0。 [見邊框]（http://www.w3.org/TR/css3-ui/#box-sizing0） – Seka

這是怎麼回事。內容寬度（寬度不包括邊框或填充）爲0，因爲在減去邊框和填充之後，您將留下負寬度。需要注意的是你如何定義「內容」。 – sachleen

...所以元素的總寬度應該是0，對吧？如果通過定義width：10px和border-right：10px，我得到一個10px的框，如果我將寬度定義爲0px，那麼我應該得到一個0px的框，對嗎？重新引用保羅·愛爾蘭人的話：「呃，如果我說寬度是200px [0px]，天哪就是它，即使我有20px的填充[border]，它也會是200px [0px]寬的盒子。 [* {box-sizing：border-box} FTW]（http://paulirish.com/2012/box-sizing-border-box-ftw/） – Seka

爲什麼box-sizing：border-box仍然顯示寬度爲0px的邊框？

回答

相關問題