盒子模型基本概述。

盒子模型

1.什么是盒子模型。

盒子模型是把HTML中元素看作为一个矩形盒子，相当于一个装内容的容器。

2.盒子模型的组成。

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

3.盒子边框（border）

属性：设置盒子边框样式（border style）。

1、border-width:   设置边框宽度

2、border-style:     设置边框样式
   none    没有边框
   solid     实线
   dotted    点线
   dashed    虚线

3、border-color：   设置边框颜色

4、borde具体属性设置：
    border-top-color:green;

5、去掉边框写法：
    border:  none;

4.盒子内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距.

padding-right:右内边距。

padding-bottom:下内边距。

padding-left:左内边距。

5.盒子外边距（margin）

外边距实现盒子居中

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距 。

margin-right:右外边距。

margin-bottom:下外边距。

margin-left:上外边距。

margin:上外边距 右外边距 下外边距 左外边。

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。

盒子必须指定了宽度（width）。