邊框溢出

我已經構建了一個頭文件，並將寬度定義爲33.33％。這工作正常，只要我沒有邊界。只要我添加邊框，我的右邊的元素將顯示在下一行。是否有與邊界合作的屬性？邊框溢出

來源

2016-11-20 Joel

好心地張貼您的代碼 – prasanth

[這]（http://stackoverflow.com/questions/8721001/putting-a-border-around-floating-elements）將幫助我猜。 –

給出的標準CSS盒模型（內容框），你的元素的整體水平寬度將是：

border-left + padding-left + width + padding-right + border-right

正如你所看到的， width僅指內容的寬度 - 它不包括填充或邊框。

因此，如果你的元素是33.33%寬，然後應用：

border: 2px solid rgb(0,0,0);

你的元素是不再33.33%寬。

現在是2px + 33.33% + 2px寬。

解決方案＃1使用計算（）：

您可以繼續參照標準CSS盒模型（內容框），但以補償在每個2px寬度邊界邊，你可以聲明元素的寬度：

width: calc(33.33% - 4px);

解決方案＃2採用箱尺寸：

你可以告訴瀏覽器不要參考標準CSS盒模型（內容盒），並使用替代CSS盒模型（ 邊界框）代替：

box-sizing: border-box;

當瀏覽器是指邊界框模式，width確實包含包含內容和填充以及邊框。

來源

2016-11-20 15:11:48 Rounin

爲什麼先給糟糕的方法？ – NikxDa

因爲它容納了成爲標準的CSS Box Model（即內容盒）。 Box Model應該成爲標準的比賽可以追溯到2000年代中期的瀏覽器大戰。 Border-Box是Internet Explorer的首選實現。當然，參考邊框模型並沒有什麼錯，但是在繼續引用內容框模型的同時，如何處理這種情況也是值得的。 – Rounin

您可以使用

box-sizing: border-box;

看到https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

width和height屬性包括內容，填充和邊界，而不是利潤率。這是Internet Explorer在文件處於怪癖模式時使用的盒子模型。請注意，填充和邊框將位於框內，例如。box {width：350px; border：10px solid black;}導致在寬度：350px的瀏覽器中呈現的框。內容框不能爲負數，並且被置爲0，因此無法使用邊框來使元素消失。這裏的尺寸計算爲：width = border + padding + content的寬度，height = border + padding +內容的高度。

來源

2016-11-20 15:17:50 Huangism

@Quentin謝謝我試圖解決blockquote，但遇到麻煩 – Huangism

回答

相關問題