適用于：

在開始前，你應該已經具備:

1. 對HTML的基礎了解，在Introduction to HTML部分討論過的。
2. 一定的CSS基礎，在Introduction to CSS部分討論過的。
3. 知道怎么來使用框模型.

指南

這些文章將提供在CSS中可用的基本布局工具和技術的指導。

介紹 CSS 布局

本文將重述一些我們在之前的模塊中已經涉及的CSS布局功能 - 例如不同的 display 值— 并介紹我們將在本單元中涵蓋的一些概念。

??Floats?浮動方式

最初對于文本塊中的浮動圖像，float屬性已經成為在網頁上創(chuàng)建多個列布局的最常用工具之一。本文解釋所有。

?Positioning?位置/定位

定位允許您從常規(guī)文檔布局流程中取出元素,并使它們具有不同的行為，例如坐在另一個之上，或始終保持在瀏覽器視口內的同一位置。?本文解釋不同的position 值，以及如何使用它們。

?Practical positioning examples?練習定位的案例

在最后一篇文章中介紹了定位的基礎知識，現(xiàn)在將討論構建幾個真實世界的例子，以說明你可以通過定位做什么樣的事情。

Flexbox?彈性盒子

一種新技術，但現(xiàn)在在各種瀏覽器中支持相當廣泛的支持，Flexbox開始準備好廣泛使用。 Flexbox提供了工具，允許快速創(chuàng)建復雜，靈活的布局，以及歷史上被證明難以使用CSS的功能。本文解釋所有的基本原理。

Grids?網格布局

網格系統(tǒng)是CSS布局中使用的另一個非常常見的特征，其趨向于使用浮動或其他布局特征來實現(xiàn)。您可以將布局設為一定數量的列（例如4,6或12），然后將內容列放在這些虛擬列中。在本文中，我們將探討創(chuàng)建網格系統(tǒng)的基本思想，使用網格框架提供的現(xiàn)成網格系統(tǒng)，并通過實驗CSS網格 - 一個新生的新的瀏覽器功能，使在網上實現(xiàn)網格設計更容易結束。.?

學習成果測驗?Assessments

以下評估將測試您使用CSS布局網頁的能力。

創(chuàng)建一個彈性盒子布局 Creating a flexible multicolumn layout

此評估測試您創(chuàng)建標準多列布局的能力，并具有一些有趣的功能。

創(chuàng)建一個固定的控制組件 Creating a fixed control widget

此評估測試您對定位的理解，要求您創(chuàng)建一個固定的位置控件小部件，允許用戶訪問Web應用程序的控件，無論它們滾動到哪里。

還可以參閱

• https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout