怎麼理解盒子模型？
盒子模型是樣式表（css）控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法，才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是一個盒子，佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。盒子模型是由內容、邊框、間隙（padding）、間隔（margin）組成，他們的關係如下圖所示：
盒子實際寬度（高度）=內容（content）+邊框（border）+間隙（padding）+間隔（margin）。對於任何一個元素設置width和height控制內容大小，也可以分別設置各自的邊框（border）、間隙（padding）、間隔（margin）。靈活設置這些盒子的這些屬性，可以實現各自排班效果。
border
border是元素的外圍，計算元素的寬和高要把border加上特別是特殊網站頁面（比如說活動專題頁面等）上，這一點是很多新手忽略的地方。border有三個主要屬性，color（顏色）、width（粗細）和style（樣式）。
1、color主要是指定border的顏色，一共有256的3次方種顏色供我們選擇。通常是16進制的值，比如紅色是“#FF0000”。
2、width是border粗細程度，可以設置為thin、thick和length，length為具體數值，比如說border:1px #CCC solid;其中1px指的是border的width，默認值是medium，一般瀏覽器解析為2像素。
3、style屬性可以設為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不顯示border，hidden可以用來解決邊框的衝突問題。對於groove、inset、outset、rigde、border-style，IE會出現兼容問題，使用時一定要注意。
padding
padding用於控制content與border之間的距離，同時設置上下左右的padding時，可以這樣寫padding:10px 20px 10px 10px;分別對應上、右、下、左四個方向的padding，逆時針排序，margin屬性也可以這樣書寫。
margin
margin用於控制塊與塊（可以理解成塊級元素）之間的距離。為了便於理解可以把盒子模型想象成一幅畫，content是畫本身，padding是畫與畫框的留白，border是畫框，margin是畫與畫之間距離。需要注意的是IE和firefox在處理margin時有一些差別，倘若設定了父元素的高度height值，如果此時子元素的高度超過了父元素的height值，二則顯示結果完全不同，IE瀏覽器會自動擴大，而firefox（火狐瀏覽器）就不會，這一點是需要注意的。
關於盒子模型先聊到這，上面總結都是最簡單的，一定要熟練掌握。每天學習一個知識點，每日寄語-“不妄求,則心安,不妄做,則身安.”
閱讀更多 編程小小學生 的文章
