3.1 基本知識

3.1.1 盒子模型

盒子模型是CSS布局的基礎(chǔ)，CSS假定每個元素都會生成一個或多個矩形框，每個元素框中心都有一個內(nèi)容區(qū)（content），這個內(nèi)容區(qū)周圍有內(nèi)邊距（padding）、邊框（border）和外邊距（margin），這些項默認寬度為0，這個矩形框就是常說的盒子模型，如圖3-1所示。

圖3-1 盒子模型

簡單來說，HTML中每一個元素就是一個盒子，同理，在小程序中每一個組件就是個盒子，元素的寬度、高度就是內(nèi)容區(qū)域?qū)挾取⒏叨龋话瑑?nèi)邊距、邊框和外邊距，我們可以通過元素width、height、padding、border、margin屬性控制盒子樣式。盒子模型根據(jù)瀏覽器具體實現(xiàn)可分為W3C的標準盒子模型和IE盒子模型，這兩種盒子模型在寬度和高度的計算上不一致，IE盒子模型的寬度和高度是包含內(nèi)邊距和邊框的，我們這里講述的主要是W3C的盒子模型，WXSS完全遵守W3C盒子模型規(guī)范。

CSS中的布局都是基于盒子模型，不同類型元素對盒子模型的處理也是不同的，塊級元素的處理就和行內(nèi)元素不同，浮動元素和定位元素的處理也是不相同的，接下來我們逐一討論這些差異。