盒子模型的内边距、边框、外边距

1）内容区Content

• 用来放置文本或者子元素
• 样式属性width，height，background-color就是对该区域进行设置的

2）内边距padding

即内容区与边框的距离。该区域是透明的，没有颜色。包含上下左右的四个内边距。

• padding-top： 上内边距
• padding-right： 右内边距
• padding-bottom：下内边距
• padding-left： 左内边距

为了缩短代码，也可以在一个属性中指定所有的值，语法如下

• padding: 上  右  下  左;
• padding: 上  左右  下;
• padding: 上下  左右;
• padding: 上下左右;

3）边框border

围绕在内边距外的边框，在CSS中，通常由的这三个维度属性来控制

• 边框宽度：border-width
• 边框颜色：border-color
• 边框样式：border-style

当然也可以分别对上下左右的边框单独设置宽，颜色，样式

• 例如：border-top/right/bottom/left-color/width/style

边框的线条样式：

• none:  默认无边框
• dotted:  点虚线
•  solid:  实线
• double  双线条
• dashed  虚线
• groove: 定义3D沟槽边框。效果取决于边框的颜色值
• ridge: 定义3D脊边框。效果取决于边框的颜色值
•  inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
•  outset: 定义一个3D突出边框。 效果取决于边框的颜色值

4）外边距margin

边框以外的区域,作用一般是用来设置该元素所在网页的位置。可分成：

• margin-top      :上外边距
• margin-right    ：右外边距
• margin-bottom   ：下外边距
• margin-left     ：左外边距

属性：

• 1. 上下左右可以使用具体值，定义一个固定的margin（使用像素，pt，em等）
• 2. 左右也可以使用百分比
• 3. 左右使用auto，这样做的结果会依赖于浏览器。  但是由居中的效果

Margin可以使用负值，重叠的内容。

块元素的整个宽度等于父元素的width：
margin-left  +  border-left  + padding-left + width + padding-right + border-right + margin-right

外边距不会影响盒子可见框的大小，元素的可见大小，就是由边框+padding+content决定的。

但是外边距会影响盒子的位置

margin会影响到盒子实际占用空间

 注意：默认情况下，元素的位置由上边距和左边距决定，因此至少要设置两个值

margin: 50px 100px;

注意：通常情况下，左右可以使用百分比和auto，上下不能使用 */

            /* margin: 50px 50%; */

左右居中：  方式1，自己计算 

margin: 50px 290px; 

方式2，使用auto 

margin: 50px auto;