概述

        关于CSS的一些基础知识我们在前面文章中已经有所了解，这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。  

盒子模型

        元素框的最内部分是实际的内容（element），直接包围内容的是内边距（padding），内边距呈现了元素的背景，内边距的边缘是边框（border），外边距（margin)默认是透明的，因此不会遮挡其后的任何元素，对于这个图边框外的部分就是margin，边框内内容外地部分就是padding。         在CSS中我们一般习惯性的将外边距和内边距设置为0，即
* { margin: 0; padding: 0; }

 

      element元素

     在CSS中，width和height是element区域的宽度和高度，对padding、border、margin增加尺寸不会影响element的宽度和高度，只会增加整个框的尺寸。      下面我们看个例子：假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素
 
 
#box { width: 70px; margin: 10px; padding: 5px; }

      这样的话对于element、padding、border、margin的尺寸就更加的一目了然了，这里需要注意下的是，padding、border、margin即可以应用于一个元素的所有边，也可以应用于单独的边，还有一点就是，margin可以是负值。  

   内边距（Padding）

      元素的内边距是再边框和内容区之间，padding属性设置用长度值或者百分比值，但不允许用负值。关于用百分比的话，有一点需要注意是，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。           对于padding的设置，可以设置它的上下左右这四个边距。   h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }



  h1 {padding: 10px0.25em 2ex 20%;}
     上述这两种方法实现的效果是一致地，如果我们的四个边距是一样的话可以用下面这句话。   h1 {padding: 10px;}

   

    边框（border）

      元素的边框（border)是围绕元素内容和内边距的一条或多条线，可以规定元素边框的样式、宽度和颜 {MOD}，这样可以创建出效果更佳出 {MOD}的边框。  

     样式

      样式是边框的最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
       border可以先设置样式，设置样式的顺序为op-right-bottom-left，设置样式的属性为border-style； 如果想设置单边样式则为：
border-top-style border-right-style border-bottom-style border-left-style  

     宽度

       边框宽度属性设置用border-width设置；     如果想单独设置各边的宽度则用：
border-top-width border-right-width border-bottom-width border-left-width      对于同一个边框宽度我们可是用三种方式来设置如下，效果是一样的。   p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }

  p {border-style:solid; border-width: 15px 5px 15px 5px;}

 
p {border-style:solid; border-width: 15px 5px;}

 

    颜 {MOD}

      设置边框颜 {MOD}的原理与设置设置边框宽度的原理是相同的，设置颜 {MOD}用border-color;    如果设置个边宽度则用：
border-top-color border-right-color border-bottom-color border-left-color  

   外边距（margin）

        margin围绕在元素边框外地空白区域就是margin，设置margin会在元素外创建额外的“空白”，margin属性接收任何长度单位、百分数值甚至负值。
       在这里先讲解一个值复制的规则，就是如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。
 
 
    换句话说，如果为外边距指定了 3个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。       如果我们想设置单边外边距属性，可以用下面的属性
margin-top margin-right margin-bottom margin-left       下面这两种方式效果是一致地
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }

  p {margin: 20px 30px30px 20px;}

 

总之

      在这里我也是简单将盒子模型的基础知识进行了基础的总结，这些知识只有我们经常用，慢慢的轻车熟路了，对于盒子模型的知识的讲解我可能有太不全面的地方，也请大家多多指正。