CSS 排版- 學習該如何開發Web

對HTML 有基本的認知，如 HTML 簡介 單元中所述。

熟悉CSS 基本原理，如 CSS 簡介中所述。

了解如何 樣式框。

注: 如果你正在使用的電腦 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發WebCSS（樣式表）CSS排版ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.先備知識指導參見 RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 先備知識指導參見 CSS排版 基於我們已經看過了 CSS基本原理：如何將文字賦予樣式、如何該便樣式或操作你的文字內容所處的box模型。

現在是時候看看如何將你的box模型在視圖中放置於相對應的正確位置。

我們已經涵蓋了必要的先備知識，接下來我們可以深入CSS排版，看一些不同的顯示方式，如現代的排版方式——彈性盒子、CSS網格及定位，當然還有一些舊式的技術你可能會想要理解。

先備知識開始這個單元之前，需要做如下準備： 對HTML有基本的認知，如  HTML簡介 單元中所述。

熟悉CSS基本原理，如 CSS簡介中所述。

了解如何 樣式框。

注:如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 JSBin 或 Thimble 編輯並嘗試（大部分的）範例程式碼。

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

在課程的結尾有一個評估測驗——配置一個網頁的版面，這可以幫助你了解你對 CSS 排版方式的理解程度。

CSS排版介紹 這篇文章將回顧一些之前單元中提過的CSS排版特性，像是不同的display(en-US)參數，藉由這個單元我們將介紹一些基本概念。

常規流 在我們做任何事之前，網頁上的元素會根據常規流自行排列。

這篇文章解釋常規流的基礎知識，用來學習如何改變它。

彈性盒子 彈性盒子是一維空間的排版方式，用來讓項目以行或列的方式排列。

項目會延展或限縮來符合較大或較小的空間。

這篇文章會解釋基礎原理。

網格 CSS網格排版是一個二維空間的網頁排版系統。

它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。

這篇文章會告訴你全部。

浮動 最初是為了在文字區塊中浮動排列圖片，而後為了在網頁中建造多攔排版float(en-US)屬性成為了最常用的工具之一。

這篇文章會解釋如何使用。

定位 定位准許將元素從正常的文檔流中脫離出來，讓他們表現不同，例如設置在另一個模塊的上方，或使模塊在瀏覽器視窗內部始終停留在相同的地方。

這篇文章將解釋不同的position(en-US)值和如何使用它們。

多欄排版 多欄排版規格提供你將內容排進欄位的排版方式，像你可能在報紙上看到的那樣。

這篇文章會解釋如何使用這個功能。

舊式排版方式 網格系統是另一個在CSS排版中非常常用的特性，在網格排版出現之前，它通常使用浮動或其他佈局來實現。

想像你的佈局為一組列數（如 4,6,或 12），然後將你的內容放置在這些虛構的列中。

在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗CSS網格來結束-一個新興的瀏覽器特性使得在Web實現網格設計變得大為容易等來探索這些基本的想法。

支援舊版瀏覽器 在這個單元，我們建議你使用彈性盒子和網格作為主要的設計方式。

但是有些造訪你網站的人會使用舊版瀏覽器，或者他使用的瀏覽器不支援你的設計方式。

以下情形在網路上一定會發生——當新功能開發出來了，不同的瀏覽器會有不同的支援優先級。

這篇文章會解釋如何使用現代網頁技術且不遺漏舊技術的使用者。

基礎排版理解測驗 配置網頁版面，這是一個測試你對於不同排版方式理解程度的測驗。

參見  實際的定位排版範例 這篇文章會告訴你如何建立一些真實的範例來說明什麼樣的情況你可以使用定位排版。

 Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月22日,byMDNcontributors