CSS 盒子

转载自：http://www.zblog.us/programing/web/css/cssbox-introduce-2.html

盒子模型定义

如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。

盒子模型如下：

margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

一些HTML元素如div、p等块元素，默认情况下就是一个盒子，有些内联元素如span、a等虽然默认不是盒子，但也可以通过CSS中的display属性将其声明成盒子，在HTML文档中，不是盒子的元素各自的宽度为其所呈现的信息内容宽度，它们彼此间互相紧靠从左到右依次排列，直到占满整个浏览器窗口后自动行。对于是盒子的元素，如果没有特殊设置，其默认总是占单独一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子只能排列在它的上面或者下面，即上下累加着进行排列。每个盒子都可以看成是由从内到外的四个部分构成，即内容、填充、边框和边界，CSS为这四个部分规定了相关的属性，通过对这些属性的控制可以丰富盒子的实际表现效果。

四个组成部分及各自具备的属性

CONTENT

内容是盒子模型的中心，它呈现了盒子的主要信息，这些信息可以是文本、图片等多种类型。内容是盒子模型必备的组成部分，其他的三部分都是可选的。内容有三个属性，width、height和overflow。使用width和height属性可以指定盒子内容的高度和宽度，其值可以是长度计量值或者百分比值。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以滚动显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

PADDDING

填充是内容和边框之间的空间，可以被看作是内容的背景区域。填充的属性有五种，即padding、padding-top、padding-bottom、padding-left、padding-right。使用这五种属性可以指定内容与各方向边框间的距离，对应的属性值类型与width和height相同。同时通过对盒子背景色属性的设置可以使填充部分呈现相应的颜色。

BORDER

边框是内容和填充的边界。边框的属性有border、border-style、border-width和border-color。边框样式属性border-style是边框最重要的属性，根据CSS规范，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted、doshed、solid等九种边框样式。使用边框宽度属性border-width可以为边框指定具体的厚度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS规定的颜色名。

MARGIN

边界位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。边界使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。边界的属性有五种，即margin、margin-top、margin-bottom、margin- left、margin-right，其具体的设置和使用与填充属性类似。对于两个邻近的都设置有边界值的盒子，他们邻近部分的边界将不是二者边界的相加，而是二者的重叠，若二者邻近的边界值大小不等，则取二者中较大的值。同时，CSS容许给边界属性指定负数值，当指定负边界值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定边界正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。

盒子计算

盒子本身的大小是这样计算的：

Width 
width + padding-left + padding-right + border-left + border-right

Height 
height + padding-top + padding-bottom + border-top + border-bottom

值为未明的情况

如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)。

如果未声明盒子的width(而且这个盒子是一个块级元素)，那么事情就变得有点奇怪，看下面的几种情况。

块级盒的默认宽度

如果没有声明宽度，而且盒子是静态或者相对定位，那么宽度将保持100%且padding和border将向内推动而不是向外扩展。

如果明确的确定宽度为100%，那么padding就会向外扩展。

上面这个图形中，第一个是没有设置宽度，并且padding为20px的盒子。第二个是设置宽度为100%，并且padding为20px的盒子。

从这个例子可以看出，盒子的默认宽度并不是100%，也可能是其他值，应该了解这种特别有价值的情况，因为在现存的很多情况下，它对于设置/不设置宽度是很多帮助的。

我遇到的最大的麻烦就是 textarea(文本框) 元素了，它们需要设为宽度为所需的”cols”属性，并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%，但有 padding 时，就会延 展 textarea 的宽度。固定宽度环境下，通常可以设置为合适的像素值宽度，但是变宽情况就没那么幸运了。

无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加

这种情况会持续到盒子的宽度达到父元素宽度的 100%（最近的相对定位的父元素或者浏览器窗口），然后就会折行。
对盒子来说，垂直扩展以适应包含的内容是很自然的。值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有不同，所以要注意。

无宽度浮动盒子

同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽。（其父元素不必是相对定位的）。

内联元素也是盒子

我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子，但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形，它们也可以像其它盒子一样有 margin, padding 和 border。

折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边，但是只在第一行有效，因为那是盒子的起点。padding 正常的应用在文本的上部或下部，当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。