Css 简明教程

CSS - Layouts

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

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

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

本节解释了网页的正常流程，其中元素按照此流程对自身进行定位或布局。正常流程是您打算进行任何更改的基本依据。

box model* 应用于各个元素，其中为内容添加内边距、边框或外边距。默认情况下， block-level 元素用其内容填充分配于父元素的内联空间；而 inline-level 元素的大小与其内容的大小相同。对于值为 inline 的 * display* 元素，您可以设置 * width* 或 * height*

在正常布局流程中， block-level 元素放置在 block flow direction 中，这取决于父元素的书写模式。每个块级元素都会在最后一行下方的单独一行中显示，并由指定的外边距分隔。

inline-level 元素不会出现在新行中，而是与其他文本内容一起出现在同一行中，直到它们有空间位于父块级元素的宽度内为止。当没有剩余空间时，内容将换到新行中。

在单维空间中将元素布局成行和列，由 * flexbox* 布局处理。在此布局中，项目或元素会变形以便填充分配给它们的空间，同时它们可能会缩小以适合较小的空间。

在二维空间中排列元素的布局系统是 * grid* 布局的职责。它有助于将内容布局成行和列，并使整个建筑布局简单。

除了用于在容器内浮动图像外，CSS * float* 是用来在网页上创建多列布局的常用属性之一。但是，使用 flexbox 和 grid 特性后， float 被限制用于浮动图像或文本。

定位是一种功能，它决定了网页上元素的 position 或放置，这些元素可以是固定的或相对于视口的。

此 layout 可以让你以不同的列来放置内容，这就像报纸一样。

随着各种设备的进步，屏幕以不同的尺寸使用。 responsive web design (RWD) 有助于允许网页调整其布局，并按照不同的屏幕尺寸、各种宽度和分辨率显示。

CSS 提供的 * Media Query* 至关重要，因为它们有助于基于视口大小来创建不同的布局。通过媒体查询指定一个规则，并当浏览器和设备环境与规则相符时，就会运用特定 CSS。媒体查询也有助于检测您网站正在运行的环境中的其他功能。