適用于：

在開始前，你應(yīng)該已經(jīng)具備:

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

指南

這些文章將提供在CSS中可用的基本布局工具和技術(shù)的指導(dǎo)。

介紹 CSS 布局

本文將重述一些我們?cè)谥暗哪K中已經(jīng)涉及的CSS布局功能 - 例如不同的 display 值— 并介紹我們將在本單元中涵蓋的一些概念。

??Floats?浮動(dòng)方式

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

?Positioning?位置/定位

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

?Practical positioning examples?練習(xí)定位的案例

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

Flexbox?彈性盒子

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

Grids?網(wǎng)格布局

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

學(xué)習(xí)成果測(cè)驗(yàn)?Assessments

以下評(píng)估將測(cè)試您使用CSS布局網(wǎng)頁的能力。

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

此評(píng)估測(cè)試您創(chuàng)建標(biāo)準(zhǔn)多列布局的能力，并具有一些有趣的功能。

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

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

還可以參閱

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