本質上，CSS中的每個元素都被一個盒子所包圍。這個盒子規定了元素框的處理，其中由中心向外擴充包括盒子的尺寸(寬和高：width和height)，內邊距（padding）、邊框（boader）和外邊距（margin）。CSS盒子模型如下所示：
二、CSS盒子模型的具體描述：如所示，盒子模型中由width和height規定的地區為實際的內容所能使用的地區；接著，直接包圍內容的是
內邊距（padding），內邊距地區內可以顯示盒子項目的背景顏色或者背景圖片；與內邊距接壤的邊緣邊框（boader）；邊框以外是外邊距（margin），外邊距預設是透明的，即盒子的背景顏色或者背景圖片在外邊距不可見，它不會遮擋其後的任何元素，但是父元素的內容可透出來可視。
三、對CSS盒子模型的測試：1、基本的HTML代碼：其中頁面裡簡單的設定一個DIV塊，將其作為測試的盒子物件，其中添加了一張200*200像素的圖片作為DIV塊的內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><!--meta標記定義的字元集是支援中文的gb2312--><meta http-equiv=content-type content="text/html; charset=gb2312"><!--連結外部CSS樣式 --><link rel="stylesheet" href="cssStylesheet.css" type="text/css" media="screen" /><title>CSS盒子模型</title></head><body><!--id為box的DIV塊作為測試盒子物件 --><div id="box"><!--DIV塊盒子裡的內容是一張200*200px的圖片 --><img src="Img.jpg"></img></div></body></html>
2、對盒子設定基本CSS樣式
1）CSS代碼：（設定內容詳見代碼注釋）
/*CSS STYLE SHEET FOR [CSS盒子模型] Created by [Serein_Chan]Email: [Serein_Chan@foxmail.com]Author Blog:[http://blog.csdn.net/cxwen78]*//*body的樣式 */body {margin: 0px;padding: 0px;background-color: #4aa54a; /*頁面背景色為綠色*/}/*盒子的樣式 */#box{width: 200px; /*盒子模型可用寬度：200px*/height: 200px;/*盒子模型可用高度：200px*/margin: 50px 0px 0px 25px;/*盒子項目外邊距：上外50px；右外：25px*/padding: 30px;/*盒子項目內邊距，相等都為30px*/border:20px solid #312184; /*紫色邊框*/background-color: #ffce10; /*盒子背景為土黃色*/}/*圖片盒子的樣式 */img{margin: 0px;padding: 0px;}
2）
3）結果分析
圖中頁面的背景色為綠色，盒子的背景色為土黃色，從標註資訊可知盒子模型的參數為：
a、外邊距：其上外邊距為50px，右外邊距為25px，透明的顏色，所以可透視看到綠色的頁面；
b、邊框：紫色的單線邊框，邊框寬度為20px;
c、內邊距：30px的內邊距，盒子的土黃色背景可以擴充進來，所以顯示為土黃色；
4、盒子的內容可用性區域域測試d、可用性區域域：可用性區域域的高和寬都為200*200px，正好能容納裡面紅色的圖片；
1）盒子的內容可用性區域域
盒子的內容可用性區域域是指盒子模型中能用於轉載內容的地區大小，比如說，一個DIV塊中可以包含映像元素或者段落元素等等，可用性區域域就是指這些元素能佔據DIV盒子的大小。這個地區的大小由盒子的寬和高規定，即width和height。如果內容大於這個尺寸規定的地區，則將顯示不完全。
2）測試CSS代碼修改
我們使用的圖片尺寸為 200 X 200px，所以將DIV塊的width和height改小，width從原來的200改為150px，height從原來的200改為180px，同時添加overflow屬性用於規定當內容溢出元素框時如何處理，將其值設為：hidden，即當內容(這裡指圖片)溢出元素框時內容會被修剪，並且其餘內容是不可見的。注意這裡指的是超出元素框，也就是邊框（boader）。這說明了內容在內邊距這片地區是可視的，超出邊框（boader）就將隱藏。具體的CSS代碼如下：
/*CSS STYLE SHEET FOR [CSS盒子模型] Created by [Serein_Chan]Email: [Serein_Chan@foxmail.com]Author Blog:[http://blog.csdn.net/cxwen78]*//*body的樣式 */body {margin: 0px;padding: 0px;background-color: #4aa54a; /*頁面背景色為綠色*/}/*盒子的樣式 */#box{overflow: hidden;/*overflow屬性用於規定當內容溢出元素框時如何處理,這裡將被隱藏*/ width: 150px; /*盒子模型可用寬度：150px*/height: 180px;/*盒子模型可用高度：180px*/margin: 50px 0px 0px 25px;/*盒子項目外邊距：上外50px；右外：25px*/padding: 30px;/*盒子項目內邊距，相等都為30px*/border:20px solid #312184; /*紫色邊框*/background-color: #ffce10; /*盒子背景為土黃色*/}/*圖片盒子的樣式 */img{margin: 0px;padding: 0px;}
3）顯示
4）結果分析
a)、圖片得不到完全的顯示，水平方向上部分被隱藏，這是因為DIV塊的寬度150px加上內邊距30px一共180px，小於圖片的200px，所以得不到完全顯示；
b)、縱向上，圖片得到了完全的顯示，這是因為DIV塊的高度180px加上內邊距30px一共210px，大於圖片的200px，所以能完全顯示。說明了溢出的內容在內邊距中仍然可視；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
