翻譯不完整。請協助 翻譯此英文文件

編撰中
本頁仍未完成

基於我們已經看過了 CSS 基本原理:如何將文字賦予樣式、如何該便樣式或操作你的文字內容所處的box模型。現在是時候看看如何將你的box模型在視圖中放置於相對應的正確位置。我們已經涵蓋了必要的先輩知識,接下來我們可以深入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 實現網格設計變得大為容易等來探索這些基本的想法。

文件標籤與貢獻者

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