您的位置： >>
　　前言：前阵子在做一个项目时，在页面布局方面遇到了一点小问题，于是上stackoverflow上求助。ifaou在帮助我解决我问题的同时，还推荐我阅读一篇有关CSS盒子模型的文章《The CSS Box Model》，阅读之后受益匪浅，才知道自己对盒子模型知识还是如此欠缺。恰逢学期末，项目验收后暂时告一段落，有空闲的时间。于是想把这篇文章翻译出来，一方面再给自己一点挑战和锻炼，另一方面也给大家参考，让更多的人受益。
　　这篇文章适合初级web设计朋友，让你对盒子模型有更近一步的理解。但是在阅读这篇文章之前你应该对盒子模型html等基础知识是有一定的了解，否则只会让你更加云里雾里。这篇文章不会像很多的中文教程那样，把盒子模型内边距，外边距，如何定位等概念有条不紊的介绍一遍。这篇文章更多的是教你在实战过程中如何自如的控制盒子的宽度，如何用最恰当的方法定位盒子，如何解决IE中盒子的种种bug。
　　之所以翻译这篇外国文章，是因为我在学习的过程中也发现，国外的教程和过内的相比，它们授人以渔，更授人以鱼 。不同于国内教程有章有节有点有条目，他们的叙述方式更接近谈话式的由浅入深&&总而言之，目的在于给更多的初学者提供一点启示和帮助，不必像我一样走了许多弯路。
　　这是我第一次翻译，有欠缺的地方请大家指正。我尽量把它翻译的通俗易懂，同时也加入了一些自己的语言自己的体会，和帮助理解的图示(为了阅读流畅，也就不另表示了)。附上原文地址
　　深入理解CSS盒子模型（The CSS Box Model）
　　如果你了解盒子模型(box model)的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助你理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型(inline layout model)&&定义了行内元素是如何定位的,在中有具体说明
　　盒子的尺寸的计算(Calculating BoxDimensions)
　　在CSS2.1中，块级元素只能是矩形形状的。当我们需要计算一个块级元素的整体尺寸时，需要同时把内容区域(content area)[注释1]的长宽，连同此元素的外边距，内边距，以及边框都计算在内
　　[注释1]：此文章中频繁提到content 和content area这两个概念，虽然从字面上都可以理解为盒子中的内容区域(content),但从后文的叙述来看，这两个概念还是有区别的，到这篇文章发布为止，我还是对这两者的区别有迷惑，希望有兴趣阅读原文的朋友能留言告诉我这两者的区别，以便于我更正文中的错误。
　　我们可以通过声明宽和高来定义一个元素的内容(content)的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动(auto)
　　w3schools上对于盒子模型的图示如下：
　　在图的下方有一段很重要的话Important: When you specifythe width and height properties of an element with CSS, you are just settingthe width and height of the content area.也就是说当我们在css中设计一个块级元素的width和height属性时比如.box{width :100 height:100px}时，其中的width 和height仅仅是对content部分设置的，即定义上图中padding下虚线方框内区域的长和宽。而不是内容，内边距，边框的总和(但在IE的早期版本包括IE6中，盒子模型的width和height却恰恰是这样定义的，尽管符合人们思考的逻辑，但是不符合规范，这会造成严重的问题)
　　对宽度为自动状态的静态(static)定位元素(即无定位)，和相对定位()元素来说，计算宽度的方法是，将他们包含块(containing block)[注释2]的宽度减去此元素的横向的所有外边距，内边距，边框，滚动条。也就是说，从包含块的宽度中除去元素的横向外边距，内边距，边框，滚动条（如果存在的话）的宽度，所剩的值就是了。
　　[注释2]：包含块(containing block)。如果你知道绝对定位和相对定位的实现原理的话，这个注释可以忽略。包含块可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,内部元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。例如在绝对定位中，距离它最近的已定位(position为fixed,relative或absolute)的祖先元素即为包含块。这算比较初级的概念，不深究，请百度。
　　包含块的定位属性和尺寸被作为后代元素定位和尺寸计算的参考。尽管元素的定位必须遵从与他们的块级元素来进行定位，但是他们也非受限于它。后代的元素也可以溢出包含块。在大多数情况下， generated boxes[注释3]通常扮演着子代元素包含块的角色。想要充分了解包含块的大量细节信息请点击
　　[注释3] ：不知道generated boxes应该如何翻译，有知道的朋友请告知，谢谢
　　对于浮动()和绝对定位()元素(包括固定定位()元素)来说, 自动状态的宽度会使generated box收缩到紧贴它内容大小。
　　我觉得我在这里有必要总结一下前两段话的意思，前两段话都是在说在宽度缺省的情况下(auto),盒子模型自动设置宽度的两种方式。
　　我们知道，当我们放置一个块级元素于页面上时，并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域。
　　举个例子：
background:black;
color:White;
height:<span style="color: #px;
padding:10px;
border:20px solid Red;
margin:30px;}
　　注意.box1没有设置任何的position属性，也没有宽度属性。这是为了实验相对定位或者无定位的情况。
　　Html代码：
&h2&Static or Relative Box&/h2&&div class="box1"&For floated or absolutely positioned &/div&
　　结果为：
　　即块的宽度是延伸自动填充满它的父元素的宽度区域。
　　所以当我们在计算一个被包裹中的元素的宽度时，我们只需要用父元素减去这个元素的外边距，边框，内边距，和scrollbar，剩下就是它的宽度，因为它会自动填充。虽然这个基本上没有实际应用可言&&
　　但是浮动floated元素和绝对定位元素，他们的结果却恰恰相反，他们会收缩以致包裹紧贴内容，同样举个例子：
background:black;
color:White;
height:<span style="color: #px;
padding:10px;
border:20px solid Red;
margin:30px;
position:absolute;}
　　这里同样没有设置宽度，但是进行了绝对定位，html代码：
&h2&Absolute or Float&/h2&&div class="box2"&For floated or absolutely positioned &/div&
　　结果：
　　浮动元素和宽度
　　之前，在CSS2中，没有声明宽度的浮动元素，不会收缩并于紧贴(shrink to wrap)住他们的内容，恰恰相反的是，他们会不断的延伸至与他们父元素最大宽度相当。这种行为在CSS2.1中被收缩紧贴代替了。但是无论如何，在IE6和更早的浏览器版本中，一个没有声明宽度的浮动元素还是会收缩紧贴住它的内容作为一种默认的设置,除非子元素有自己的布局(has a layout)[注释3]，比如说在这种情况下，父元素会伸展来适应父元素中的可用内容的宽度。
　　[注释3]：&IE的表现与其它浏览器不同的原因之一是，显示引擎使用了一个称为布局的内部概念&&windows上的IE使用布局概念来控制元素的尺寸和定位。那些&拥有布局&的元素负责本身及其子元素的尺寸设置和定位。如果一个元素&没有拥有布局&，那么它的尺寸和位置由最近的拥有布局的祖先元素控制&&布局是许多IE显示bug的根源&&&摘自Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced WebStandards Solutions(Second Edition)》(精通CSS 高级Web标准解决方案 第二版)。
　　正如以上所说，对于没有声明宽度的浮动元素，在IE6和之前的版本都是采取收缩紧贴内容的行为，所以这种说法无从考证了，我也在IETest下测试过，的确如此同样应该被注意的是，当一个浮动元素（没有声明宽度）包含一个向右浮动的子元素时，它同样也会自动的延伸填充，以适应父元素的可用内容的宽度。这种情况在之前的IE浏览器，包括IE7中都是存在的(之前的Firefox，包括2.0版本中也存在这个bug,但是这个问题在Firefox3.0 Alpha 6版本中已经得到了解决)。
　　我也为以上这段话写了个例子给大家：
&div class="parent"&
&div class="containing-block"&
&div class="box"&For floated or absolutely positioned &/div&
　　对照一面那段话：首先是一个浮动元素containing-block，包含一个向右浮动的子元素box，父元素为parent：
background:black;
color:White;
height:<span style="color: #px;
padding:10px;
border:20px solid Red;
margin:30px;
float:right;}.containing-block{
background:blue;
height:<span style="color: #px;
float:right;}.parent{
background:gray;
height:<span style="color: #px;
width:<span style="color: #px;}
　　在Firefox中运行结果为：
　　但是在IETester中用IE5.5运行的效果是：
　　所以，为了避免上面提及的bug,如果可能的话，尽量为一个浮动元素指定一个具体的宽度值，总是会比较安全一点的。无论如何，只要你总是有留意到以上提及的问题，你或许会发现无宽度的浮动在一些场合下还是非常管用的，比如横向流式(fluid-width)布局菜单。
　　无论内容区域如何定位，如果高度，最小高度(min-height)，最大高度(max-height等没有被声明的话，内容区域高度与内容的高度是相等的[注释4]。
　　[注释4]：这里就是让我对content area和content产生疑惑的地方，不知道有没有朋友能帮我看看，帮我解释一下。
　　所以，当你为了弄清把一个元素放在页面上究竟需要多大尺寸时，把已经声明内边距，边框，外边距值统统与内容区域加上。当然，如果一个元素没有内边距，边框，外边距的话，也就是它的尺寸仅仅是由它的内容来决定
　　如果一个元素仅仅包含浮动或者绝对定位的元素，它没有一丁点的内容，那么它的高度将为0。我们将在做更多讨论。
　　实现盒子模型
　　说明盒子模型的最好方式是用一个简短的例子。我们用计算来看看在页面上放置一个元素总到底需要多大的尺寸(这里先忽略外边距的叠加效果&&以下会有更详细有关这个的说明)：
Total width = left margin + left border + left padding + width + right padding + right border + right marginTotal height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
　　这里是我们的CSS样例&&为了一个类名为&box&的元素声明盒子的各个属性：
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;}
　　以上的元素总共被计算出来的的尺寸是：
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352pxTotal height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
　　以上的计算在图1中给出了具体描述，这是从Firebug元素布局展示中截下的图：
　　在图1中，我们可以很清晰的看到内容区域处于中央，围绕着内容区域的内边距区域，边框区域，外边距区域。内容区域的外边缘称为内容边缘(content edge),或者是内边缘(inner edge);内边距区域的外边缘被称为外边距边缘(padding edge);边框区域的外边缘被称为边框边缘(border edge);外边距区域的外边缘被称为&&你应该可以猜到了&&外边距边缘(margin edge)或外边缘(outer edge)。
　　你可以从这个简短的例子中看到，为了使这个元素适应这个页面，我们需要一个至少352px 宽度和252px高度的区域。如果可用的区域小于这个，这个元素会错位，或者溢出它的包含块。注意到IE6或者更早的浏览器版本中，在这种情况下会伸展包含块的以容纳内容区域的多余高度，这很明显会扰乱网页的布局。但其它版本的浏览器会使元素溢出它的边界，同时忽略内容。
　　这个Bug翻译过来是：&如果元素的内容比元素本身大，那么我们希望内容溢出到元素外。但是，在IE6和更低版本中，拥有布局的元素会错误的拓展以便适应内容的尺寸&&这种错误意味着Window上的IE中的width实际上更像是min-width&&&Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced Web Standards Solutions(Second Edition)》(精通CSS 高级Web标准解决方案第二版)，给大家演示一下，很简单的：
&div class="IEbug"&&p&Your understanding of the box model concept, and how it relates to the way in which an element，　　　　final dimensions are determined,&/p&&/div&.IEbug{
background:
height:100}
　　火狐下测试结果：
　　IE6下测试结果：
　　留意外边距叠加效应
　　尽管在上面的计算元素所需区域大小的例子中外边距已经在计算中包括在内了，但是需要注意的是纵向的无定位(static)元素的相邻外边距会叠加合成为其中一个较大宽度的外外边距的值，并非两者之和。这就意味当计算实际上需要存放一个元素的区域大小时，并不是从外边距的边缘开始算起，只有最宽的外边距会生效，并且较窄的外边距会与较大的叠加在一起，请阅读来了解更多有关这相当复杂的一个主题。　　
　　实际盒子模型应用
　　非常值得注意的一点是，当一个元素的宽度被设置为100%时(也就是说父元素的内容宽度是100%)，它不应该有任何的外边距，内边距，或者是边框，这只会使它放置的区域需要更大的面积。这通常会被设计师们所忽略忽略并且很严重的扰乱了页面的布局，这样的话内容要么溢出要么使元素比他们应该的样式更宽。
&div class="contain"&
&div class="box"&&/div&
　　没有margin和padding，仅有width情况下的CSS：
background:black;
width:<span style="color: #%;
height:<span style="color: #px;}.contain{
background:yellow;
height:<span style="color: #px;
width:<span style="color: #px;}
　　效果如图所示：
　　可见在没有margin和padding的情况下，100%的内容能恰到好处的填充父元素，一旦加入了margin和padding(margin:10padding:10)之后效果如图：
　　在firebug中的布局图：
　　而加入了margin和padding之后，元素出现了错位，并且只能显示左侧的margin。
　　解决办法是，在大多数情况下，避免给宽属性添加具体的值（绝不是自动）,并且只应用外边距，内边距，边框。无定位元素的宽度将会默认为自动。甚至就算定义了内边距，边框，外边距，它仍然会认为可用的内容宽度为全满状态。
　　当然，这种方法对某些例子可能失效，比如当元素不是无定位元素时，并且它的确需要一个指定的宽度(就像那个浮动元素不会自动填充它父元素的例子一样)。在这些情况下，你有两个选择。
　　如果可用区域是固定宽度的，你能简单的把每一个属性元素(margin,padding等)的宽度都相加起来以匹配可用的那个固定宽度。举个例子，如果可用的区域宽度是500px,并且你需要一个元素有20px的内边距，简单的把这个元素的宽度设置为460px,内边距为20px（20+460+20=500）。这个办法中先决条件是宽度值和元素盒子属性使用的都是同一测量单位，因为你不希望把混合单位相加起来（200px + 10%，只是举个例子而已，在内容中这样的写法是没有意义的）。
　　当可用内容区域的宽度是未知的时候&&比如在流式布局(fluid layout)中&&这个方法是行不通的，因为百分比(percentages)和像素(pixels)不能一起相加。在这种情况下，解决方法应该是为需要的元素声明一个100%的宽度值，并且把内边距，边框，外边距的值都设置到一个嵌套其中的元素中去。这个嵌套元素没有任何的宽度值声明，并且可以在没有干扰父元素的情况下展示需要的内边距，边框，外边距。[注释5]
　　[注释5]呃，其实这段话我也没有理解&&
　　现在你应该能清晰的理解CSS盒子模型了。
　　后记：由于本人水平有限，可能很多地方翻译的并不是很通俗。只希望能起一个抛砖引玉的作用，有更多的朋友来完善它，指出我翻译和理解不正确的地方。如果时间允许的话，我继续翻译与此相关的一些列文章(即本文中的链接)。
　　最后向大家推荐Andy Budd、Simon Collision、Cameron Moll写的《CSS Mastery Advanced Web Standards Solutions(Second Edition)》(精通CSS 高级Web标准解决方案第二版)，翻译这篇文章时参考了其中不少内容，这也是一本适合CSS进阶类图书，不适合初学者。希望有兴趣的朋友可以参考一下。
Web前端热门文章
Web前端最新文章HTML5与CSS3基础教程：用CSS分控制每一个盒模型
摘要：CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。作者：图灵教育来源：《HTML5与CSS3基础教程》（第八版）第十一章全部章节：第一节：第二节：第三节：第四节：
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成，参见图11.5.1。这类似于挂在墙上的带框架的画，其中图画是内容，衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距。
图11.5.1：每个元素的盒子都有一些决定该元素所占空间及其外观的要素。可以使用CSS分别控制各个要素。注意，在默认情况下，宽度和高度仅定义内容区域的尺寸。背景（蓝色区域）会延伸到边框的后面，因此，通常情况下，它仅在内边距所延伸到的区域可见，除非边框是透明的或半透明的
可以使用CSS确定每个元素的盒子的外观和位置，并由此控制网页的布局，参见图11.5.2。本章会深入讲解width、padding、border、margin和控制盒子外观的其他属性。但首先，理解盒模型的基础知识非常重要。
宽度、高度和盒模型
关于CSS的width属性对元素所显示宽度的影响，有两种处理方式。（不包含任何将其与邻近元素隔开的外边距。）
默认的处理方式（如图11.5.1所示）实际上有些有悖于常理。浏览器中元素的宽度与其width属性值并不一致（除非它没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度，如图11.5.1表示的那样。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似，只不过计算的是上下内边距和边框值。
图11.5.2：示例页面中附注栏的盒模型。记住，每个元素都有自己的盒子。例如，这里显示的img元素有边框，而它左右的空间则是包含该图像的article元素的内边距
对大多数代码编写人员来说，另一种方式则更为直观。使用这种方式的话，元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面（如图11.5.3所示）。height属性与之类似。要使用这种模式，仅需对元素设置box-sizing: border-。
图11.5.3：如果设置了box-sizing: border-，则宽度和高度就包含了除外边距以外的所有要素。如果不设置这条规则，则表现为图11.5.1所示的方式
以上讲述都比较抽象，因此不妨看看分别使用两种方式的一个实例（如图11.5.4所示）。注意这里显示的padding和border-width值在每个边都起作用。例如，padding: 15会在水平方向总共产生30像素的内边距（左15像素，右15像素），垂直方向也是30像素（上15元素，下15像素）。
提示：图11.5.1是根据Rich Hauck的盒模型图绘制的（该图本身是根据CSS规范中的插图绘制的）。
提示：关于box-sizing: border-、通常不设置height值的原因等主题，参见11.7节。
图11.5.4：两个div的border-width（浅绿色）、padding和width值都相同。上图是以默认盒模型（如图11.5.1所示）显示的，下图则是以设置了box-sizing: border-的盒模型（如图11.5.3所示）显示的，其显示宽度与width属性值相同（都是300像素）。两个盒子都设置了height: 170（这里没有显示出来），不过第一个要更高一些，这是由于上下内边距和边框尺寸增加了显示高度（注意，黑色的横条不是这些div的一部分，因此它们不会影响div的高度）
京ICP备号-3 Copyright (C)2017 HTML5梦工场 助推 HTML5 在中国的发展200){this.value=this.value.slice(0,199)}">
首先是包装很厚实，惠人的彩色纸盒子，外面是又一层硬盒子。国美给开了发票，信任国美的信誉——保证我的机子是正品！
送的康宁锅很光润，放在炉子上烧了，很给力，22的锅号要是能大一些就好了，偏小。
机子的做工：机身特光滑——是买到的热水壶呀之类的表面不能比拟的光滑；每一个部件的边缘都很光滑，包括滤网的表面；一再的对比外表的区别，只是想确认这型号真的是原装进口的，希望我的判断标准正确。
机子运行声音很小，出汁率的情况给大家晒图对比吧：两个图中大小的苹果榨出的苹果汁和三个如图大小的芒果榨出的芒果汁，没有用过一代机所以不知道是不是出汁率更高了，但是比国产老式的强很多。 有一个问题就是榨完芒果汁后推进器的螺旋纹中夹有果肉，这个是正常的吗？谁知道？
共有10,147条评价
收货后8天评论
买家印象：
一次满意的购物
物流给力有发票
收货后5天评论
使用心得：
用户未及时评价，显示为默认评价。
收货后1天评论
使用心得：
很好 保持了果蔬的味道 很新鲜 清洗不费力
G2会员泰安市
来自国美Iphone客户端
收货后1天评论
使用心得：
非常好用 天天石榴汁
G2会员青岛市
来自国美Iphone客户端
收货后1天评论
使用心得：
收到就试了下，声音还是挺大的，另外这43转为毛感觉那么快，60转的岂不是要飞起来了！细节做工没得说，精致，洗的也没那么麻烦，即用即洗，冲冲就干净，希望能坚持用下去！
G2会员洛阳市
来自国美Iphone客户端
收货后6天评论
使用心得：
外形美观，出汁率高，清洗比转方便，6.18活动买的，性价比高
来自国美android客户端
回复 summer：
回复 您还可以输入400字
支付与账户
扫描下载客户端
本公司游戏产品适合18岁以上成年人使用&&违法和不良信息举报电话：021-&&
国美在线电子商务有限公司&&办公地址:上海市嘉定区沪宜公路号一楼A区&&客服电话:&&
(C)&&国美在线电子商务有限公司版权所有&&京公安网备62&&沪ICP备号&&沪B2-号下次自动登录
现在的位置:
& 综合 & 正文
css布局定位系列：（1）基本知识及正常流（Normal Flow）定位
英文原文地址：
翻译：，转载请注明本文英文原文出处以及本文地址。由于我英文水平有限，有不懂的地方还请阅读原文，欢迎交流！
查看 推荐.
理解怎么布局页面内容有助于我们更好的利用css布局。这篇文章给了CSS2 规范里的一些方法和规则。它同时指出了一些我们需要留神的东西。
尽管规范适用于任何网页展示设备，这篇文章只集中考虑它是怎么在浏览器里工作的。为了简单，我们忽略了许多细节。想要更精确的参考，请阅读标准文档。
记住一个特定的浏览器不支持某些特性或者不会正确执行这个特性是很重要的。同时，某些浏览器除了支持标准，它们还有会有少许的偏离，这些差异是需要我们注意的。
为了理解CSS定位，你必须首先理解盒子模型。为了显示，文档里的每一个元素被认为是一个矩形盒子，这个盒子有一个内容域，内容域被padding、border和margin包围.下面的插图展示了各个不同的部分。
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
Margin总是透明的。Border可以有不同的风格。为一个元素设置背景样式将被应用到border里的padding和内容域。为了能让你看得更清晰，上面的padding域有一个很浅的灰暗背景。
当这篇文章涉及到盒子的时候，术语"margin edge"、"border edge"(margin边、bodder边)等指的是和上面盒子相似的外边缘！
marging、border和padding都是可选的（可有可无的），为了计算位置和大小，如果没有特别说明，它们有一个默认值零。如果需要，每一条可见边都可以有不同的宽度（这里指border的四条边，因为只有border可见，译者注）。Margin甚至可以有负值！
每一个盒子的宽度和高度等于margin外沿的宽度和高度。请注意盒子的大小并不总是内容域的大小（可以是）。
一个盒子可以包含任何数目的其他盒子，新增一个具有层次的盒子和插入一个页面元素等价。浏览器窗口是所有层次的根元素。
盒子有两种基本类型：block（块级）和inline（行内，国内有时也译为内联元素，意思一样）。块级盒子由P、DIV或者TABLE等元素生成。行内盒子由B、I或者SPAN等标记以及内容文本和图片组成。
盒子的类型可以通过diplay属性改变。比如给一个行内元素设定一个block值就可以使这个元素具有块级元素的特征。注意，如果你把display的属性设为none,这个盒子是不会产生的，它不会被浏览器显示，同样的，这个盒子里的任何元素都会被浏览器忽略，不管它们是否被声明为其他的属性！
一些特殊的元素比如list和table还有其他的盒类型。然而，如果是为了定位，这些元素的其他盒类型也会当作block或者inline看待，这里就不考虑了。
对一个块级盒里的所有元素来说，这个块级盒可以看成它们的包含块。例如以下代码：
&div&This is the first sentence.&p&This is the second sentence.&/p&&/div&
这个div元素就为第一行文本和下面的P元素建立了一个包含块。P元素又为它里头的文本建立了另外一个包含块。
注意到上面例子中的第一行文本产生了一个行类盒是很有意思的，在这里认为下面的块级盒围绕在它的周围。像这样的匿名块级盒被用来简化定位处理。结果就是这样的一个块级盒将只能包含行内盒，或者只能包含块级盒，甚至有些这样的块级盒只能围绕在行内盒的周围。
包含块用来计算它里头元素盒的位置以及范围。比如，如果一个元素的样式是{width:50%}，它的宽度将被设置为包含块的一半。
对于任何一个没有绝对定位的元素，它的包含块被认为是父级块中内容边沿与它最接近的块级盒。如果不存在这样的一个父级盒，那么它的块级盒就是浏览器窗口。我们分开考虑绝对定位元素。
CSS2里有3种定位模式：normal,float和absolute。每一种类型都有自己独立的规则。每一个盒子只能使用这三种类型中的一种，不同盒子根据它们自己的定位和浮动样式设置选择不同的模型。
正常流（Normal Flow）
正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。
在这种方式里，块级盒在它们的包含块里一个一个垂直延伸，行内盒在它们的包含块里从左至右的水平排布。
你应该注意到在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！下面图示说明了这一点。
content content content content content content content content content
content content content content content content content content content content content content content content content content content content
当然，在水平方向上，块级元素的边距从来不会重叠。
如果需要，行内块是可以被折断的，当宽度受到限制的时候，它会自动移动到下一行。这可能会产生一些难看的效果如果行内块有边框的话。看下面的效果：
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
按照标准，上面两条边线的相交只应该显示三条边。没有人说标准是完美的。
(未完待续~~~~·)
【上篇】【下篇】}