到目前为止，您已经了解了 CSS 的各种基础知识，这些基础知识有助于设置文本和包含内容的框的样式。在本章中，我们将学习如何相对于视口排列和调整这些框。
网页布局结构
网页由页眉、菜单、内容和页脚等各个部分组成，开发人员可以在此基础上设计出多种不同的布局。
先决条件
为了继续学习 CSS 布局，某些先决条件是必不可少的，例如:
具备 HTML 的基本知识。
CSS 基础知识的基本概念。
CSS 基础知识的基本概念。
了解如何设置框的样式。
本章将列出可用于 CSS 布局的基本工具和技术。让我们看一下每个主题。
CSS 布局 - 正常流程
本节介绍网页的正常流程，其中元素根据此流程定位或放置自己。正常流程是您打算进行的任何更改的基础。
盒子模型应用于个人元素，其中内边距、边框或边距添加到内容中。默认情况下，块级元素用其内容填充父元素的可用内联空间；而内联元素的大小与其内容的大小相同。对于display值为inline的元素，您可以设置width 或 height
在正常的布局流程中，块级元素位于块流方向上，这是根据父母的写作模式。每个块级元素将出现在最后一行下方的新行中，并以指定的边距分隔。
内联级元素不会出现在新行中，而是出现在同一行中与其他文本内容，直到它们有空间位于父块级元素的宽度内。当没有剩余空间时，内容将换行。
CSS 布局 - Flexbox
一维空间中行和列中的元素布局由 flexbox 布局负责。在此布局中，项目或元素会弯曲以填充空间，同时它们可能会缩小以适应较小的空间。
CSS 布局 - 网格
在二维空间中定位元素的布局系统，是grid布局，即网格布局。它有助于将内容按行和列放置，并使整个建筑的复杂布局变得容易。
CSS 布局 - 浮动
CSS float 是在网页上创建多列布局的常用属性之一，除了使用它来浮动图像之外一个容器。但由于 Flexbox 和网格功能，浮动图像或文本的使用受到限制。
CSS 布局 - 定位
定位是一种确定网页上元素的位置或位置的功能，可以是固定的或相对于视口。
CSS 布局 - 多列布局
随着各种设备的进步，屏幕有多种尺寸可供选择。 响应式网页设计（RWD）有助于让网页根据不同的屏幕尺寸和宽度调整其布局和显示和分辨率。
CSS 布局 - 媒体查询
媒体查询至关重要，因为它们有助于根据视口的大小创建不同的布局。规则是通过媒体查询指定的，当浏览器和设备环境与规则匹配时，就会应用某些 CSS。媒体查询还有助于检测网站运行环境的其他功能。