版权归作者所有，转载请注明出处
成都Web前端培训：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 元素的块盒的最近的祖先元素块盒或者列表条目盒（本例中是块盒）。
成都Web前端培训：CSS盒模型同样，div 的包含块是 body 的盒子。因此，p 的布局依赖于 div 的布局，而 div 的布局又依赖于 body 元素的布局。
在此之上，body 元素的布局依赖于 html 元素的布局。html 元素生成的盒子称为初始包含块（initial containing block）。
比较独特的是，这个初始包含块的大小是由视口，而不是根元素内容的大小来决定的。
对于屏幕媒介来说，视口就是浏览器窗口，对于打印媒介来说，视口就是页面的可打印区域。
这是一个很细微的区别，通常不是很重要，但是它确实存在。
