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

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

   這裡面紅線所標識的為外邊距（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，如需轉載請自行聯絡原作者