Css 简明教程

CSS - Layouts

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

You have so far learnt about the various fundamentals of CSS which helps in styling text and the boxes that contain the content. In this chapter we will learn how to arrange and adjust these boxes in relation to the viewport.

Prerequisites

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

In order to proceed with learning of CSS layout, certain prequisites are essential, such as:

  1. Having a basic knowledge of HTML.

  2. Basic idea of the CSS fundamentals.

  3. Understanding of how to style the boxes.

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

The chapter will list fundamental tools and techniques available for CSS layout. Let us look at each topic.

CSS Layout - Normal flow

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

This section explains about the normal flow of a webpage, where the elements position or lay themselves as per this flow. The normal flow is the basic ground for any changes that you intend to do.

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

A box model is applied to the individual elements, where padding, border, or margin are added to the content. A block-level element fills the available inline space of the parent element with its content, by default; whereas an inline-level element’s size is same as its content’s size. For the elements that have a display value of inline, you can set the width or height

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

In the normal layout flow, the block-level elements are positioned in the block flow direction, which is as per the parent’s writing mode. Each block-level element will appear in a new line below the last line, separated by the specified margin.

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

The inline-level elements do not appear on a new line, rather they appear in the same line along with other text content, till the time they have space to be inside the width of the parent block level element. When there is no space left, then the content will fall into a new line.

CSS Layout - Flexbox

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

Laying out of elements in rows and columns, in a one-dimensional space, is taken care by the flexbox layout. In this layout the items or elements flex in order to fill the space and at the same time they may shrink to fit in the smaller spaces.

CSS Layout - Grids

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

Layout system of positioning elements in a two-dimensional space, is the responsibility of the grid layout. It helps in laying the content in rows and columns and make the whole building complex layout easy.

CSS Layout - Floats

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

CSS float is one of the commonly used property to create multiple column layouts on webpages, apart from using it to float images inside a container. But with flexbox and grid features, the float is restricted for the usage of floating images or text.

CSS Layout - Positioning

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

Positioning is a feature that determines the position or placement of elements on a webpage, which can be fixed or relative to a viewport.

CSS Layout - Multiple-column layout

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

This layout lets you lay the content in different columns, just like a newspaper.

CSS Layout - Responsive design

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

With the advance in the various devices, the screens are available in diverse sizes. The responsive web design (RWD) is helpful in allowing web pages to adjust their layout and display as per the different screen sizes, with varying widths and resolutions.

CSS Layout - Media queries

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

The Media Query provided by CSS are essential as they help in creation of different layouts based on the size of the viewport. A rule is specified via a media query and as the browser and device environment matches the rule, certain CSS gets applied. The media queries are also helpful in detecting other features of the environment, where your site is running.