【CSS】【7】CSS的盒子模型

一、margin與padding的差別：    

   當我們把網頁想像成一面牆時，網頁中的内容總可以概括為由一個個的盒子所構成的，如圖：

<a target="_blank" href="http://blog.51cto.com/attachment/201308/225730696.jpg"></a>

   這裡單獨地把一個盒子拿出來，就會發現由外邊距、邊框、内邊距和内容四部分構成：

<a target="_blank" href="http://blog.51cto.com/attachment/201308/225742649.jpg"></a>

   這裡面紅線所辨別的為外邊距（margin）、再向裡灰色的辨別為邊框（border）、藍色線所辨別的為内邊距（padding）、再向裡是具體的内容（content），是否與照片非常相似？此時也可以認為盒子模型中的盒子就是一個塊（div），它是由相片框、相片及相片框與外面牆的距離、相片框和相片之間的距離所構成。

二、舉例：

1、

div

{

   margin:3px 5px 6px;

   padding:4px 6px;

   border-width:6px;

   border-color:black;

   width:500;

   heigth:300;

}

這段CSS定義描述了這麼一個盒子：

它的外邊距與頂部的距離為3像素、外邊距與左右部的距離為5像素，外邊距為底部的距離為6像素；

它的邊框寬度為6像素，邊框顔色為黑色；

它的内邊距與上下邊框的距離為4像素，與左右邊框的距離為6像素；

照片的大小為500*300

2、盒子預設值的說明，以margin為例：

  margin:4px;

  表示盒子與上右下左邊距的距離均為4像素；

  margin:4px 6px;

  表示盒子與上下邊距的距離為4像素，右左邊距的距離為6像素；

  margin:4px 5px 6px;

  表示盒子與上邊距的距離為4像素，與右左邊距的距離為5像素，與下邊距的距離為6像素；

  margin:4px 5px 6px 7px;

  表示盒子與上邊距的距離為4像素，與右邊距的距離為5像素，與下邊距的距離為6像素，與左邊距的距離為7像素；

3、了解了盒子的概念之後，自己再實作一遍《【CSS】【6】CSS學習的一些前提》。

     本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261738，如需轉載請自行聯系原作者