CSS layout

適用于：

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

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

指南

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

介紹 CSS 布局

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

??Floats?浮動方式

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

?Positioning?位置/定位

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

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

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

Flexbox?彈性盒子

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

Grids?網(wǎng)格布局

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

學(xué)習(xí)成果測驗?Assessments

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

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

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

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

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

還可以參閱

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