框模型与外边距

1. 框模型

框:

页面一切元素皆为框。

框模型：

  Box-Model,定义了元素框处理元素内容，
  内边距以及外边距的方式。

对象实际宽度=左右外边距 + 左右边框 + 左右
内边距 + width；
对象实际高度=上下外边距 + 上下边框 + 上下内边距 + height

2. 外边距

1. 什么是外边距：

围绕在元素边框周围的空白区域就是外边距正常情况下，
外边距是不允许被其他元素所占据的。

2. 语法：

   四个方向外边距：
      margin:value;
     单边设置：
         margin-top:上外边距；
         margin-right: 右外边距；
         margin-bottom: 下外边距；
         margin-left： 左外边距；

取值：

1. 单位可以为：px
      margin-top:20px;
      margin:15px;
2. 单位可以为 %
3. 取值为 auto
   左右外边距可以取值为 auto， 允许让会计元素水平
   居中显示
4. 取值为 负值
   移动元素
  左外边距取值为负： 元素向左移动
  上外边距取值为负： 元素向上移动
  左外边距取值为负： 元素向上移动
  上外边距取值为正： 元素向下移动

3. 外边距的简洁写法：

 margin：value；四个方向外边距相同
 margin:v1 v2 v3;v1上下外边距 v2左右外边距 
 margin：v1 v2 v3;v1上 v2左右 v3下
 margin：v1 v2 v3 v4;

4. 默认具备外边距的元素

编写网页时，一般会进行CSS重写，及改变一些元素的
默认样式。比如 取消某些元素的默认外边距。

这是有默认外边距的

命令显示图：

示例网页图：

这是解决外边距的

命令显示图：

示例网页图：

5.

1. 外边距合并：

当两个垂直外边距相遇时，他们将形成一个外边距，
称为外边距合并。
合并后的外边距的高度等于两个外边距中高度较大者。

合并后：

命令显示图：

示例网页图：

2. 外边距溢出：

在某些特殊情况下，为子元素设置上下外边距时，
有可能会作用到父元素上

特殊情况：

  1. 父元素没有上或下边框‘
  2. 必须为第一个子元素或最后一个子元素设置外边距时

解决方案：

  1. 为父元素增加边框（上或下）
  2. 在父元素中增加子元素<table>到第一个子元素位置处
  3. 通过设置父元素的上内边距来取代子元素的上外边距 

3. 外行内元素和行内块元素设置外边距为：

行内块元素设置上下外边距整行内容
都跟着变。

这是有溢出的
命令显示图：

示例网页图

解决溢出的图示

示例网页图：