P7、CSS基础_盒子模型（重要）

盒子模型

border:边框
margin:外边距
padding:内边距
盒子大小计算方式：
margin+border+padding+内容宽度

一、边框border

border有三部分组成：

1. 粗细（单位px）
2. 样式（分为dashed-虚线 solid-实线）
3. 颜色
   例：

border:2px solid red

二、外内边距margin与padding

**内外边距(妙用居中元素)：
组合使用时：
顺时针计算，外边距举例：

   1. margin:1px 2px 3px 4px
    （上边距(top)1px 右边距(right)为2px 下边距(left)3px 左边距(bottom)4px）
    
    2.margin:1px 2px 3px
    上边距1px 左右2px 下3px
    
    3.margin：0(上下为0) auto(左右对齐)
    
    4.margin:0(表示所有边距为0)**

居中表示 margin:0 auto;
要求：

1. 块元素
2. 固定的宽度
   最保守的方法：
   margin:0 auto与text-align:center配合使用

三、圆角边框及盒子阴影

border-radius圆角边框
四个角，从左上角开始顺时计算
圆圈：圆角等于半径；
盒子阴影box-shadow
box-shadow与背景图像阴影一致
box-shadow：10px 10px 5px red;

效果图