学习日志：CSS盒模型

盒模型

  俗称框模型。它定义了元素框处理元素中的内容、内边距、边框，外边距的方式。

  页面元素皆为盒模型，div、span、img... ,每个元素实际占用页面的宽高组成：外边距+边框+内边距+内容宽高。

外边距(margin)

  外边距(margin)是围绕元素周围的区域，默认不能被其他元素所占据，主要作用是拉伸两个元素间的距离。

1.属性：

如：

margin:值；

设置单个外边距可以使用margin-top/right/bottom/left:值；

2.取值

1.具体数值 px

2.百分数 %

3.负值（移动块位置功能）：

  左外取负（正）值，向左（右）移动；

  上外取负（正）值，向上（下）移动；

4.auto 由浏览器计算外边距值（默认情况，auto只对水平外边距有效），为元素设置此值后，元素居中对齐。

简便写法：

margin:value;（设置上右下左外边距）

margin:v1 v2;（v1对应上下，v2对应右左）

margin:v1 v2 v3 v4;（对应上右下左方向）

注：具备默认外边距的元素（body  h1~h6  ul  ol  pre ），可以使用CSS来更改它们的属性值。

3.外边距特殊问题

1.外边距合并：当两个垂直外边距相遇时，他们将形成一个外边距，合并后外边距的高度等于两个元素中外边距较大的值。

2.外边距溢出：如在某些特殊情况下，给子元素增加垂直外边距时，有可能作用到父元素上（1、父元素无上下边框时；2、为第一个子元素增加上外边距，或为最后一个子元素增加下外边距时。）

解决方法：1、为父元素增加透明边框；2、为父元素设置上内边距来取代子元素的上外边距；3、为父元素在增加一个空子元素table于子元素最后一行。

内边距(padding)

内边距是内容区域和边框之间的距离；内边距的设置，会增加边框所占用区域。

1.属性:padding

设置单个内边距可使用：padding:top/right/bottom/left.

2.取值：1.px  2.%  3.auto

简写方法：

padding:value; 四个方向内边距，

padding:v1 v2;上下  左右方向

padding:v1 v2 v3 v4;对应于上右下左的内边距。

3.内边距特殊注意：为行内元素设置上下内边距时，只影响当前元素自己，不会影响其他元素。

box-sizing

1.作用：重新指定元素尺寸计算模式

2.语法：

属性：box-sizing

取值：1.content-box 默认值，width(height)只表示内容区域的宽度，border和padding的值额外计算；

2.border-box 给定的width和height，会包含border和padding；

3.padding-box 只将padding值算在width(height)中。

尺寸计算模型：外边距+内边距+边框+内容宽高