CSS網頁布局的核心內容:CSS盒模型

2024-07-11 08:24:15

字體：大中小

來源：轉載

供稿：網友

本節的內容非常重要，因為盒模型是CSS定位布局的核心內容。從前面章節中，讀者學習了布局網頁基本方法，只需利用p元素和列表元素，即可完成頁面大部分的布局工作。但是前面學習的知識更注重實踐操作，讀者并不理解布局的原理，常常在布局頁面的過程中遇到無法理解的問題
CSS盒模型
本節的內容非常重要，因為盒模型是CSS定位布局的核心內容。從前面章節中，讀者學習了布局網頁基本方法，只需利用p元素和列表元素，即可完成頁面大部分的布局工作。但是前面學習的知識更注重實踐操作，讀者并不理解布局的原理，常常在布局頁面的過程中遇到無法理解的問題，需要一步步重復地“試錯”才能完善布局代碼的編寫。學習本章的盒模型的知識以后，讀者將擁有較完善的布局觀，基本可做到在代碼編寫前就“胸有成竹”。
11.3.1 什么是CSS盒模型
XHTML中大部分的元素（特別是塊狀元素）都可以看做一個盒子，而網頁的元素的定位實際就是這些大大小小的盒子在頁面中的定位。這些盒子在頁面中是“流動”的，當某個塊狀元素被CSS設置了浮動屬性，這個盒子就會“流”到上一行。網頁布局即關注這些盒子在頁面中如何擺放、如何嵌套的問題，而這么多盒子擺在一起，最需要關注的是盒子尺寸計算、是否流動等要素。
為什么要把XHTML元素作為盒模型來研究呢？因為XHTML元素的特性和一個盒子非常相似，如圖11.18所示。

圖11.18 盒模型示意圖
大多數XHTML元素的結構都類似于圖11.18所示，除了包含的內容（文本或圖片）外，還有內邊距、邊框和外邊距一層層的包裹。讀者在布局網頁和定位XHTML元素時要充分地考慮到這些要素，才可以更自如地擺弄這些盒子。
外邊距屬性即CSS的margin屬性，CSS中可拆分為margin-top（頂部外邊距）、margin-bottom（底部外邊距）、margin-left（左邊外邊距）和margin-right（右邊外邊距）。CSS的邊框屬性（border）和內邊距屬性（padding）同樣可拆分為4邊。在Web標準中，CSS的width屬性即為盒子所包含內容的寬度，而整個盒子的實際寬度即為：
盒子寬度=padding-left border-left margin-left width padding-right border- right margin-right
相應地，CSS的height屬性即為盒子所包含內容的高度，而整個盒子的實際高度即為：
盒子高度=margin-top border-top padding-top height padding-bottom border -bottom margin-bottom
11.3.2 外邊距的控制
在CSS中，margin屬性可以統一設置，也可以上下左右分開設置。在D:/web/目錄下創建網頁文件（XHTML1.0），命名為box_margin.htm，編寫box_margin.htm文件代碼如代碼11.17所示。

上一篇：CSS教程:通過實例學習和理解CSS盒模型

下一篇：最新版本的CSS選擇器瀏覽器支持情況