盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型属性

外边框Margin

• margin可以单独改变元素的上、下、左、右边距，也可以同时指定多个边距:
  <margin:25px 50px 75px 100px;> 分别为上右下左边距；
  <margin: 25px 50px;>分别为上下25px；左右50px；
• margin 属性设置为 auto，使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
• 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  
• margin允许负值。

内边距Padding

• padding可以单独改变元素的上、下、左、右边距，也可以同时指定多个边距:
  <padding:25px 50px 75px 100px;> 分别为上右下左边距；
  <padding: 25px 50px;>分别为上下25px；左右50px；
• padding不支持负值。
• CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。 因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。实例 div { width:300px;padding:25px;} <div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）; 若要将宽度保持为 300px，无论填充量如何，可以使用 box-sizing 属性,这将导致元素保持其宽度。

边框Border

• 边框样式 border-style
  

<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>

• 圆角边框 border-radius
  

 p.solid {border-radius: 5px; border:4px solid grey;}
 p.one {border-radius: 0px; border:4px solid grey;}

• 边框宽度
  border-width:5px|5pt|10cm|2em;
  border-width:thin|medium|thick;
  可以设置四条边框，也可以分别设置上，下，左，右

p.one{
border-width:5px;
border-color:red;
border-style:solid
}
p.two{
border-width:25px 10px 4px 35px;
border-color:red;
border-style:solid

块级盒子VS行级盒子

块级盒子

块级盒子：每个盒子都占一行，不与其他盒子并列摆放，可以设置width\height\padding\margin等属性。 块级元素生成块级盒子包括:
body, article, div, main, section, h1~h6, p, ul, li等，display:block;强制转换为块级盒子。

 p.solid {border-radius: 0px;
          border:4px solid grey;
          width: 100px;height: 250px; 
          display: block;}
  p.one {border-radius: 0px;  
         border:4px solid grey; 
         width: 100px;height: 250px; 
         display: block;}

行级盒子

行级盒子： 和其他行级盒子一起放在一行或拆开或多行，盒模型的width,height 不适用，宽度由内容决定。行级元素生成行级盒子，内容分散在多个行盒（line box） 包括:
span, em, strong, cite, code等 display：inline转换为行级盒子。

 p.solid {border-radius: 0px;
          border:4px solid grey;
          width: 100px;height: 250px; 
          display: inline;}
  p.one {border-radius: 0px;  
         border:4px solid grey; 
         width: 100px;height: 250px; 
         display: block;}

总结

对于盒子模型的基础知识有了了解，但对于如何在实际的网页布局中运用盒子模型还是有一定困难，还是要多多练习。