CSS的border 边框padding 内边距margin 外边距，外边距合并，塌陷问题解决方法

盒子模型
网页布局过程
1.先准备好相关的网页元素，网页元素基本都是盒子Box.
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容

 盒子模型（Box Model)组成
border 边框
content 内容
padding 内边距
margin 外边距
所谓盒子模型：就是把HTML页面中布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
 

边框（border)
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

border-style: none|hidden|dotted|solid|double|groove|ridge|inset|outset

border-style属性值

属性值	描述
none	无边框。与任何指定的border-width值无关。
hidden	隐藏边框。IE不支持
dotted	在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线。
dashed	在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线。
solid	实线边框
double	双线边框。两个单线与其间隔的和等于指定的border-width值。
groove	根据border-color的值画3D凹槽
ridge	根据border-color的值画菱形边框
inset	根据border-color的值画3D凹边
outset	根据border-color的值画3D凸边。

注意：

如果提供全部4个参数值，将按上-右-下-左的顺序作用于四个边框
如果只提供一个，将用于全部的四条边
如果提供两个&#x