盒子 模型: 

   有 内边距(padding) ，外边距(margin)，边框(border)，内容（content）

   padding 变大

    padding 和  margin  写法一样

    margin: 10px;  /** 同时对 上右下左 四个方向设置一样的数值**/
    margin: 10px 20px; /** 同时对 上下 左左右 设置数值 **/
    margin: 10px 20px 30px; /** 对 上 左右  下  设置数值 **/
    margin: 10px 20px 30px 40px; /** 上  右  下 左 **/

    /* margin-bottom: 17px;
        margin-left: 42px;
        margin-top: 31px; 
        margin-right: 10px;*/


    border: 10px solid #050505;
    border-top: 10px solid #050505;
    border-right: 10px solid #050505;
    border-bottom: 10px solid #050505;
    border-left: 10px solid #050505;    


 主要是为了方便将布局和现实映射  

  盒子模型的计算规则：

   标准盒子模型：

     元素真实宽高 = 你写的宽高（content宽高） + padding & border

     在你写的宽高 基础上向外拓张

   怪异盒子模型 box-sizing: border-box;   ：

     content 宽高 = 你写的宽高（元素真实宽高） - padding & border

     在你写的宽高 基础上向内缩减





浮动：

  让元素（块）排一行，或者实现  左右布局

  注意：
    浮动会让元素从原本的位置删除（文档流中删除），下面的元素会钻下去

    如何解决：

      1：clear: both;  加在受影响的那个元素上
      2：手动加高度 
      3：overflow: hidden; 

  float: left  right