CSS盒模型

什么是盒模型

所谓盒子模型:
就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容区域、内边距(padding)、边框(border）和外边距(margin）组成。

这个图可能有点抽象，那么看看下个图来体会一下什么是盒子模型

就意味着离着手机（内容）最近的是里面的填充物（padding）之后是包裹着填充物与手机的手机盒（盒子模型），而手机盒的厚度（border）就是这个手机盒最后的大小

盒子内边距（padding）

padding属性设置内边距，是指边框与内容区域之间的距离
padding 可以设定4个值，分别是：

• padding-top:上内边距

• padding-right:右内边距

• padding-bottom:下内边距

• padding-left:左内边距
  而设置值的个数不同，控制方向也不同：

  	  1  同时控制四个方向
        2  上下  左右
        3   上  左右  下
        4  上 右  下 左
  

         padding: 10px 20px 30px 40px;

盒子边框（border）

语法：

border：border-width || border-style || border-color

           边框宽度   ||  边框样式    ||  边框颜色

style常用属性：none没有边框（默认值）、solid单实线（最常用）、double双实线 、dotted点线 、dashed虚线。
border-top上边框、border-bottom下边框
圆角边框：border-radius

border-radius: 50%;/* 通过设置圆角度数来让一个正方形变圆圈   */

外边距（margin）

margin：用于设置外边距。
margin就是控制盒子和盒子之间的距离 可以设置四个方向的值
margin: 上外边距 右外边距 下外边距 左外边

• margin-top:上外边距
• margin-right:右外边距
• margin-bottom:下外边距
• margin-left:左外边距
  注意：当上下垂直关系的两个元素 同时设置上下外边距的时候，外边距合并 —— 取大者

块元素居中

margin可以让一个块元素实现水平居中，需要满足以下条件：
1、必须是块级元素，且盒子必须指定了宽度(width) 。因为行内元素无法设计宽高，行内块无法居中
2、然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

        .header {
            width: 960px;
            margin: 0 auto;
        }

盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：

• box-sizing: content-box
  盒子大小为width + padding + border，content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
• box-sizing: border-box
  盒子大小为width就是说 padding和border是包含到width里面的

盒子阴影

box-shadow：水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
前两个属性是必须写的。其余的可以省略。
外阴影(outset)是不能写的，是默认值，想要内阴影写inset 。
内阴影：

       div {
            width: 200px;
            height: 200px;
            border: 5px solid red;
            background-color: skyblue;
            box-shadow: 5px 5px 5px 5px pink inset;
        }

外阴影：

 box-shadow: 5px 5px 5px 5px purple ;