元素不在普通文档流
尽管对于CSS来说，布局无疑是最棘手的事情之一，但是毫无疑问，布局是最重要的东西之一。 在此快速提示中，我们将研究“普通文档流”及其如何帮助您进行布局。
介绍
在解释正常文档流的含义之前，我必须先解释不同类型的html元素，以及它们如何默认显示。
我们将专注于HTML元素的两种主要类型，即“块级”和“内联”元素。 自HTML5问世以来，尽管浏览器仍然有效地依赖于块和内联定义，但我们具有更具体的元素分类（ phrasing ， flow和sectioning ）。
内联元素包括诸如锚标签，图像和跨度之类的项目。 这些元素通常定义文本和数据，例如将单词Click Here变成链接。 默认情况下，内联元素显示...好吧，内联。 这意味着您可以在一行中包含多个元素，直到达到包含元素的宽度为止，然后它们会继续到下一行。
<p><strong>This is an example of several inline elements</strong> all contained within a paragraph <a href="#">including an anchor</a> <span>a span</span> <em>and an emphasis tag.</em> <code>Resize the browser and you'll see how a browser handles these inline elements by default.</code> <abbr>That's right, everything displays on one line and wraps when there's no more room.</abbr></p>观看此内联元素演示 。
但是，默认情况下，块级元素（例如div和段落）以及较新HTML5成员（例如article和section ）具有非常不同的属性。 块级元素通常但并非总是包含内联元素或其他块级元素。 将它们视为两者的“结构”元素。
浏览器将（默认）格式化块级元素，并在换行符前后添加换行符。 换句话说，除非另外设置样式，否则块级元素将始终从新行开始（像块一样堆积）。
造型
在所有情况下，我们都可以使用CSS display属性更改元素的显示方式：
element {
display: block; /*or inline, for example*/
}这些显示特征还决定了我们还可以样式化。 例如，我们可以自由确定块级元素的宽度和高度，而内联元素则不能。 填充和边距可以应用于内联元素，但它们不会影响包含元素的尺寸。 看一下这个例子 ，看看我的意思：
其他
除了公共的块和行内显示属性外，还有一些较少见的示例。 例如，如果要内联显示元素，但将其设置为块级元素样式该怎么办？ 输入inline-block值。 内嵌块元素在应用于块级元素时会保留诸如宽度，高度，边距和填充之类的属性，同时保持内嵌元素的结构质量。
内联块是浮动元素的潜在替代品，但在这些情况下当然并非没有问题 。
另一个未得到很好使用的显示值是list-item ，它的功能与锡上的含义完全相同。 正如您在列表中所期望的那样，每个应用了list-item值的元素都是垂直显示的，但是它们旁边也有项目符号。 这对于列出数据（即名称列表）很有用，并且在逻辑上列出诸如此类的项目：
<ul>
<li>Charles Mahogany Biggins</li>
<li>Tiggy Wiggins Hydrangea</li>
<li>Foxy Bumpkins Numpty</li>
</ul>默认情况下显示。
最后，最后一个值得一提的显示值是“无”。 你能猜出它做什么吗？ 没错，任何将其display属性设置为“ none”的元素都不会显示在页面上； 从视觉上（连同其中包含的所有元素）将其从文档中删除。 该元素的标记仍会发送到浏览器，但不会生成框，并且不会显示在屏幕上-屏幕阅读器也不会将其选中。 它不占用任何空间，因此其他元素可以代替它。
那么什么是普通文档流？
当您对结构样式不进行任何操作时，页面就是这样呈现的。
考虑到上述情况，“正常文档流”到底是什么？ 当您对结构样式不进行任何操作时，页面就是这样呈现的。 浏览器按照遇到的顺序显示内容。 首先是热门内容，而内容则要低下。
当人们第一次开始网页设计时，他们常常渴望解决各种花哨的技巧，而无需学习基础知识和基础知识。 如果您能理解“普通文档流”，那么您的网页设计会更好。
练习：标记
让我们开始使用非常基本CSS制作一个简单的照相馆。 我很快制作了一个html文件来使我们入门，毕竟我们主要集中在样式上。 将下面的代码复制到您的文本编辑器中，我将解释其中的内容。
<!doctype html>
<html lang="en">
<head>
<title>Normal Document Flow</title>
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>An Intro to Normal Document Flow.</h1>
<figure class="photoGallery">
<img src="http://placekitten.com/g/100/200" alt="" />
<img src="http://placekitten.com/g/160/200" alt="" />
<img src="http://placekitten.com/g/220/200" alt="" />
<img src="http://placekitten.com/g/180/200" alt="" />
<img src="http://placekitten.com/g/240/200" alt="" />
<img src="http://placekitten.com/g/130/200" alt="" />
</figure>
<article>
<h2> Welcome to my Photo Gallery!</h2>
<p>I am the man with no name, Zapp Brannigan! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket. Hey, guess what you're accessories to. Leela, Bender, we're going grave robbing. Also Zoidberg. Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you.</p>
<p>Can I use the gun? Oh no! The professor will hit me! But if Zoidberg 'fixes' it… then perhaps gifts! Fry! Quit doing the right thing, you jerk! Who's brave enough to fly into something we all keep calling a death sphere? I haven't felt much of anything since my guinea pig died.</p>
</article>
</div>
<footer>
</footer>
</body>
</html>顶部有一个空的css块。 这是我们开始进行样式设计的地方。 下面是指向HTML5 Shiv脚本的条件链接，该链接将帮助Internet Explorer识别并正确显示HTML5元素。 在此之下，为必填标记。 在body标签内是整个页面的容器，也是照片库的容器。 我已经使用placekitten来获取占位符图像，并使用Fillerama来填充文本。 就是这样。
好的，现在为了演示普通文档流程的工作原理，请看一下您刚刚制作的页面 。 就像您期望的那样吗？ 图像以一行显示，直到父元素的宽度为止，在这种情况下，该图（设置为视口的100％，但默认情况下可能有一些边距）被填充。 而且，尽管您还看不到它，但是所有块级元素（例如div，图和文章）都位于各自的行上。
这是正常的文档流程。 现在，只需调整浏览器的大小一秒钟。 是的，很流畅！ 嗯，就我们所了解的而言，可能并不完全流畅-图像保留其尺寸，而与视口无关。 不过，默认情况下，您的布局始终会保持流畅。
练习：基本CSS
只是为了证明我对块级元素没有兴趣，让我们为它们添加一些背景色。 在HTML文件顶部CSS代码块中，添加以下代码：
.container {
background: #f2f2f2;
}
article {
background: #8B0000;
}现在，在添加一些背景色之后， 检查结果 。 关于块级元素的显示方式应该很明显。
练习：布局CSS
下面的样式仅包含来自box-model的 CSS属性（宽度，边距，内边距等），但是它显示了几乎没有CSS可以创建实体布局。
为此，请替换现有CSS：
.container {
width: 65%;
margin:0 auto;
background: #f2f2f2;
}
figure img {
padding-left: 10px;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #8B0000;
padding-left: 10px;
}
article {
background: #8B0000;
color: #f2f2f2;
padding: 10px;
} 在此CSS中，我们已将容器的宽度指定为65％。 我们也可以使用固定的像素值，但是百分比保留了文档的流畅性并更有效地演示了文档流。 我们还使用margin: 0 auto将页面居中。
其余全部与美学有关。 我已经添加了一些填充，以便为所有内容提供喘息的空间，并指定了字体和字体颜色。
保存该文档并在浏览器中查看 。
每当我在处理项目时，我总是会考虑其在“普通文档流”中的外观。 这使我思考如何用尽可能少CSS改进它。
结论
使用我们今天学到的原理，尝试构建自己的示例。 您会发现（在结构上）在了解浮动和定位技术之前可以取得很多成就。
翻译自: https://webdesign.tutsplus.com/articles/quick-tip-utilizing-normal-document-flow--webdesign-8199
元素不在普通文档流
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
