基本填充知識

我對頁面的中間3列框下面的CSS代碼：基本填充知識

.sectionLeft, .sectionMiddle, .sectionRight { 
    float: left; 
    width: 31%; 
    height: 50px; 
    padding: 1%; 
    background-color: red; 
}

它非常好，雖然我不知道，當我試圖改變填充到6％就突然變成了的頁面。我想因爲3列，會有6％的空餘空間。我錯了嗎？我知道這很難解釋，但有人能爲我澄清它嗎？

像這樣： 1列：左％1 - 右1％ 2列：左邊％1 - 右1％ 3欄：左％1 - 右1％

所以基本上我們必須有6％的空間。

來源

2017-01-17 Mehmet

能否請你提供完整的工作示例 – Maverick

@Maverick你看到填充：1％在這裏：http://imgur.com/a/oHBsI和填充：6％在這裏：http：//imgur.com/a/exoen – Mehmet

這是因爲div的默認有box-sizing: content-box;這意味着：

默認。寬度和高度屬性（和最小/最大屬性）僅包括內容。不包括邊框，填充或邊距

因此，當您添加padding時，它們會推送內容。

如何預防？

box-sizing: border-box;這意味着：

的寬度和高度屬性（和最小/最大特性）包括含量，填充和邊界，但不是餘量

見下面的代碼段比較：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sectionLeft, 
 
.sectionMiddle, 
 
.sectionRight { 
 
    float: left; 
 
    width: 33.3%; 
 
    height: 50px; 
 
    padding: 6%; 
 
    background-color: red; 
 
    border: white 1px solid; 
 
    /* boder-box includes padding */ 
 
    box-sizing: border-box; 
 
} 
 
.sectionOther { 
 
    float: left; 
 
    width: 33.3%; 
 
    height: 50px; 
 
    padding: 6%; 
 
    background-color: red; 
 
    border: white 1px solid; 
 
    /* content box doesn't include padding therefore it overflows */ 
 
    box-sizing: content-box; 
 
}

<!-- these are box-sizing: border-box --> 
 
<div class="sectionLeft">stuff</div> 
 
<div class="sectionMiddle">stuff</div> 
 
<div class="sectionRight">stuff</div> 
 
<!-- these are box-sizing: content-box --> 
 
<div class="sectionOther">stuff</div> 
 
<div class="sectionOther">stuff</div> 
 
<div class="sectionOther">stuff</div>

You can find more info about box-sizing property here

來源

2017-01-17 20:36:28 Syden

您需要保持在1％。填充位於每個div的左側和右側。因此，對於3個div中的每一個，這是一個左右填充（2），它等於您指定填充的6個「實現」。所有填充總共需要總計6％，當您將其設置爲1％（1％* 6 = 6％）時，它會執行此操作。如果您嘗試將其設置爲6％，那麼總填充量將爲6％* 6 = 36％，並添加到您的其他3 31％，這是總計129％。

來源

2017-01-17 20:32:07

我完全明白了！謝謝！ – Mehmet

這其實不是他正確的答案。沒有冒犯的意思 – Maverick

我得到的困惑和它真的愚蠢的瀏覽器是如何計算它。

例如，如果您將框設置爲100px並左右添加10px填充，框大小將爲120px padding-left + width + padding-right。

真的很愚蠢的事情，你需要做的是改變計算框模型的算法。你用CSS中的box-sizing屬性來做到這一點。

box-sizing: border-box;

Working example

來源

2017-01-17 20:36:48 Maverick

在你的榜樣，子元素的填充設置爲一個百分比，這個百分比是從父容器的大小來計算（無論是父DIV或者是整個頁面本身）。

.container { 
    width: 1000px; 
    background: grey; 
    height: 500px; 
} 
.sectionLeft, .sectionMiddle, .sectionRight { 
    float: left; 
    width: 31%; 
    height: auto; 
    padding: 1%; 
    background-color: red; 
}

我已經爲父div（「容器」）添加了一個類。我們將修改其寬度，以便您可以看到它對封閉元素的影響。

隨着父容器的寬度任意設置爲1000像素，每個子項的填充表示爲1％，每個子元素將具有10個填充像素（1000 * .01 = 10）。每個子元素的寬度是310像素（31％）。這是930像素的內容，再加上60個像素的總填充（三個元素兩側的10個像素），990個像素的父寬度中使用寬度總共提供1000個像素。見codepen。現在，當我們將填充改爲6％時，我們將在每個子元素（而不是10個）周圍有60個像素的負空間，總共爲360個像素（每個子元素兩側各有60個像素（ 120），次數3個子元素）。添加到總填充（1290）的360像素的內容的930像素吹過父容器的1000像素寬度，打破了3列布局。見codepen。

因此，您可以看到第一個codepen的1％填充（總共60個像素）與第二個codepen的6％填充（總計360個像素）不同，因爲填充是從寬度父母。

來源

2017-01-17 21:57:40 Mac

基本填充知識

回答

相關問題