成都Web前端中CSS 布局基础 - CSS 视觉格式化基础（css常规流）
概述：成都Web前端培训中一定会学习到CSS布局的一些内容， 本书主要讲解 CSS 可视化渲染的理论部分。
为什么用整本书来写可视化渲染的理论基础呢？答案是，作为一个 CSS 内包含的如此开放和强大的模型，在一本书中想要涵盖属性和效果的每一种可能的组合方式是不可能的。很明显，我们会在使用 CSS 时发现更多的新方式。
内容：
- 学习元素盒类型详情，包括 block、inline、inline-block、list-item、run-in 盒
- 改变元素生成的盒子类型，从 block 到 inline，或者从 list-item 到 inline
- 深入水平和垂直块和格式化的复杂性
- 探索行内布局的核心概念：匿名文本、em 盒、内容区、leading、行内盒 和行盒
- 理解可替换和非可替换行内元素的格式化区别。
成都Web前端培训哪里好？在探索 CSS 的课程中，你会遇到浏览器中看似奇怪的行为。在深入理解可视化渲染模型如何在 CSS 中起作用后，你才能判断一种行为是否是 CSS 定义的渲染引擎的正确结果（如果意外），或者是否是无意中发现的一个需要报告的 bug。
一、盒子基础
成都Web前端培训中，CSS 假定每个元素生成一个或者多个矩形盒，这称为元素盒（规范将来的版本可能会允许非矩形盒，并且实际上已经有三个提案，但是现在所有还是矩形）。每个元素盒的中心有一个内容区。
成都Web前端培训哪里好？
这个内容区周围有可选的 padding（内边距）、border（边框）、outline（轮廓） 和 margin（外边距）。这些区域之所以被认为是可选的，是因为它们的宽度都可以被设置为零，实际上就是将它们从元素盒中删除了。
图 1 是一个示例内容区，内容区的周围还有内边距、边框和外边距。
成都Web前端中CSS 布局基础 - CSS 视觉格式化基础
图 1. 内容区及其周边
每个外边距、边框和内边距可以用各种指定边属性设置，比如 margin-left 或 border-bottom，以及缩写属性设置，比如 padding。如果有轮廓的话，它是没有指定边属性的。内容的背景（例如颜色或者平铺图像）默认是应用在内边距以内。外边距总是透明的，从而可以看到父元素的背景。内边距的长度不能为负，但是外边距可以。在后面我们会研究负外边距的效果。
边框由已定义的样式（例如 solid 或 inset）生成，其颜色用 border-color 属性设置。如果没有设置颜色，那么边框颜色就会采用元素内容的前景色。例如，如果段落的文本是白色，那么除非作者显式声明一个不同的边框颜色，否则围绕该段落的任何边框都是白色。如果边框的样式是有缝隙的类型，那么默认可以透过这些缝隙看到元素的背景。最后，边框的宽度不能是负数。
元素盒的各个部分可能会被很多属性所影响，比如 width 或 border-right。本书将会用到很多属性，即使在这里没有定义。
快速复习
成都Web前端培训哪里好？下面我们快速复习一下将要讨论的盒子类型，以及一些重要的术语：
- 常规流（Normal flow）：在西方语言中，常规流是从左到右、从上到下渲染文本，这也是传统 HTML 文档的熟悉文本布局。要注意的是，在非西方语言中，流的方向可能会改变。大多数元素都在常规流中，要让元素脱离常规流，唯一的方式是让元素成为浮动、定位元素，或者让它进入弹性盒或者网格布局元素。记住，本章中只讨论常规流中的元素。
- 非可替换元素（Nonreplaced element）：非可替换元素是元素的内容被包含在文档内的元素。例如，段落 p 就是一个非可替换元素，因为它的文本内容是在元素本身内可以找到。
- 可替换元素（Replaced element）：可替换元素是充当某种占位符的元素。可替换元素的典型示例是 img 元素，该元素只指向一个图像文件，该文件会被插入到文档流中 img 元素所在的地方。大多数表单元素也是可替换元素（例如，<input type="radio">）。
- 根元素：根元素是文档树顶部的元素。在 HTML 文档中，根元素就是 html。在 XML 文档中，根元素可以是语言所允许的任何任务；例如，RSS 文件的根元素是 rss。
- 块盒（Block box）：块盒是段落、正文标题或者 div 等元素生成的盒子。这些盒子在常规流中时，在盒子的前后产生换行，这样常规流中的块盒就一个挨着一个垂直堆叠。任何元素都可以通过声明 display: block 生成块盒。
- 行内盒（Inline box）：行内盒是 strong 或者 span 这些元素生成的盒子。这些盒子不会在其前后产生换行。任何元素都可以通过声明为 display: inline 生成行内盒。
- 行内块盒（Inline-block box）：行内块盒是内部像块盒，但是外部像行内盒的盒子。它的作用与可替换元素相似，但是不完全相同。想像一下把一个 div 像一个行内图像一样插入一行文本中，你就会明白。
还有几个其它类型的盒子，例如 table-cell 盒，但是它们因为各种原因不会在本书中讲解 - 最主要的是它们的复杂性需要专门一本书来讲解，并且极少有开发者会实际要经常对付它们。
包含块
还有一种盒子我们需要用以小节专门来详细讲解，就是包含块（The Containing Block）。
每个元素的盒子都是相对于它的包含块来布局，换句话说，包含块是一个盒子的布局上下文。CSS 定义了判断盒子的包含块的一系列规则。为了保持专注，这里我们只讲解那些与本书所讲解的概念有关的规则。
对于一个在常规、西方语言文本流中的元素，包含块由生成列表条目或者块盒的最近的祖先的内容边缘（content edge）组成，包括所有表格相关的盒子（例如，表格单元生成的盒子）。考虑如下的标记：
<body><div><p>This is a paragraph.</p></div></body>
在这个很简单的标记中， p 元素的块盒的包含块是 div 元素的块盒，因为 div 元素的块盒是 p 元素的块盒的最近的祖先元素块盒或者列表条目盒（本例中是块盒）。同样，div 的包含块是 body 的盒子。因此，p 的布局依赖于 div 的布局，而 div 的布局又依赖于 body 元素的布局。
在此之上，body 元素的布局依赖于 html 元素的布局。html 元素生成的盒子称为初始包含块（initial containing block）。
比较独特的是，这个初始包含块的大小是由视口，而不是根元素内容的大小来决定的。对于屏幕媒介来说，视口就是浏览器窗口，对于打印媒介来说，视口就是页面的可打印区域。这是一个很细微的区别，通常不是很重要，但是它确实存在。
二、改变元素的显示方式
通过给 display 属性设置一个值，可以影响用户代理显示的方式。现在我们已经仔细观察了视觉格式化，下面我们考虑一下 display 属性，用本书早前的概念讨论几个 display 属性值。
display 可选取值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table- footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit 初始值: inline 适用于: All elements 能够继承: No 计算值: Varies for foated, positioned, and root elements (see CSS2.1, section 9.7); otherwise, as specified
这里我们忽略表格相关的值，因为它们对于本文来说太复杂；我们还会忽略 list-item，因为它与块盒很相似。我们会花了相当多的时间讨论块盒和行内盒，然后要研究 inline-block 和 run-in。不过在此之前，我们先花点时间谈谈如何通过改变元素的显示角色，来改变布局。
改变角色
格式化文档时，如果能改变一个元素生成的盒子的类型，显然是很方便的。例如，假设在 nav 元素中有一系列链接，我们要让它作为垂直侧边栏布局：
<nav><a href="index.html">WidgetCo Home</a><a href="products.html">Products</a><a href="services.html">Services</a><a href="fun.html">Widgety Fun!</a><a href="support.html">Support</a><a href="about.html" id="current">About Us</a><a href="contact.html">Contact</a></nav>
我们可以把所有这些链接都放进表格单元中，或者把每个链接都包在自己的 nav 中，或者我们可以像这样，让这些链接都变成块级元素：
nav a {display: block;}
这段代码会让导航 nav 内的每个 a 元素都成为块级元素。如果再多添加点样式，可以得到如图 2 所示的结果：
成都Web前端中CSS 布局基础 - CSS 视觉格式化基础
图 2. 将显示角色从 inline 变为 block
成都Web前端培训哪里好？如果我们想让不支持 CSS 的浏览器有行内元素的导航链接，但是让这些链接像块级元素一样布局，那么改变显示角色就很有用。链接变成块后，我们可以像对 div 或 p 元素一样对它们添加样式，好处是整个元素盒都成了链接的一部分，这样如果鼠标指针停留在元素盒中的任何地方，用户都可以点击链接。
我们可能还想让元素变成行内元素。假如有如下的姓名无序列表：
<ul id="rollcall"><li>Bob C.</li><li>Marcio G.</li><li>Eric M.</li><li>Kat M.</li><li>Tristan N.</li><li>Arun R.</li><li>Doron R.</li><li>Susie W.</li></ul>
成都Web前端培训哪里好？
对于以上标记，假如我们想姓名变成一连串行内的姓名，每个姓名之间有竖线（并且列表的两头也有竖线）。要这样做的唯一方法是改变它们的显示角色。如下的规则有图 3 所示的效果：
#rollcall li {display: inline;border-right: 1px solid;padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}
成都Web前端中CSS 布局基础 - CSS 视觉格式化基础
图 3. 显示角色从 list-item 变为 inline
还有很多其它方法可以在设计中充分利用 display。要有创意，看看你能发明什么！
但是，必须指出的是，改变元素的显示角色，并不会改变其本质。换句话说，让一个段落生成一个行内盒，并不会让这个段落转变为行内元素。例如，在 XHTML 中，有些元素是块级元素，有些是行内元素。（还有些是 'flow' 元素，不过我们暂且忽略）。行内元素可以是块元素的后代，但是反之则不对。因此，span 可以放在 p 内，但是 span 内不能包含有 p。不管如何给元素添加样式，都是如此。考虑如下标记：
<span style="display: block;"><p style="display: inline;">this is wrong!</p></span>
这个标记是无效的，因为块元素（p）嵌入在行内元素（span）中。显示角色的改变与也不能改变这个事实。display 之所以得名，是因为它影响元素如何显示，而不是因为它改变了元素的类型。
说了这么多，下面我们详细研究不同类型的盒：块盒、行内盒、inline-block 盒、list-item 盒和 run-in 盒。
三、块盒
成都Web前端培训哪里好？块盒的表现有时候可以预测，有时候又很让人吃惊。例如，盒子位置沿着水平和垂直轴的处理可能是不同的。为了彻底理解块盒是如何被处理的，你必须清晰地理解一些边界与区域。它们在图4 中被详细展示。
成都Web前端中CSS 布局基础 - CSS 视觉格式化基础