CSS框模型详解

一、框模型

  框：页面中一切元皆为框。
  框模型：Box-Model，定义元素狂处理元素内容，内边距以及外边距的方式。

对象的实际宽度是：左右外边距+左右内边距+width。
对象的实际高度是：上下外边距+上下内边距+height。
元素边框内占地区域：左右边框+左右内边距+元素width。

二、外边距

  (一)、什么是外边距
     围绕在元素边框周围的空白区域就是外边距正常情况下外边距是不允许被其他元素所占据的(是不能被继承的)。
  (二)、语法：

margin:value;		//一次性设置四个方向的外边距。

  单边设置：
    margin-top：设置上外边距。
    margin-bottom：设置下外边距。
    margin-left：设置左外边距。
    margin-right：设置右外边距。
  他的取值为：
    1.单位可以为 px 或 %
    2.取值可以为auto
    Ps:只有左右外边距可以取值为auto，因为上下取值auto的话没有效果，没有意义。
    3.取值可以为负数
     作用：移动元素
        左外边距取值为负时：元素向左移动。
        上外边框取值为负时：元素向上移动。
        左外