CSS基本概念 1.4可视化布局

 

尽管CSS包含部分非视觉媒体样式，但它的核心是一种视觉表现的样式语言。 因此，以后作者将花很多时间担心样式的视觉效果，了解这些效果的组成和摆放是非常重要的。

在CSS中有两个基础的布局机制：盒模型和内联布局模型。虽然它们相关，但都有自己独特的规则和效果，而且不是所有的都是直观的。 此外，这些特殊的规则是来描述定位元素如何摆放和浮动元素的尺寸与如何摆放。这些规则基于盒模型，但也有一些重要的区别。

盒模型（The Box Model）

CSS视觉显示的基础是盒模型。熟悉盒模型的各个组成部分能使作者了解许多属性彼此之间是如何相互影响，以及理解为什么它们会在页面上出现（或者找出为什么在浏览器出错）。

基本组成（Basic Components）

　　　　盒模型基本组成图如下图所示。

　　　　

布局具体规则（Specific Layout Rules）

元素的背景（无论颜色、图像或一些组合）延伸到边框的外边界，因此用内容区（content area）和内边距（padding）填充。它将通过边框（border）的任何“间隙”可见，如那些见过的border-style值dotted（点状），dashed（虚线），double（双线）。

下面的等式总是成立的：父元素width的值(也就是说，父元素的内容区域的宽度)=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right(左外边距+左边框的宽度+左内边距+宽度+右内边距+右边框的宽度+右外边距)。有时必须设置左右的外边距为负值来完成。在这种情况下，将出现元素比它的父元素更宽，并且将“伸出”其父元素的内容区域。然而，在数学上，负的外边距值满足上述等式，而且元素可以说与父元素的内容区域完全一样宽（例如:父元素width: 200px;子元素width:100px; margin-left: -100px;）。这似乎很虚伪，因为视觉效果恰好是相反的,但在CSS这是允许的。

仅有外边距时，height和width可以设置为auto(自动)。外边距可以赋予负值，但height和width不能。内边距和边框宽度默认为0（零），且不能设置为负值。

在正常文档流中元素垂直相邻的外边距会被折叠。换言之，如果两个外边距是彼此垂直相邻的，那么实际距离是两个元素边框到相邻的外边距中的最大值。在外边距为负值的情况下，正外边距最大值减去负外边距最大值的绝对值。在浮动和定位的情况下垂直相邻的外边距不会折叠。

折叠外边距的机制可以想象成一个纸塑（在纸上覆盖着一层塑料薄膜）模型，在这个模型中，每个元素可以通过一张纸来表示，纸上写（或画）了元素的内容。围绕该元素的外边距如贴在书页边界的透明塑料条。当一个元素跟着另一个元素，它们向一起滑动，直到一个元素的塑料带边界接触到另一个元素的纸的边界。因此，塑料将重叠，但纸片之间的距离永远不会超过塑料带的宽度。如果多个元素相邻这是成立的，如一个列表结束和另一个的开始。以四个相邻的外边距举例（两个ol或者ul），第一个 列表和其自身的最后一个列表项的底部外边距，和第二个列表和其自身第一个列表项的顶部外边距。两个列表项内容之间的距离将是四个外边距中最大的一个。

由于水平外边距不会折叠。因此，设置两个相邻的行内元素的外边距为10像素将造成第一个元素的右边与第二个元素的左边相距20像素。浮动或定位的元素无论水平或垂直，外边距都不会折叠。

内联布局模型（The Inline Layout Model）

文本在元素内的排列方式和盒模型一样基础。 虽然这个可能看起来很简单，一旦暴露细节,很快就会变得复杂。

基本组成（Basic Components）

基本的内联布局模型的图如下图所示：

 

具体的布局规则（Specific Layout Rules）

　　　　用下列术语计算一行文本的高度：

　　　　. 内容区　   通过每一段文字的font-size定义的盒子(无论是否在一个元素)

　　　　. 1/2行距　 由行高的值确定距离，那里1/2行距等于((font-size-line-height)/2)

　　　　. 内联盒子  内联盒子定义为内容区减去顶部与底部的1/2行距（内联盒子=内容区域-顶部1/2行距-底部1/2行距）；对于任何给定的文本，内联盒子的高度将始终等于文本的line-height的值

　　　　. 行盒 　　 行盒实际上是堆放在先前行盒的下面；它的界限位于行中最高的内联盒子的顶部和最低的内联盒子的底部。

　　　　这一切是如何运作的?对于每一个文本段，生成一个内联盒子，使用内容区域和1/2行距生成它（内联盒子）的最终高度。内联盒子将始终在内容区中垂直居中。然后，根据每个内联盒子的vertical-align值将它们进行对齐。如果值是基线（baseline），则文本的基线与该行的基线对齐。

　　　　一旦内联盒子垂直对齐，行盒的高度被确定。 行盒的顶部与行内最高的内联盒子的顶部对齐，行盒的底部与行内最低的内联盒子的底部对齐。每个行盒的顶部毗邻上一个行盒的底部，元素中第一个行盒的顶部毗邻父元素的顶部内边界。因此，可以通过“堆叠”行盒来形成一个块级元素的内容。

　　　　事实上，每个字符都生成它自己的内联盒子，但对于给定的元素它们都应该具有相同的高度，所以，通常在元素级别中讨论内联盒子。

　　　　任何边框绘制在放置内联盒子的四周,这样它就在区域(定义此区域为内容区加上所有声明的内边距)以外。这与行盒本身没有直接关系；在巧合的情况下可以在行盒边界绘制边框。内联元素的边框完全有可能“切割”行中的文本，或通过其他的文本行。

　　　　当涉及到边框、背景和其他盒属性时，内联元素被当做一个单行文本一样格式化。让我们打个简单的比方。想象给定一个内联元素：元素的内容写在一个纸条上。任何背景、边框、内边距等按照盒模型应用到内联元素上。然后，在单词(或字)之间将纸条撕成碎片，以便每个纸段都适于块级元素内容区域的左右边界。因此，除了第一个行段的左边界和最后一个行段的右边界之外，边框很可能不会“覆盖”任何行段的末端。同样，任何右或左的内边距（或外边距）将分别只出现在第一个或最后一个行段上。

　　　　这个比喻只是部分准确的。如果内联元素中的所有文本都是相同的大小和相同的垂直对齐，那么这个比喻是完全正确的。然而，如果不是这样的话，如本节前面所述中每一个行高都会发生改变。换句话说，由于以行盒的方式构建，在同一个内联元素中一些行段可能比其他的高。否则，就可以类比；任何左或右内边距或外边距将分别仍只适用于第一或最后一个行分段。

　　　　在不可替代的内联元素上设置顶部和底部的外边距（例如，仅包含文本的元素）在布局上将无效果，同样外边距不能影响行盒高度的计算（只支持左右外边距，上下外边距无效）。设置顶部和底部的内边距可以导致内联元素背景的增加，但是在这种情况下应该发生什么的规范并不清楚。扩大的背景可能覆盖其他行中文本的内容，甚至是其他的元素。背景可能绘制在其他内联元素内容“下”。用户代理被允许可以忽略在内联元素中顶部和底部的内边距。

　　　　对待内联替代元素（例如，文本行中的图片）与文本有一些小差异。定义内联盒子为替代元素加上所有的边框和外边距。因此，内联替代元素的顶部和底部的外边距会影响行盒的高度。

浮动规则（Float Rules）

　　　　当元素浮动时，它的视觉安置取决于十条规则。事实上，这些规则说明了“放置浮动元素要尽可能的高，和远离另一侧”。然而，细节是很重要的（这些细节不考虑外边距）：

　　　　1.左浮动盒子的左外边界不可能在它自身包含块左边界的左侧。右浮动元素的规则也相似。

　　　　2.如果当前的盒子是左浮动，并且它之前的元素也定义为左浮动，那么对于所有之前的盒子，当前盒子的左外边界必须是在之前盒子的右外边界的右侧，或者它的顶部低于早期盒子的底部。右浮动盒子的规则也相似。

　　　　3.左浮动盒子的右外边界不可能在右浮动盒子左外边界的右边或右浮动盒子的右边。右浮动元素的规则也相似。

　　　　4.浮动盒子的顶部外边界不可能高于它的包含块的顶部。

　　　　5.浮动盒子的顶部外边界不可能高于它前面定义的任何为块级或浮动盒子的元素顶部。

　　　　6.浮动盒子的顶部外边界不可能高于它前面定义的任何行盒的元素顶部。

　　　　7.左浮动盒子它的左边有另外一个左浮动盒子，它右外边界不可能在它的包含块的右边界的右侧（大意：左浮动不可能伸出右边界，除非它是距离左边尽可能的远）。右浮动元素的规则也相似。

　　　　8.浮动盒子必须尽可能的放置在高处（包含块的顶部）。

　　　　9.左浮动盒子必须尽可能的放在左边，右浮动盒子必须尽可能的放在右边。高位置是首选其次的是左/右。

　　　　10.（在clear:left的情况下）一个浮动的顶部外边界必须在任何早期左浮动盒子的底部外边界的下面，或（在clear:right的情况下）在任何早期右浮动盒子的底部外边界的下面，或是（clear:both）在以上两者的底部外边界的下面。

　　　　浮动元素的外边距永远不会折叠。因此，尽管一个元素可能浮动到它父元素的左上角，它的外边距将会把它推出角落，也会把属于浮动元素的内容推出。

　　　　即使不允许浮动元素比包含块的顶部高，仍有办法解决这个问题。通过设置负的外边距，这个元素能“向上拉”超过它自身包含块的顶部。这与元素通过设置一个负的左右外边距可以实现超出包含块的功能类似。此外，浮动元素可以通过设置左或右外边距超出元素。然而，对于这种情况用户代理不需要对文档重新进行流处理，所以给浮动元素设置负边距可能与文档的其他内容重叠。建议作者非常谨慎的使用这种技术。

　　　　尽管浮动元素脱离了正常的文档流，它们依然会影响文档中内容的布局。可以给被浮动元素覆盖的元素增加内边距来使它们在同一行上。然而，这意味着任何元素的背景和边框将延伸到浮动元素的“下面”，并且可能越过浮动元素其他的侧面。这种行为确保了所有的元素盒子将保持矩形，但是它可能导致不必要的影响。