CSS盒子模型

   盒子模型是CSS 控制页面元素的一个重要概念。在盒子模型中，所有页面中的元素都被看作一个个盒子，他们占据一定的页面空间，在其中放着特定内容。可通过调整盒子的边距和间距等参数来调节盒子的位置及大小。

1.盒子模型的组成
盒子模型由content、border、padding、margin共四个部分组成。

宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+content width=margin+border+padding+width
高=margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+content width=margin+border+padding+height

需要注意的是，并不是用div定义的网页元素才是盒子，所有网页元素都可以看作盒子。网页上的表格、图片、文字等，从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

1.2盒子border属性
（1）border-color:边框的颜色。
（2）border-width:边框的粗细程度。
（3）border-style:边框的类型，可设置为：none、hidden、dotted、dashed、solid、double等值。

1.3盒子padding属性
盒子padding是盒子的内边距，它一边是盒子的内容一边是盒子的边界，即边框和内容之间的区域就是padding。padding的用法参考上篇文章《html基础》。

1.4盒子margin属性
margin是盒子的外边距，他碰不到盒子的边界，指的是页面上元素和元素之间的距离。margin的用法参考上篇文章《html基础》。

2.盒子的浮动与定位
实际网页上分部着大量的盒子，他们之间有着父子的相互关系。CSS首先确定了一种标准的排版方式，可以保证设置的简单化，各种网页元素都按照这种标准方式进行布局，这就是“标准流”方式。但仅有此方法还不够灵活，所以CSS规范还给出了其他布局方式，如“浮动”属性和“定位”属性等。

2.1标准流
指在不使用其他与排列和定位相关的特殊CSS规则时各种页面元素默认的排列规则。
页面元素可以分为以下两类:
（1）块级元素（block level）:总是以一个块的形式表现出来，并和同级的兄弟依次垂直排列，左右撑满。例：div/p/ul/li/ol/dl/dd/dt;
（2）行内元素相邻元素之间横向排列，到最右端自动折行。例：span/strong/en/i/b/a。

2.2盒子的浮动float
如果将float属性设置为left或者right，那么元素就会向其父级元素的左侧或右侧靠紧。当该属性不等于none引起对象浮动时，对象将被视作块对象（block-level），即display属性等于block。
（1）none：对象不浮动；
（2）left：对象浮在父级元素的左边；
（3）right：对象浮在父级元素的右边。

2.3盒子的定位原则
（1）行内元素之间的水平定位：两个行内元素之间的水平间距由左边元素的右外边距加右边元素的左外边距共同决定。
（2）块级元素之间的垂直定位：两个块级元素之间的距离就不是第一个元素的margin-bottom加上第二个元素的margin-top了，而是两者之中较大的。这个现象称为margin的“塌陷”现象，即较小的margin塌陷到较大的margin中。

2.4盒子的定位
position属性定位方式如下：
（1）static：静态定位；
（2）relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对与它在原本的标准位置偏移指定的距离，这种定位方式导致元素发生相对位移，需要指定一定的偏移量，水平方向通过left或right属性指定，垂直方向通过top和bottom属性指定，；
（3）absolute：绝对定位，盒子的位置以包含框为基准进行偏移；
（4）fixed：固定位置，即当拖动浏览器窗口的滚动条时，依然保持对象位置不变，当指定其偏移量时，水平和垂直方向的偏移与相对定位相同。