6.盒子布局

盒子模型就是把HTML元素看作是一个矩形盒子，也就是装内容的容器。

盒子模型布局由下图所示

盒子布局.png

1. 盒子的边框border
   • border-width 边框宽度
   • borderstyle 边框样式
     常用属性值：

     属性值	作用
     none	没有边框，忽略所有边框宽度
     solid	边框为单实线（最常用）
     dashed	边框为虚线
     dotted	边框为点线
     double	边框为双实线

   • border-color 边框颜色
     三种样式可以单独设置，也可以合并设置

        div { /* 分开设置*/
              border-width: 2px;
              border-style: solid;
              border-color: red;
        }
        div { /* 合并设置*/
             border: 1px solid #F40;    
        }
   

   • border-radius 圆角
2. 内边距 padding

      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      /*合并设置*/
      padding: 20px ; /*上下左右都是20px*/
      padding: 20px 30px; /*上下20px, 左右30px*/
      padding: 20px 30px 50px; /*上20px 左右都是30px 下 50px*/
      padding: 20px 30px 50px 10px ; /*上20px 右30px 下50px 左10px*/
   

3. 外边距 margin

   margin-top: 20px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 20px;
   /*合并设置*/
   margin: 20px ; /*上下左右都是20px*/
   margin: 20px 30px; /*上下20px, 左右30px*/
   margin: 20px 30px 50px; /*上20px 左右都是30px 下 50px*/
   margin: 20px 30px 50px 10px ; /*上20px 右30px 下50px 左10px*/
   

   • 外边距设置居中对齐

   margin: 20px auto; 左右居中
   

   • 外边距合并
     比如有两个div 第一个div margin-right : 30 px ，第二个div margin-left : 50px,则两个div的间距为50px; 这就是外边距合并
4. html元素的尺寸计算
   1. 外盒尺寸计算
      Element 空间高度 = content height + padding + border + margin
      Element 空间宽度 = content height + padding + border + margin
   2. 内盒尺寸计算
      Element height = content height + padding + border (height为内容高度)
      Element width = content height + padding + border (wight为内容宽度)

   • 当一个盒子没有给定高/宽度 padding不会影响盒子的大小
   • 当一个盒子的宽/高度继承自父亲的宽/高度

5. 盒子模型布局稳定性
   按照优先使用 宽度（width） 其次使用内边距 （padding） 再次 外边距 （margin）

   width > padding > margin /*稳定性*/

   • margin 会有外边距合并，稳定性不高
   • padding 会影响盒子大小， 需要进行加减运算
   • width 稳定性高 经常使用
6. css3 盒子模型

   box-sizing: content-box /*以前的盒子模型*/
   box-sizing: border-box;  /*padding 和 border 不会撑开盒子，即padding和border 是包含到width里面的*/
   

7. 盒子阴影
   语法格式：
   box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影;

   值	描述
   h-shadow	必需。水平阴影的位置，可为负值
   v-shadow	必需。垂直阴影位置，可为负值
   blur	可选。模糊距离
   spread	可选。阴影尺寸
   color	可选。阴影颜色
   inset	可选。将外部阴影（outset）改为内部阴影