認識CSS的盒子模型

css 盒子模型

http://lovervz.spaces.msn.com CSS 中有個重要的概念，就是盒子模式 (Box model)。CSS2中的盒模型是關係到設計中排版定位的關鍵，任何一個選擇符都遵循盒模型規範，例如<div>、<p>、<a>……盒模型包含(外補丁)margin，(背景顏色)background-color，(背景圖片)background-image，(內補丁)padding ，(內容)content，(邊框)border。 是CSS盒模型的： 平面：3D(原圖出自：hicksdesign)   盒子裡由外至裡依次是： margin 邊距 border 邊框 padding 間隙 (也有人稱做補丁) content (內容，比如文本，圖片等) CSS 邊距屬性 (margin) 是用來設定一個元素所佔空間的邊緣到相鄰元素之間的距離。 CSS 邊框屬性 (border) 用來設定一個元素的邊線。 CSS 間隙屬性 (padding) 是用來設定元素內容到元素邊框的距離。 CSS 背景屬性指的是 content 和 padding 地區。 CSS 屬性中的 width 和 height 指的是 content 地區的寬和高