CSS - 布局

到目前为止，您已经了解了 CSS 的各种基础知识，这有助于设置文本样式和包含内容的框。在本章中，我们将学习如何相对于视口来排列和调整这些框。

先决条件

为了继续学习 CSS 布局，某些先决条件是必不可少的，例如：

本章将列出可用于 CSS 布局的基本工具和技术。让我们看看每个主题。

本节解释了网页的正常流程，其中元素根据此流程进行定位或放置。正常流程是您打算进行的任何更改的基本基础。

框模型应用于各个元素，其中填充、边框或边距被添加到内容中。默认情况下，块级元素用其内容填充父元素的可用内联空间;而内联级元素的大小与其内容的大小相同。对于显示值为 inline 的元素，您可以设置宽度或高度

在正常的布局流程中，块级元素位于块流方向上，这是根据父级的写入模式。每个块级元素都将显示在最后一行下方的新行中，并用指定的边距分隔。

内联级元素不会显示在新行上，而是与其他文本内容一起出现在同一行中，直到它们有空间位于父块级元素的宽度内。当没有剩余空间时，内容将落入新行中。

在一维空间中，按行和列的形式布局元素由
布局负责。在这种布局中，物品或元素会弯曲以填充空间，同时它们可能会收缩以适应较小的空间。

布局系统将元素定位在二维空间中，是网格布局的责任。它有助于将内容按行和列放置，并使整个建筑物的复杂布局变得容易。

CSS float 是在网页上创建多列布局的常用属性之一，除了使用它来在容器内浮动图像之外。但是使用 flexbox 和网格功能，浮动值被限制为浮动图像或文本的使用。

定位是一种功能，用于确定网页上元素的位置或位置，这些元素可以是固定的，也可以是相对于视口的。

这种布局使您可以将内容放置在不同的列中，就像报纸一样。

随着各种设备的进步，屏幕有多种尺寸可供选择。响应式网页设计（RWD）有助于允许网页根据不同的屏幕尺寸、不同的宽度和分辨率调整其布局和显示。

CSS 提供的媒体查询是必不可少的，因为它们有助于根据视口的大小创建不同的布局。规则是通过媒体查询指定的，当浏览器和设备环境与规则匹配时，将应用某些 CSS。媒体查询还有助于检测运行站点的环境的其他功能。

打印本页