CSS（10）盒子模型

css中， box model叫盒子模型（或框模型），box model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border）和外邊距（margin）的方式。在html文件中，每個元素（element）都有盒子模型，所以說在web世界裡（特別是頁面布局），box model無處不在。下面是box model的圖示：

說明：上圖中，由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。

內邊距、邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

下圖是w3school的box model **：

說明：1.和第一幅圖一樣，在上圖中，元素框的最內部分是實際的內容（element）；直接包圍內容的是內邊距（padding），內邊距呈現了元素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距預設是透明的，因此不會遮擋其後的任何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。

2.內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者**樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器（*）對所有元素進行設定：

設定所有元素的外邊距和內邊矩為0

*/*

3. 在 css 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素，以下是css**：

#box

下圖是對上面css**的解釋：

以下是乙個完整的css box model布局的示例。

view code

1
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""
>
2<
html 
xmlns
="">
3<
head
>
4<
title
>css box model
title
>
5<
style 
type
="text/css"
>
6body710
div11
18span
1934
style
>
35head
>
36<
body
>
37<
div>
38<
span
>box model的內容
span
>
39div
>
40body
>
41html
>

以下是上面示例的效果截圖：

參考：

CSS（10）盒子模型

css盒子模型 CSS 盒子模型

CSS 3 盒子模型

CSS3盒子模型

CSS（10）盒子模型

css盒子模型 CSS 盒子模型

CSS 3 盒子模型

CSS3盒子模型

相關推薦