DIV+CSS 盒子的概念

  理解盒子并不难，首先应懂得margin,padding,width,height属性的概念。

  盒子有小有大，大盒子装小盒子，小盒子装迷你盒子，迷你盒子装乾坤，似乎是个死循环，然而正是道理之所在。

假定：

<div id="big"> <div id="small"> <div id="mini"> </div> </div> <div>

  每个DIV块都是盒子， 我们现在研究小盒子(#small)这个对象，margin是小盒子(#small)相对于大盒子(#big)的外边距，padding是小盒子相对于迷你盒子(#mini)的内边距，距离产生美，导入CSS样式，美在不言中~

*{ FONT: 12px "宋体",Tahoma; COLOR: #515151; list-style-type:none;}/*全局设置，设置字体，大小，颜色*/ img{ display:block; border:0;} body{background:url(images/bg.gif); padding:0; margin:0;}/****设置body的通用属性***/ /*#outer{ border:1px solid #6633FF; padding:10px 10px; margin:10px 10px;} #inner{ border:1px dashed #CC0066; padding:10px 10px;} #box{border:1px dashed #6633CC; height:200px; }*/ #big{ border:1px solid #6633FF; margin:10px auto; background-color:#666666; width:300px;} #small{ border:1px dashed #CC0066; margin:10px 10px; padding:10px 10px; background-color:#999999;} #mini{border:1px dashed #6633CC;height:200px; background-color:#CCCCCC; padding:0;}

  margin和padding是相对的，以大盒子为对象，那么相对与小盒子的距离则为padding；以小盒子为对象，那么相对于大盒子的距离则为margin。奇特的是IE和FireFox表示的则不尽相同，IE智能式的纠错功能让CSS标准望而生畏，大家可以试着用padding和margin设置大盒子，小盒子，迷你盒子之间的距离，效果不尽相同，当然有解决的方法，不同的人，方法不尽相同，各行其责~