編撰中
本頁仍未完成

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

先決條件

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

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

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

指導

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

CSS 佈局簡介
這篇文章將概括一些我們以前提過的模塊中的 CSS 佈局特性— 如不同的display 值— 並通過這個模塊我們將覆蓋介紹一些概念。
浮動
最初是在文本塊中浮動圖片,隨後為了在網頁中創建多列佈局float 屬性成為了最常用的工具之一。這篇文章會完全解釋它的用處。
定位
定位准許將元素從正常的文檔流中脫離出來,讓他們表現不同,例如設置在另一個模塊的上方,或使模塊在瀏覽器視窗內部始終停留在相同的地方。這篇文章將解釋不同的position 值和如何使用它們。
練習定位示例
在上一篇文章涵蓋著的基礎定位,我們現在來試試創建一組真實的案例,看看使用定位你可以演示什麼類型的東西。
Flexbox
這是一項新技術,但是跨平台支持非常普遍,Flexbox 開始準備被廣泛使用。Flexbox 提供快速創建複雜,靈活的佈局工具以及歷史證明很困難的 CSS 功能。 這篇文章將解釋所有的基礎原理。
Grids
網格系統是另一個在 CSS 佈局中非常常用的特性,它通常使用浮動或其他佈局來實現。想像你的佈局為一組列數(如 4, 6, 或 12),然後將你的內容放置在這些虛構的列中。在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗 CSS 網格來結束-一個新興的瀏覽器特性使得在 Web 實現網格設計變得大為容易等來探索這些基本的想法。

文件標籤與貢獻者

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