CSS布局入门，小白的福利 网友：已收藏

在过去的几年中，CSS布局以及我们开发网站前端的方式发生了巨大变化。现在，在CSS用于开发站点的布局方法方面，我们有了真正的选择，这意味着我们经常需要选择采用哪种方法。在本文中，我将通过解释如何使用它们以及如何使用它们的基础知识，介绍您可以使用的各种布局方法。

结构化文档以利用常规流程

通过确保文档以结构良好的方式开始，您可以利用正常的流程。想象一下，如果不是浏览器这种正常流动的概念，而是浏览器将所有盒子堆叠在彼此的角上，直到创建布局。那意味着您将必须将所有单个内容放置在页面上。而是，浏览器以立即可读的方式显示我们的内容。

如果您的CSS无法加载，则用户仍然可以阅读内容，而完全不获取CSS的用户（例如，使用屏幕阅读器的用户）将按照文档中的顺序将内容交付给他们。从可访问性的角度来看，使HTML文档井井有条地开始生活至关重要。但是，这也将使您作为Web开发人员的生活更加轻松。如果您的内容符合用户希望阅读的顺序，则无需对布局进行大量更改即可将其放置在正确的位置。使用更新的布局方法，您可能会惊讶于您要做的事很少。

因此，在考虑布局之前，请考虑文档结构和您希望从文档顶部到底部阅读内容的顺序。

远离正常流量

有了结构合理的文档后，我们需要决定如何采用该文档并将其转换为所需的布局。对于我们文档的某些部分，这将涉及偏离正常流程。我们有整套的布局方法可供使用。我们将要研究的第一种方法是float，因为浮点数很好地说明了从正常流中取出元素的含义。

浮点数

浮动框用于将框向左或向右移动，以使内容围绕它显示。

为了浮动项目，请使用CSS属性float和一个left或right值。float的默认值为none。

 

值得注意的是，当您浮动一个项目并用文本环绕时，会缩短该内容的行框。如果您浮动某个项目，并且以下包含您的文本的框应用了背景色，则可以看到该背景色将在该浮动项下运行。

在缩短行框以在浮动文本和自动换行文本之间留出空间时，必须在浮动项目上设置边距。文本上的边距只是将文本从容器的边缘移入。对于向左浮动的图像，假设您希望图像与容器的顶部和左侧齐平，则应在右侧和底部添加边距。

 

 

 

内容的背景色在浮动下运行

清算浮动

浮动元素后，以下所有元素将环绕该浮动元素，直到它们包裹在下面，并且正常流程继续进行。如果要防止这种情况，则需要清除浮点数。

在要在浮动之后开始显示的元素上，添加clear值为left 的属性以指示清除向左浮动的项目，向右以清除向右浮动的项目，或同时清除所有浮动。

 

如果希望元素在浮点后开始，则上述方法有效。如果您发现自己的状态是盒子里有一个漂浮的物品，并且旁边有一些文字，那将无济于事。如果文本比浮动项目短，则将在内容下方绘制该框，而忽略浮动项目。正如我们已经了解的那样，浮点数会缩短线框，其余的布局将继续正常流动。

为了防止这种情况，我们需要清除包装箱内的东西。我们可以添加一个空元素并将其设置为清除所有元素。这涉及将空div粘贴到我们的文档中，这并不理想，如果您的页面是由CMS生成的，则可能无法实现。因此，典型的清除浮动方法是所谓的清除修补程序。此方法通过添加CSS生成的内容并将其设置为清除两者来起作用。

 

 

 

块格式化上下文

清除框内浮点数的另一种方法是在容器上调用块格式化上下文（BFC）。块格式上下文包含其中的所有内容，其中将包括无法再戳出框底部的浮动项目。有几种强制BFC的方法，清除浮点数时最常见的方法是将溢出属性设置为具有默认可见值以外的值。

 

以这种方式使用溢出通常会起作用，但是，在某些情况下，您最终可能会在项目上留下阴影或不必要的滚动条。在样式表中看起来也有些混乱：您是否设置了溢出是因为需要滚动条还是只是为了获得这种清除功能？

为了使意图更清晰并防止创建BFC引起不必要的副作用，可以将其flow-root用作该display属性的值。唯一要做的display: flow-root就是创建一个BFC，从而清除浮标而不会引起其他问题。

 

浮点数的旧用法

在使用较新的布局方法来创建列布局之前，浮动技术一直通过为一组项目提供一定的宽度并将它们设置为彼此相邻浮动来起作用。仔细管理这些浮动框的百分比大小可能会产生网格效果。

我不建议立即开始新设计并使用此方法。但是，它将在现有站点中保留很多年。因此，如果遇到几乎所有东西都漂浮的设计，那么这就是使用的技术。

定位

要从普通流中删除元素或将其从普通流中的位置移开，可以使用positionCSS中的属性。正常流动时，元素position的static。这些项目在“块”维度中一个接一个地显示，如果滚动页面，它们也会随之滚动。

更改位置值时，通常还会使用偏移值将框从特定参考点移开。使用的参考点取决于您使用的位置值。

相对定位

如果项目具有position: relative参考点，则该参考点通常是正常流动的地方。然后，您可以使用偏移的属性值top，left，bottom和right移动从那里通常会显示框。

 

请注意，页面上的其他项目不会响应元素的新位置。保留了它在正常流程中的位置，因此您需要自己管理所有重叠部分。

 

 

 

绝对定位

设置position: absolute的一个项目，它完全从正常流程中移除。剩下的空间将被删除。然后，将相对于其包含的块定位该项目，除非将其嵌套在另一个定位的元素内，否则它将为视口。

因此，如果position: absolute在项目上进行设置，将会发生的第一件事是，它通常最终会卡在视口的顶部和左侧。然后，您可以使用偏移的属性值top，left，bottom并right从该位置移动框，你希望它是。

 

通常，您不希望根据视口放置盒子，但是在引用包含元素时，它位于内部。在这种情况下，您需要为包含该元素的位置赋予默认静态值以外的位置值。

由于设置position: relative不会从正常流程中删除该项目，因此这是通常的选择。给您希望设置偏移的父元素，position: relative然后从该元素的边界偏移绝对定位的块。

 

 

 

固定定位

position: fixed在大多数情况下，带有的东西将相对于视口放置，并从文档流中删除，因此不会为其保留任何空间。滚动页面时，固定元素将相对于视口保持在适当的位置，因为正常流中的其余内容照常滚动。

 

这有助于启用固定的导航面板，该面板在屏幕上（例如，在内容滚动时）保持在屏幕上。与其他定位值一样，这样做可能会导致重叠，因此应注意所有内容都可以读取并且不会以固定项目结尾。