CSS盒子內部結構教程詳細介紹

盒子模型是ＣＳＳ控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。具體的ＣＳＳ盒子內部結構教程如下所示。

所有頁面中的元素都可以看成是一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往都要比單純的內容大。換句話說，可以通過調整盒子的邊框和距離等參數，來調節盒子的位置和大小。

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩方面采理解。一是理解一個孤立的盒子的內部結構，二是理解多個盒子之間的相互關系。

在本章中首先講解獨立的盒子相關的性質，然後將介紹在普通情況下盒子的排列關系。在下一章中，將更深入地講解浮動和定位的相關內容。

在學習盒子模型之前，先來看一個例子。假設在牆上有４幅畫，整齊地排列著，如圖１所示。對於每幅畫來說，都有一個“邊框”，在英文中稱為＂ｂｏｒｄｅｒ”；每個畫框中，畫和邊框通常都會有一定的距離，這個距離稱為“內邊距”，在英文中稱為“ｐａｄｄｉｎｇ”；各幅薊之間通常也不會緊貼著，它們之間的距離稱為“外邊距”，在英文中稱為“ｍａｒｇｉｎ”。

圖１　畫框示意圖

這種形式實際上存在於我們生活中的各個地方，如電視機，顯示器和窗戶等，都是這樣的。因此，ｐａｄｄｉｎｇ－ｂｏｒｄｅｒ－ｍａｒｇｉｎ模型是一個極其通用的描述矩形對象布局形式的方法。這些矩形對象可以被統稱為“盒子”。英文為“Ｂｏｘ”。

了解了盒子之後，還需要理解“模型”這個概念。所謂模型就是對某種事物的本質特性的抽象。

模型的種類很多，例如物理上有“物理模型”，科學家牛頓提出了著名的Ｆ＝ｍａ公式，就是對物體運動的本質特性進行抽象後的精確描述。類似地，創辦企業也有其“商業模型”，它是對企業運作和盈利過程的本質進行抽象後，對它的描述。

同樣，在網頁布局中，為了能夠使紛繁復雜的各個部分合理地進行組織，這個領域的一些有識之士對它的本質進行充分的研究後，總結出了一套完整的、行之有效的原則和規范。這就是“盒子模型”的由來。

在ＣＳＳ中，一個獨立的盒子模型由ｃｏｎｔｅｎｔ（內容）、ｂｏｒｄｅｒ（邊框）、ｐａｄｄｉｎｇ（內邊距）和ｍａｒｇｉｎ（外邊距）４個部分組成，如圖１所示。

可盒子的概念是非常容易理解的，但是如果需要精確地排版，有的時候１個像素都不能差，這就需要非常精確地理解其中的計算方法。

一個盒子實際所占有的寬度（或高度）是由“內容＋內邊距＋邊框＋外邊距”組成的。在ＣＳＳ中可以通過設定ｗｉｄｔｈ和ｈｅｉｇｈｔ的值來控制內容所占的矩形的大小，並且對於任何一個盒子，都可以分別設定４條邊各自的ｂｏｒｄｅｒ，ｐａｄｄｉｎｇ和ｍａｒｇｉｎ，因此只要利用好這些屬性，就能夠實現各種各樣的排版效果。

注意：並不僅僅是用ｄｉｖ定義的網頁元素才是一個盒子，事實上所有的網頁元素本質上都是以盒子的形式存在的。在人的眼中，一個兩頁上有各種內容，包括文本、圖像等，而在浏覽器看來，就是許多盒子在一起或者相互嵌套。

圖１中有一個從上面開始順時針旋轉的箭頭，它表示需要讀者特別記住的原則，當使用ＣＳＳ這些部分設置寬度時，是按照順時針方向確定對應關系的。

當然還有很多具體的特殊情況，並不能用很簡單的規則覆蓋全部的計算方法，因此在這一章中，將深入盒子模型的內部，把一般原則和特殊情況都盡可能地闡述清楚。

以上就是精品學習提供的關於ＣＳＳ盒子內部結構教程的內容，希望能夠帶給您幫助。