CSS学习5（视觉表现模型）
假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区(content area)。这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，是因为它们的宽度可以设置为0，实际上这就从元素框去除了这些项。
可以用多种属性设置各外边距、边框和内边距，如margin-left或border-bottom。内容的背景(例如某种颜色或平铺图像)也会应用到内边距。外边距通常是透明的，从中可以看到父元素的背景。内边距不能是负值，但是外边距可以。
每个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文。
对于正常的西方语言文本流中的一个元素，包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界(content edge)构成。
这是指西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本布局，注意，在非西方语言中，流方向可能不同。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素。这里我们谈论的都是在正常流中的元素。
这是指段落、标题或div之类的元素。这些元素在正常流中时，会在其框之前和之后生成&换行&，所以处于正常流中的块级元素会垂直摆放。通过声明display:block，可以让元素生成块级框。
这是指strong或span之类的元素，这些元素不会在之前或之后生成&行分隔符&，它们是块级元素的后代。通过声明display:inline。可以让元素生成一个行内框。
水平格式化
控制盒模型水平方向的有7个值：margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。
这7个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的父元素的width值。
在这7个属性中有3个可以设置为auto：margin-left、width、margin-right。其余的要不必须是确定的值，要不就是默认值0。
有这么几种情况：
3个都不是auto：按CSS的术语来讲，这些格式化属性过分受限，此时总会把margin-right强制为auto来适应父元素的宽度。 2个不是auto：这个最简单，剩下的一个是auto的将自动调整到适应父级元素的宽度。 两个外边距是auto：他们会自动设置为相等的长度，导致此元素在其父级元素中居中。 一个外边距和width是auto：auto的外边距会减为0，width自动填充。 3个都是auto：两个外边距减为0，width自动充满。
注意：由于水平外边距不会合并，父元素的内边距、边距和外边距可能影响其子元素。
这个是允许的，也只有它是允许为负值的，这个还有好多用处呢。
百分数也是可以的，当然还是要遵守加起来为父元素宽度的限制，这里为内外边距，宽度设置的百分比都是相对父元素来说的。边框不能是百分数。
刚才说的是非替换块级元素的水平格式化，替换块级元素其他的规则都一样，只有一个例外，当width为auto 时，元素宽度为内容的固有宽度。
垂直格式化
一个元素的默认高度由其内容确定，可以对任何块级元素设置显式高度。如果内容撑不下，根据元素的overflow属性用户代理会做出选择。
也是有7个：margin-top、border-top、padding-top、height、 padding-bottom、border-bottom和margin-bottom。
同样，这7个值的和必须等于其包含块的height。
同样有3个值可以是auto，其他的不行。不过上下外边距设置为auto也没有什么用，因为会被重置为0。
百分数高度
父元素的高度如果没有显式声明，那子元素的高度设置为百分数也会被重置为auto。
利用上下外边距auto垂直居中显然是不可能的。
auto高度的问题
如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界
之间的距离。因此，子元素的外边距会&超出&包含这些子元素的元素（由于垂直合并外边距）。
不过，如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。
合并垂直外边距
垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并行为只应用于外边距。如果元素有内边距和边框，它们的垂直外边距绝对不会合并。
这个在垂直方向上也是允许的，重叠的时候，如果垂直外边距都设置为负值，会取两个外边距绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。
除了块级元素，最常见的就是行内元素了。通过为行内元素设置框属性，可以进入到一个更有意思的领域。非替换元素和替换元素在内联内容方面的处理稍有不同，讨论行内元素的构造时我们将分别进行讨论。
匿名文本（anonymous text）是指所有未包含在行内元素中的字符串。因此，在标记(p) I&m (em)so(/em) happy!(/p)中，序列&I&m&和 &happy!&都是匿名文本。注意，空格也是匿名文本的一部分，因为空格与其他字符一样都是正常的字符。
em框在字体中定义，也称为字符框（character box）。实际的字形可能比其em框更高或更矮。在CSS 中，font-size的值确定了各个em框的高度。
在非替换元素中，内容区可能有两种，CSS2.1规范允许用户代理选择其中任意一种。内容区可以是元素中各字符的em框串在一 起构成的框，也可以是由元素中字符字形描述的框。
在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。
行间距（leading）是font-size值和line-height值之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部。行间距只应用于非替换元素。
这个框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。
这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。
还有几点要格外注意：
内容区类似于一个块级元素的内容框。 行内元素的背景应用于内容区及所有内边距。 行内元素的边框要包围内容区及所有内边距和边框。 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果，也就是说，它们不会影响元素行内框的高度（也不会影响包含该元素的行框的高度）。 替换元素的外边距和边框确实会影响该元素行内框的高度，相应地，也可能影响包含该元素的行框的高度。 line-height实际上只影响行内元素和其他行内内容，而不影响块级元素，至少不会直接影响块级元素。也可以为一个块级元素设置line-height值，但是这个值只是应用到块级元素的内联内容时才会有视觉影响。
对于一个行框，其高度确定的基本步骤如下：
按以下步骤确定行中各元素行内框的高度： 得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值，再将line-height减去font-size，这就 得到了框的行间距。这个行间距除以2，将其一半分别应用到em框的顶部和底部。 得到各替换元素的height、margin-top、margin-bottom, padding-top、 padding-bottom, border-top-width和border-bottomwidth值，把它们加在一起。 对于各内容区，确定它在整行基线的上方和下方分别超出多少。这个任务并不容易：你必须知道各元素及匿名文本各部分的基线的位置， 还要知道该行本身基线的位置，然后把它们对齐。另外，对于替换元素，要将其底边放在整行的基线上。 对于指定了vertical-align值的元素，确定其垂直偏移量。由此可知该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下 方超出的距离。 既然已经知道了所有行内框会放在哪里，再来计算最后的行框高度。为此，只需将基线与最高行内框顶端之间的距离加上基线与最低行内 框底端之间的距离。
行内非替换元素
我们来看看如果行中只包含非替换元素（或匿名文本）将如何构造。
首先，对于行内非替换元素或匿名文本某一部分，font-size值确定了内容区的高度。如果一个行内元素font-size为15px，则内容区的高度为 15像素，因为元素中所有em框的高度都是15像素。
下面再来考虑元素的line-height值，以及它与font-size值之差。如果一个行内非替换元素的font-size为15px，line-height为21px，则相差6 像素。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就得到了行内框。
假如，font-size为24px，line-height为12px。line-height和font-size之差是-12px，将其除2来确定半间距（-6px），再把这个半间距分别增加到内容区的顶部和底部，就得到了行内框。由于这里增加的都是负数，所以最后行内框高度为12像素。12像素高的行内框在元素内容区（24像素高）中垂直居中，所以行内框实际上小于内容区。 那么行框也就可能小于内容区了，那就意味着内容会重叠到相邻行。
vertical-align各个关键字值的效果描述如下：
top：将元素行内框的顶端与包含该元素的行框的顶端对齐。 bottom：将元素行内框的底端与包含该元素的行框的底端对齐。 text-top：将元素行内框的顶端与父元素内容区的顶端对齐。 text-bottom：将元素行内框的底端与父元素内容区的底端对齐。 middle：将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。 super：将元素的内容区和行内框上移。上移的距离未指定，可能因用户代理的不同而不同。 sub：与super相同，只不过元素会下移而不是上移。 percentage：将元素上移或下移一定距离。这个距离由相对于元素line-height值指定的一个百分数确定。
管理line-height
在前几节中我们已经了解到，改变一个行内元素的line-height可能导致文本行相互重叠。不过，在所有情况下，这种修改都是针对单个元素的，所以，如何以一种更一般的方式影响元素的line-height而避免内容重叠呢?
一种方法是对font-size有改变的元素结合使用em单位。
Not only does this paragraph have &normal& text, but it also
contains a line in which some big text
This large text helps illustrate our point.
p { font-size: 14 line-height: 1 } p span { font-size: 250%; line-height: 1 }
或者使用line-height数值值会被直接继承而不是计算继承的特性。
p {fpnt-size: 14 line-height: 1;}
p span ｛font-size: 250%;｝
基线与行高
各行框的具体高度取决于其组成元素相互之间如何对齐。这种对齐往往很大程度上依赖于基线落在各元素（或匿名文本各部分）中的哪个位置，因为这个位置确定了其行内框如何摆放。基线在各em框中的位置对于不同的字体是不同的。这个信息内里在字体文件中，除非直接编辑字体文件，否则无法修改。
设置line-height的最好办法是使用一个原始数字值。之所以说这种方法最好，是因为这个数会成为缩放因子，而该因子是一个继承值而非计算值。假设你希望一个文档中所有元素的line-height都是其font-size的1.5倍，可以如下声明：
body {line-height: 1.5;}
缩放因子1.5在元素间逐层传递，在各层上，这个因子都作为一个乘数与各元素的font-size相乘。
增加框属性
内边距，外边距和边框都可以应用于行内非替换元素，行内元素的这些方面根本不会影响行框的高度。
对于边框来说：
行内元素的边框边界由font-size而不是line-height控制。换句话说，如果一个span元素的font-size为12px，line-height为36px，其内容区就是12px高，边框将包围该内容区。
对于内边距来说：
左右内边距是有作用的。
上下内边距是会影响到元素行内框的高度，如果有边框的话会看到边框外扩了，有背景的话背景也会变大。但是行框的高度是不会改变的，行间距自然也不变。
对于外边距来说：
左右外边距是有作用的。
上下外边距根本不会应用别想了。
要注意的是：
尽管内边距和外边距(以及边框)不影响行高，但是它们确实能影响一个元素内容的布局，可能将文本推离其左右两端。实际上,如果左、右外边距为负，可能会把文本拉近行内元素，甚至导致重叠。上下内边距过大的话背景和边框会扩到另一行。
这个例子可以试试：
Not only does this paragraph have &normal& text, but it also
contains a line in which some big text is found. This
large text helps illustrate our point.
span{ border:1 line-height:1; padding:4 margin:4 background-color: rgba(255,1,1,0.5); }
行内替换元素
一般认为行内替换元素（如图像）有固有的高度和宽度。有固有高度的替换元素可能导致行框比正常要高。这不会改变行中任何元素的line-height值，包括替换元素本身。相反，只是会让行框的高度恰好能包含替换元素（以及所有框属性）。换句话说，会用替换元素整体（包括内容、外边距、边距和内边距）来定义元素的行内框。
Not only does this paragraph have &normal& text, but it also
contains a line in which is found.
large text helps illustrate our point.
p { font-size: 15 line-height: 18 } p img { height: 30 margin: 0; padding: 0; border: }
这个例子里line-height是18px，img的height是30px。所以img的行内框是30px。行框的高度也因此被撑高了。尽管是这样，但不论是段落还是图像本身的line-height的有效值并没有因此改变。line-height对图像的行内框没有任何影响。
然而行内替换元素还是需要line-height来作为一个垂直对齐时的基准。vertical-align的百分数值要相对于元素的line-height来计算。
vertical-align: 50%;
比如刚才的例子再加一个这个，那img就会往上升18*50%px。
还有就是替换元素会继承这个line-height，它本身或它的后代有可能会用到这个值。
增加框属性
在行内替换元素上应用框属性是确实会影响到行框的高度的。因为不同于行内非替换元素，它们会作为替换元素行内框的一部分。
甚至是外边距都会被包含在元素的行内框中，负的外边距也有用哦，会减少替换元素的行内框。
替换元素和基线
默认地，行内替换元素位于基线上，如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素并没有自己的基线，所以相对来讲最好的办法是将其行内框的底端与基线对齐。因此，实际上是下外边距边界与基线对齐。
改变元素显示
比如将a标签改为块显示，将li改为行内显示等，使用display属性，我们可以将元素的显示角色改变。不过要注意的是，你改变的只是元素的显示角色，而不是其本质。换句话说，让一个段落生成行内框并不会把这个段落真正变成一个行内元素。因此，尽管链接可以放在一个段落中，但是链接却不建议包围段落。
行内块元素
看上去display:inline-block是一个混合产物，实际上也确实如此。
行内块元素作为一个行内框与其他元素和内容相关。换句话说，它就像图像一样放在一个文本行中，实际上，行内块元素会作为替换元素放在行中。这说明，行内块元素的底端默认地位于文本行的基线上，而且内部没有行分隔符。在行内块元素内部，会像块级元素一样设置内容的格式。就像所有块级或行内替换元素一样，行内块元素也有属性width和height，如果比周围内容高，这些属性会使行高增加。下面的例子可以用作对比：
This text is the content of a block-level level element. Within this block-level element is another block-level element.
Look, it's a block-level paragraph.
Here's the rest of the DIV, which is still block-level.
This text is the content of a block-level level element. Within this block-level element is an inline element.
Look, it's an inline paragraph.
Here's the rest of the DIV, which is still block-level.
This text is the content of a block-level level element. Within this block-level element is an inline-block element.
Look, it's an inline block paragraph.
Here's the rest of the DIV, which is still block-level.
div { margin: 1em 0; border: 1 } p { border: 1 } div:nth-child(1) p { display: width: 6 text-align: } div:nth-child(2) p { display: width: 6 text-align:} div:nth-child(3) p { display: inline- width: 6 text-align: }
有时行内块元素很有用，例如：如果有5个超链接，你希望它们在一个工具条中宽度相等。为了让它们分别占其父元素宽度的20%，但是仍保持其为行内元素，可以声明如下：
#navbar a {display: inline- width: 20%;}
display也是有计算值哒，如果元素是浮动元素或定位元素，display的计算值可以改变。如果为一个根元素声明display值，计算值也可以改变。实际上，display、
position和float值会以很有意思的方式相互影响。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC - 推酷
想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型
页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。
哪些因素控制了这些布局
盒的尺寸和类型
定位体系 Positioning Scheme （常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）
下文讲针对性的解释这些影响布局的因素，先来解释些概念~
css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区，内容区外周围包括了padding，border，margin，盒模型就是用来处理这些内容的一个模型
每个元素都是相对于包含块摆放，包含块就是一个元素的“布局上下文”,
&div&&p&p的包含块是div&/p&&div&
//div的包含块是body
替换/非替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
通过 CSS content 属性来插入的对象 被称作&匿名可替换元素
如果元素的内容包含在文档之中，则为非替换元素
非替换元素的所有规则同样适用于替换元素，只有一个例外，width如果是auto,元素的高宽就是内容的固有高宽，比如img就是图片的原始大
例如浏览器会根据 &img& 标签的 src 属性的值来读取图片信息并显示出来，查看HTML代码，则看不到图片的实际内容； &input& 标签的 type 属性来决定是显示输入框，还是单选按钮等。HTML中的 &img&、&input&、&textarea&、&select&、&object& 都是替换元素。
这些元素往往没有实际的内容，即是一个空元素,例如：
&img src=”cat.jpg” /&
&input type=&submit& name=&Submit& value=&提交& /&
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
CSS Box(盒模型/框模型)
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
(图自《css权威指南》)
display ： block 、 list-item 以及 table 会让一个元素成为块级元素。
正常流中，包含块的宽度 = 其父元素的width = margin + padding+ border+自身width
在Block Box中，会被水平格式化，垂直格式化
每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。
&div style=&width:100height:10px&&&/div&
//这个div调整line-height不会发生变化，因为里面没有文字
&span style=&line-height:10border：1px solid green&&&/span&
//span的高度会随着line-height的变化而变化
inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
觉得这篇写多了，这块的详细理解放到下篇吧&(￣3￣)&
Formatting context
每个元素，或者说每个Box会根据设置的display值，去选择渲染它的方式，不同的display有不同层级：block-level box（块级）inline-level box(行级)，run-in box(插入型框 css3)，不同的层级会参与不同的环境（formatting context）去渲染
上文提到的环境就是这个Formatting context（格式化上下文），他是一个有渲染规则的渲染区域，不同的层级有不同的渲染规则，比如BFC和IFC
块级格式化上下文，Block formatting context(简称BFC)，规定了块级盒子的渲染布局方式，他在计算盒子高度，margin值计算等地方有区别于其他环境。
BFC有什么特点
内部盒子会在垂直方向排列
同一个BFC中的元素可能会发生margin collapse；
BFC就是页面上的一个隔离的独立容器，里外互相不影响
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上
什么元素会触发产生一个新的BFC
根元素 &html&
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
再认真理解下这张图
html{background-color: #009a61}
width: 100%;
height: 80
background-color: #f3f3f3;
margin-bottom: 30
width: 100%;
background-color: #f3f3f3;
margin-bottom: 80
width: 80%;
height: 80
background-color: #333333;
margin-top: 80
width: 100%;
background-color: #f3f3f3;
&div class=&a&&&/div&
&div class=&b&&
&div class=&c&& &/div&
&div class=&d&&
&div class=&c&&&/div&
我们可以用BFC来干嘛
阻止边距折叠
用于布局，什么两栏自适应高度之类的
IE6-7不支持BFC，而是使用私有属性hasLayout。表现上来看hasLayout和BFC相似，触发hasLayout条件与BFC相似，另外需要为元素设置IE特有的CSS属性zoom:1; zoom用于设置或检索元素的缩放比例，值为1即使用元素实际尺寸，使用zoom既可以触发hasLayout又不会对元素产生其他影响，相对来说更加方便
CSS定位方案
css布局宏观上来说是受定位方案影响，定位方案包括普通流，浮动，定位
元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述
只要不是float和绝对定位方式布局的，都在普通流里面。
浮动框不在文档的普通流中，浮动的流会漂浮在普通的流上面。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置
绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。
固定定位，相对于浏览器窗口定位，脱离普通流，不占据空间 剩下的下篇见！！！(*￣3￣)╭
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致CSS代码编写中视觉格式化模型的学习教程
作者：佚名
字体：[ ] 来源：MDN 时间：03-01 10:48:02
这篇文章主要介绍了CSS代码编写中视觉格式化模型的概念总结,包括相关各种盒模型和定位的用法讲解,需要的朋友可以参考下
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。每个盒的布局由如下内容组成：
（1）盒尺寸：明确指定，受限或没有指定（2）盒类型：行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒；（3）定位方案(positioning scheme): 常规流，浮动或绝对定位；（4）树中的其它元素: 它的子代与同代；（5）视口(viewport) 尺寸与位置；（6）内含图片的固定尺寸；（7）其它信息。一个盒相对于它的包含块(containing block) 的边界来渲染。通常盒为它的后代元素建立包含块。注意盒并不受它的包含块的限制，当它的布局跑到包含块的外面时称为溢出(overflow)。
视口 Viewport在连续媒介上工作的用户代理通常会向用户提供一个视口（屏幕上的一个窗口或其它可视区域），用户可以通过它来访问文档。用户代理可以在视口被调整大小时改变文档的布局（详见初始包含块）。
如果视口小于渲染文档的画布区域，用户代理应当提供一个滚动机制。每个画布最多可拥有一个视口，但用户代理可以把文档渲染至多个画布上（即为相同文档提供不同的视图）。
包含块 Containing blocks在CSS 2.1中，许多框的位置和大小都根据一个名为包含块的矩形框边缘来相对计算得到。为元素生成的框通常会充当其后裔框的包含块；我们称框为其后裔&创建&（establishes）了包含块。&框的包含块&表示&框所处的包含块&，而不是其产生的包含块。
每个框会被给予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能会溢出。
盒的生成(Box generation) CSS 视觉格式化模型的一部分工作是从文档元素生成盒。生成的盒拥有不同类型，并对视觉格式化模型的处理产生影响。生成盒的类型取决于 CSS 属性 display
块级元素与块盒(Block-level elements and block boxes)
当元素的 CSS 属性& display 为 block, list-item 或 table 时，它是块级元素 block-level 。块级元素（比如&p&)视觉上呈现为块，竖直排列。
块级盒参与(块格式化上下文 block formatting context)。每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。一些元素，比如&li&，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。
主要块级盒将包含后代元素生成的盒以及生成的内容。它也是可以使用(定位方案 positioning scheme)的盒。
venn_blocks.png一个块级盒可能也是一个块容器盒。块容器盒(block container box) 只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，由此只包含行内盒。注意块级盒与块容器盒概念不同。 前者描述元素跟它的父元素与兄弟元素之间的表现，后者描述元素跟它的后代之间的影响。有些块级盒，比如表格，不是块容器盒。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。
同时是块容器盒的块级盒称为块盒(block boxes)。
匿名块盒(Anonymous block boxes)
有时需要添加补充性盒，这些盒称为匿名盒(anonymous boxes),& 它们没有名字，不能被 CSS 选择符选中。
不能被 CSS 选择符选中意味着不能用样式表添加样式。这意味着所有继承的 CSS 属性值为 inherit ，所有非继承的 CSS 属性值为 initial 。
块容器盒要么只包含行内级盒，要么只包含块级盒。但通常文档会同时包含两者。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。
拿下面的 HTML 代码来说 ( &div& 与 &p& 使用默认属性 display:block )
Some&inline&text&followed&by&a&paragraph&followed&by&more&inline&text.&&
将创建两个匿名块盒，一个包含 &p& 前面的文本 (Some inline text)， 一个包含 &p& 后面的文本(followed by more inline text),& 结构如下:
代码如下:Some inline textfollowed by a paragraphfollowed by more inline text.和 &p& 元素不同, 开发者不能控制这两个匿名盒。对于可继承属性， 它们将取 &div& 的属性值, 比如 color。对于非继承属性，值为初始值 ，比如没有指定 background-color, 值为初始值即 transparent，于是 &div& 背景可见。而 &p& 可以指定 background-color 。类似的，这两个匿名盒文本是一样的颜色。另一种将创建匿名块盒的情况是，一个行内盒包含了一个或几个块盒。在这种情况下，包含块盒的盒将拆分为两个行内盒放置于块盒前后，然后分别由两个匿名块盒包含。这样块盒就与两个包含行内元素的匿名块盒形成了兄弟关系。
如果行内盒包含多个块盒，并且这些块盒之间没有夹杂内容，将在这些块盒前后创建匿名块盒。
行内级元素与行内盒(Inline-level elements and inline boxes)
当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片，都是行内级元素。行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。所有display:inline 的非替换元素生成的盒是行内盒。而不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素生成，不能拆分成多个盒。
注意：起初原子行内级盒(atomic inline-level boxes)被称为原子行内盒(atomic inline boxes)。很不幸，它们并非行内盒。规范的勘误表修正了这个错误。 不管怎样，当再看到原子行内盒时可以放心的当成原子行内级盒，因为只是改了名字。原子行内盒在行内格式化上下文里不能分成多行。
&style& &&
&&span&{ &&
&&&&display:inline;&&&
&/style& &&
&div&style=&width:20&& &&
&&&span&里的文本&&span&可以 &&
&&&分成多行因为&/span&它是个行内盒。 &&
代码如下:span 里的文本可以分成多行因为它是个行内盒。
&style& &&
&&span&{ &&
&&&&display:inline-block; &&
&/style& &&
&div&style=&width:20&& &&
&&&span&里的文本&&span&不能分成多行 &&
&&&因为它&/span&&是个行内块盒。 &&
代码如下:span 里的文本 不能分成多行因为它是个行内块盒。匿名行内盒(Anonymous inline boxes)
类似于块盒，CSS 引擎有时自动生成行内盒。这些盒也是匿名的，因为它们没有对应的选择器名字。它们继承所有可继承的属性，非继承的属性取 initial。
匿名行内盒最常见的例子是块盒直接包含文本，文本将包含在匿名行内盒中。空白如果使用white-space 去掉，则不会生成匿名行内盒。
行盒(Line boxes)
行盒由行内格式化上下文(inline formatting context)产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。 当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。
行盒是技术上的实现，开发者通常不用操心它。
插入盒(Run-in boxes)
插入盒，由& display:run-in 定义，由后续盒的类型决定是块盒还是行盒。可以用来在第一个段落中插入标题。
Note: 插入盒(Run-in boxes)从 CSS 2.1 标准中移除了，因为可操作的实现定义不足。 可能 CSS3 会引入，但是这是实验性质，不能用于生产环境。
除了行内及块格式化上下文， CSS 允许元素有更多的内容模型。这些增加的模型是为了描述特定的布局，可能会定义新的盒类型:
（1）表格内容模型(table content model)可以创建一个表格包装盒(table wrapper box)及表格盒(table box), 也可以创建特殊盒，比如标题盒(caption boxes)。（2）多列内容模型(multi-column content model)可以在容器盒与内容之间创建列盒(column boxes)。（3）实验性的栅格，弹性盒内容模型也创建新的盒类型。（4）定位方案(Positioning schemes)EDIT
一旦盒生成了， CSS 引擎要指定它们的位置。会用到下列之一的方案：
（1）常规流(normal flow)盒一个接一个排列。（2）浮动(floats)方案将盒从常规流里提出来，放在当前盒的旁边。（3）绝对定位(absolute positioning)中的盒坐标是绝对的。绝对定位元素可以盖住使用其它定位方案的元素。
常规流(Normal flow)
在常规流中，盒一个接着一个排列。在块级格式化上下文里面， 它们竖着排列；在行内格式化上下文里面， 它们横着排列。 当 position 为 static 或 relative，并且 float 为 none 时会触发常规流。
（1）在块级格式化上下文里面，常规流竖着排列。（2）行内格式化上下文里面，常规流横着排列。
常规流分为两种情况：（1）对于静态定位(static positioning),position 值 为 static ,盒的位置是常规流布局里的位置。（2）对于相对定位(relative positioning),position 值 为 relative, 盒偏移位置由这些属性定义 top, bottom, left and right 。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。
浮动(Floats)对于浮动定位方案(float positioning scheme), 盒称为浮动盒(floating boxes)。它位于当前行的开头或末尾。这导致常规流环绕在它的周边，除非设置 clear 属性。
要使用浮动定位方案，元素 CSS 属性 position 为 static 或 relative，然后& float 不为 none 。如果 float 设为 left, 浮动由行盒的开头开始定位。如果设为 right, 浮动定位在行盒的末尾。
绝对定位(Absolute positioning)
对于绝对定位方案， 盒从常规流中被移除，不影响常规流的布局。 它的定位相对于它的包含块，相关CSS属性： top, bottom, left 及 right 。
如果元素的属性position为 absolute 或 fixed， 它是绝对定位元素。
固定定位元素(fixed positioned element)也是绝对定位元素，它的包含块是视口。当页面滚动时它固定在屏幕上，因为视口没有移动。
大家感兴趣的内容
12345678910
最近更新的内容}