第三章 可视化格式模型

三个最重要的CSS概念需要掌握，浮动floating，定位positioning， 框模型（有些书翻译成盒子模型）box model。 这些概念控制了元素在页面中的安放和显示。 形成了CSS布局的基本。 需要经过一段时间才能掌握盒子模型的复杂性， 绝对定位和相对定位的区别， 还有浮动和清除怎样工作，一旦掌握以上内容，用CSS开发网站就会变得简单。

本章会学习：

? The intricacies and peculiarities of the box model
? How and why margins collapse
? The difference between absolute and relative positioning
? How floating and clearing work

==盒子模型回顾==

padding出现在content Area周围， 如果你对一个元素添加背景， 它会填充到content Area和padding所形成的区域， Padding本身用于在内容周围内容周围建立一个槽，以致内容不会紧靠背景的边界。 而border是content area和padding区域外的一条线， 这个线有不同样式， 比如实线，点状线，短划线， border之外是margin， margin是透明不可见的，它被用来控制元素之间的空间。

CSS2.1也包含outline属性， 不想border属性， outline属性在元素盒子模型的顶部，它不影响元素的大小和位置。 IE8以上的现代浏览器才支持。

padding， border，margin 都是可选的，默认宽度值为零， 但是很多用户代理样式表会给出特定值， 你可以覆盖这些浏览器属性，把这些元素的margin和padding设置回零， 可以分别设置也可以用通用选择器进行设置：

* {
margin: 0;
padding: 0;
}

在CSS中， width和height指的是内容区域的宽度和高度， 增加padding， border， margin不会影响内容区域的尺寸。但是会增加一个元素盒子模型的总体尺寸。

#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}

padding， margin， border 可以被应用到一个元素的所有边， 也可以被应用到单独的边， margin可以使负值，并在多种技术中使用。

IE和盒子模型

不幸的是，老版本的浏览器，包括IE6的quirks mode （兼容模式）下，使用它们自己的不标准的盒子模型， 除了测量content内容的宽度，这些浏览器把width的值计算成 content ，两边padding和 两边border尺寸 相加后的和，这样做也说得通， 在现实世界中， 盒子具有固定尺寸， padding在盒子里面， 增加更多的padding， 就会给content更少的空间， 然而， 虽然逻辑上可以说的过去，但是这些版本的IE不按照标准会导致严重问题。 例如， 前面例子中盒子的总宽度将是90pixel 在IE5.X中， 因为IE5.X认为两边5 pixel 的padding是70 pixel 宽度width的一部分，而不是要加上去

第9章将会看到解决这个问题的方法， 更彻底的解决办法是部位元素本身添加padding， 而是为元素的父元素或子元素添加padding和margin。

空白（margin ）叠加（collapsing）

margin collapsing 概念比较简单， 但是它能导致很多混淆， 当你布局一个网页， 简单来说， 当有两个或多个垂直的margin相遇， 他们将形成一个空白边， 这个空白边的高度等于两个发生叠加的空白边高度中的较大者。

当两个元素叠加， 第一个元素的底部空白与第二个元素的顶部空白边发生叠加。

 

当一个元素被另一个元素所包含， 假如没有padding和border分隔两个空白，那么顶部和底部的margin也会发生叠加。

 

尽管初看上去有点奇怪， 但是一个元素本身的上下空白margin也会发生叠加， 假如一个空元素， 他有margin，但是没有padding和border， 这种情况下，顶部空白和底部空白就碰到一起， 他们会发生叠加。

如果这个margin碰到另一个元素的margin，他也会发生叠加。

margin collapsing只是在普通文档流中盒子框的垂直空白边上才会发生， 行内框，浮动框， 或绝对定位框之间的空白边不会叠加。

==定位回顾==

现在你已经对盒子模型很熟悉，那么再看一下视觉格式模型和定位模型， 理解这两个模型的差异很重要，它们一起决定了元素再页面上的安置。

视觉格式模型

人们称p, h1, div  等元素为块级元素。 着意味着它们是视觉表现为一块的内容， 相反， strong 和span等元素，成为行内inline元素， 因为它们的内容被表现为行内框。

通过display属性， 可以改变盒子的类型。 这意味着，通过设置display属性为block，你能够把一个行内元素，比如anchor 表现得像块级元素， 也可以通过设置display属性为none， 使得一个元素表现不出“盒子”的特征。而且这个“盒子”和它里面的内容，也不会显示， 不占用文档里的空间。

CSS定位机制有三种， 普通流， 浮动， 绝对定位。 除非专门指定， 否则所有框在普通流里都有定位， 就如名称所示， 元素盒子在普通流里的位置， 由它在文档中的位置决定。

块级盒子垂直一个接一个排列， 块级盒子之间的距离由盒子的垂直空白（margin）计算所得（上文介绍过）。

行内盒子在一行中水平排列， 他们水平间距， 可以通过水平padding， boder， 和margin来调节， 但是，垂直padding，border，margin并不影响行内盒子的高度， 相似的，显式设定一个行内盒子的高height和宽width是无效的，由一行形成的水平盒子成为line box, 一个line box总是足够高，以容纳所有里面的line box， 这里有另一个警示， 设定line height可以增加这个盒子的height。 因为这些原因， 改变i一个inline box的尺寸唯一的方法，是改变line height， 水平 border， padding， margin。 （这段有点拗口，希望能解释清楚，中译本有删节，意思偏离原著）。

Helpfully, CSS2.1 allows you to set the display property of an element to be inline-block. As
the name suggests, this declaration makes the element line up horizontally as if it were an inline
element. However, the contents of the box behave as though the box were a block-level,
including being able to explicitly set widths, heights, vertical margins, and padding. Historically,
this property has been poorly supported; hence, it’s relative obscurity. Thankfully, inline-block is
now supported by Firefox 3.0 and above, IE 8, and the latest versions of Safari and Opera, so I
think we are going to see inline-block being used to create more interesting layouts over the
next few years.

盒子可以嵌套其他盒子， 大部分盒子由显式定义的元素形成， 然而， 有种情况是块级元素再没有显式定义的情况下被创建---当你在块级元素，像div的开头添加一些文字的时候， 虽然你没有定义文字为块级元素，它也被当成是。 （这里中译版，翻译错误，译者凭想象，真是“厉害”）

<div>
some text
<p>Some more text</p>
</div>

在这种情况下， 盒子被描述成匿名块， 因为它并不和一个特定的元素相关联。

一个相似的事情， 就是在块级元素内部有几行文字， 假如有个段落包含三行文字，每行文字形成一个匿名块， 你不能直接样式化匿名块或line box ，除了使用：first-line伪类， 显然作用有限， 然而理解所有你在屏幕中看到的东西都形成了某种盒子是很有帮助的。

相对定位

相对定位很容易掌握， 如果你要相对定位一个元素， 它就会呆在它所在的地方。然后设定它的垂直，水平位置， 来相对于起始点来移动这个元素。如果设定top 为20 pixels， 那么盒子就会在原点下方20pixels， 设定left 为20 pixels， 就会在左边出现20 pixels的空间，把元素移向右边。

#myBox {
position: relative;
left: 20px;
top: 20px;
}

相对定位时，盒子元素继续占有原来的空间，导致位移之后的元素和其他盒子产生重叠。

绝对定位

绝对定位实际上