CSS学习系列八:边框,边距与填充

这个系列是所有系列中范围最广的,其中包括边框border,边距margin,填充padding.这3个方面再加上content共同组成了合作模型(box)。不过css中的盒子是一个虚拟的对象.在css中没有box这个对象。可以把css的box类比作为显示生中的盒子,内容是盒子里面的装的东西,边框是盒子本身,填充时盒子与盒子内东西的距离,边框是盒子与其他物品之间的距离

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框 (border)、边界(margin), CSS盒子模式都具备这些属性。

CSS学习系列八:边框,边距与填充_第1张图片
CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装 的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一 起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的 是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度 属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界 就是该盒子与其它东西要保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看, 看到的图形和结构就类似我们要做的网页版面设计了,如下图。

CSS学习系列八:边框,边距与填充_第2张图片
由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。

1.宽度与高度

box的概念很广,在HTML中很多对象可以看成是box

 

   
   
   
   
  1. > 
  2. <html> 
  3.   <head> 
  4.     <title>文本样式title> 
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6.   <link href="" type="text/css" rel="stylesheet"/> 
  7.     <style type="text/css"> 
  8.