計算HTML中兒童塊的寬度

Question

我想在頁面上創建3列，我想給每列填充20px，將列表1和2填充20px，我現在的問題是如何計算寬度爲960px的每個列的寬度？我在網上只是一個新手，並想知道如何正確獲取寬度計算？請問，填充是否增加了頁面的寬度？邊界如何？

在此先感謝。

Answer 1

填充和邊框寬度都會增加元素的寬度（您的列） 頁邊距不會影響列的寬度，但會包含在您的常規頁面寬度中。

您可以閱讀盒模型here

在你的情況，

column 1: 20 + X + 20 

column 2: 20 + x + 20 

column 3: 20 + X + 20 

保證金1和2後：20 + 20

所以......

8 * 20 + 3X = 960

x = 266.6666 ...（您的colu mn的寬度）

Answer 2

有多個圖層被添加到一個元素（請參閱Box-Model）。

通常，當您設置寬度時，添加填充將會改變元素的大小，這有點不直觀。然而，大多數瀏覽器都支持CSS屬性box-sizing，這改變了方式寬度（和高度）的計算方法：

值：

box-sizing: content-box; 
    width = content 

box-sizing: padding-box; 
    width = content + padding (added to the spec later, less support) 

box-sizing: border-box;  
    width = content + padding + border (easiest to understand, recommended) 

box-sizing: margin-box;  
    width = content + padding + margin (quite useless) 

正如我所說，在大多數項目我嚴重建議box-sizing: border-box;，因爲它得到了廣泛的支持和最直觀。您可能需要將其加上前綴。我會做的大多是這樣的（鳥槍法）：

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
      box-sizing: border-box; 
} 

請參閱w3c School爲完整的文檔和caniuse的瀏覽器支持的概述。

Answer 3

我推薦閱讀this CSS tricks article。深入瞭解box model：

在CSS中，每個[元素]使用標準盒子模型進行描述。這個模型描述了一個元素所佔空間的內容。每個盒子都有四個邊緣：邊緣邊緣，邊緣邊緣，填充邊緣和內容邊緣。

因此，基本上：

寬度=寬度+填充左+填充右+左邊框+右邊框

閱讀並理解的是，與沿CSS定位的基礎知識。然後你可以看看設置box-sizing爲其他東西（你會看到border-box使用了很多，特別是在響應式設計中。）（可以說）是一種更合理的方法，但是如果你適當地處理標準模型是很重要的希望在所有的進步。IE7（如果它甚至在雷達上）不支持box-sizing。

螢火蟲和/或Chrome瀏覽器開發工具，此刻你最好的朋友。