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

技術小胖子發表於2017-11-16
一、margin與padding的區別:    
   當我們把網頁想像成一面牆時,網頁中的內容總可以概括為由一個個的盒子所構成的,如圖:

225730696.jpg

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

225742649.jpg

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




相關文章