MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

正在翻譯中。

編撰中
本頁仍未完成

基於我們已經看過 CSS 基本原理,如何美化文本和如何給內容所在框添加樣式和操作內容所在框的這點。現在是時候看看如何在視野內將盒子放置在正確的地方和其他盒子。我們已經涵蓋了必要的先決條件,所以我們現在可以深入到 CSS 佈局,查看不同的顯示設置,涉及浮點和定位的傳統佈局方法,以及新的混合佈局工具,如flexbox。

先決條件

在開始這個模塊之前,需要做如下準備:

  1. 對 HTML 有基本的認知,如  HTML 簡介 模塊中所述。
  2. 熟悉 CSS 基本原理,如 CSS 簡介中所述。
  3. 了解如何 樣式框

筆記: 如果你正在使用的計算機/平板/其他設備讓你無法創建自己的文件,你可以嘗試在線編碼如 JSBin 或 Thimble 編輯案例(大部分)。

指導

這些文章旨在提供關於 CSS 中可用的基本佈局工具和技術的指導。

CSS 佈局簡介
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
Floats
Originally for floating images inside blocks of text, the float property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.
Positioning
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
Practical positioning examples
With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.
Flexbox
A new technology, but with support now fairly widespread across browsers, Flexbox is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.
Grids
Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.

Assessments

The following assessments will test your ability to lay out web pages with CSS.

Creating a flexible multicolumn layout (TBD)
This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.
Creating a fixed control widget (TBD)
This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.

文件標籤與貢獻者

 此頁面的貢獻者: Rowen, jackblackevo, georgelin422
 最近更新: Rowen,