CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>介绍 CSS 布局 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Einführung in CSS Layout" href="https://developer.mozilla.org/de/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="de"/><link rel="alternate" title="Introduction to CSS layout" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="en"/><link rel="alternate" title="Introducción al diseño en CSS" href="https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="es"/><link rel="alternate" title="Introduction à la mise en page en CSS" href="https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="fr"/><link rel="alternate" title="CSS レイアウト入門" href="https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="ja"/><link rel="alternate" title="CSS 레이아웃 입문서" href="https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="ko"/><link rel="alternate" title="Introdução ao leiaute com CSS" href="https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="pt"/><link rel="alternate" title="Введение в CSS вёрстку" href="https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="ru"/><link rel="alternate" title="介绍 CSS 布局" href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的display值——并介绍我们将在本模块中使用的一些概念。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction"/><meta property="og:title" content="介绍 CSS 布局 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的display值——并介绍我们将在本模块中使用的一些概念。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.9722bf44.js"></script><link href="/static/css/main.27d5b2a8.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-css document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/zh-CN/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FCSS%2FCSS_layout%2FIntroduction" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FCSS%2FCSS_layout%2FIntroduction" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习 Web 开发</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/CSS" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习使用 CSS 为 HTML 添加样式</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/CSS/CSS_layout" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS 布局</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">介绍 CSS 布局</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn/CSS/CSS_layout/Introduction" class="button submenu-item"><span>Русский</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#正常布局流">正常布局流</a></li><li class="document-toc-item "><a class="document-toc-link" href="#display_属性">display 属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#弹性盒子">弹性盒子</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid_布局">Grid 布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#浮动">浮动</a></li><li class="document-toc-item "><a class="document-toc-link" href="#定位技术">定位技术</a></li><li class="document-toc-item "><a class="document-toc-link" href="#表格布局">表格布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#多列布局">多列布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 入门</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布你的网站</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works">万维网是如何工作的</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/HTML">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 调试</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 object 到 iframe——其他嵌入技术</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">向 web 中添加矢量图形</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Tables">HTML 表格</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Advanced">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data">作业：构建行星数据</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/CSS">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 入门概述</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 的组成</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks">CSS 构建</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类和 ID 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers">层叠层</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同方向的文本</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Styling_text">为文本添加样式（样式化文本）</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li><details open=""><summary>CSS 排版</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></li><li><em><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" aria-current="page">介绍 CSS 布局</a></em></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">常规流布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局方法</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/JavaScript">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks">创建 JavaScript 代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript 对象入门</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous">异步 JavaScript</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers">workers 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs">客户端 Web API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">操作文档</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">第三方 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">客户端存储</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Forms">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href="/zh-CN/docs/Learn/Forms">Web 表单构建块</a></li><li><a href="/zh-CN/docs/Learn/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href="/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls">如何构建自定义表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript">使用 JavaScript 发送表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls">表单控件兼容性列表</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Accessibility">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href="/zh-CN/docs/Learn/Accessibility">无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Performance">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href="/zh-CN/docs/Learn/Performance">Web 性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/MathML">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/MathML/First_steps">MathML 入门概述</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Getting_started">MathML 使用入门</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Text_containers">MathML 文本容器</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML 分数和根号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Scripts">MathML 附加符号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Tables">MathML 表格</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">三个著名的数学公式</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/../Games">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href="/zh-CN/docs/Games/Introduction">Web 游戏开发简介</a></li><li><a href="/zh-CN/docs/Games/Techniques">游戏开发技术</a></li><li><a href="/zh-CN/docs/Games/Tutorials">教程</a></li><li><a href="/zh-CN/docs/Games/Publishing_games">发布游戏</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Tools_and_testing">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools">理解客户端 web 开发工具</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令行速成课</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架的主要特性</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">组件化我们的 React App</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">开始使用 Vue</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">创建第一个 Vue 组件</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 组件列表</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">使用 CSS 为 Vue 组件添加样式</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Vue 中的计算属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">使用 Vue 模板引用进行焦点管理</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte 入门</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Svelte 中的动态行为：变量和属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">将我们的 Svelte 应用组件化</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">使用 Svelte store</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Svelte 对 TypeScript 的支持</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 入门</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/GitHub">Git 和 GitHub</a></li></ol></details></li><li><details><summary>跨浏览器测试</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">处理常见的 JavaScript 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Server-side">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/First_steps">服务端网站编程的第一步</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Django">Django Web 框架 (python)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs">Express Web 框架（Node.js/JavaScript）</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Common_questions">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href="/zh-CN/docs/Learn/Common_questions">常见问题</a></li><li><a href="/zh-CN/docs/Learn/HTML/Howto">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn/CSS/Howto">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Howto">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Design_and_accessibility">设计与无障碍</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#正常布局流">正常布局流</a></li><li class="document-toc-item "><a class="document-toc-link" href="#display_属性">display 属性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#弹性盒子">弹性盒子</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid_布局">Grid 布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#浮动">浮动</a></li><li class="document-toc-item "><a class="document-toc-link" href="#定位技术">定位技术</a></li><li class="document-toc-item "><a class="document-toc-link" href="#表格布局">表格布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#多列布局">多列布局</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>介绍 CSS 布局</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/CSS/CSS_layout"><span class="button-wrap"> 概述：CSS 布局</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow"><span class="button-wrap"> 下一页 </span></a></li> </ul> <p>本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的<a href="/zh-CN/docs/Web/CSS/display"><code>display</code></a>值——并介绍我们将在本模块中使用的一些概念。</p> <figure class="table-container"><table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提：</th> <td>对 HTML 有一些基本的了解 (学习“<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a>”), 并且理解 CSS 的工作原理 (学习“<a href="/en-US/docs/Learn/CSS/First_steps">CSS 介绍</a>”).</td> </tr> <tr> <th scope="row">目标：</th> <td> 对 CSS 页面布局技术有一个总体的了解。每种技术都能够在后面的教程中获取到更加详细的信息。 </td> </tr> </tbody> </table></figure> <p>CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面<a href="/zh-CN/docs/Web/CSS/Layout_mode">布局技术</a>的细节：</p> <ul> <li>正常布局流</li> <li><a href="/zh-CN/docs/Web/CSS/display"><code>display</code></a>属性</li> <li>弹性盒子</li> <li>网格</li> <li>浮动</li> <li>定位</li> <li>CSS 表格布局</li> <li>多列布局</li> </ul> <p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p></div><section aria-labelledby="正常布局流"><h2 id="正常布局流"><a href="#正常布局流">正常布局流</a></h2><div class="section-content"><p>正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。让我们快速地看一个 HTML 的例子：</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><p>I love my cat.</p> <ul> <li>Buy cat food</li> <li>Exercise</li> <li>Cheer up friend</li> </ul> <p>The end!</p> </code></pre></div> <p>默认情况下，浏览器的显示如下：</p><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="正常布局流 sample" id="frame_正常布局流" width="100%" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="正常布局流" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>注意，HTML 元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p> <p>出现在另一个元素下面的元素被描述为<strong>块</strong>元素，与出现在另一个元素旁边的<strong>内联元素</strong>不同，内联元素就像段落中的单个单词一样。</p> <div class="notecard note"> <p><strong>备注：</strong>块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p> </div> <p>当你使用 css 创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的 Html 文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。</p> <p>下列布局技术会覆盖默认的布局行为：</p> <ul> <li><strong><a href="/zh-CN/docs/Web/CSS/display"><code>display</code></a></strong> 属性 — 标准的 value，比如<code>block</code>, <code>inline</code> 或者 <code>inline-block</code> 元素在正常布局流中的表现形式 (见 <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes">Types of CSS boxes</a>). 接着是全新的布局方式，通过设置<code>display</code>的值，比如 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> 和 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>浮动</strong>——应用 <strong><a href="/zh-CN/docs/Web/CSS/float"><code>float</code></a></strong> 值，诸如 <code>left</code> 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。</li> <li><strong><a href="/zh-CN/docs/Web/CSS/position"><code>position</code></a></strong> 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 <code>static</code> ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。</li> <li><strong>表格布局</strong>— 表格的布局方式可以用在非表格内容上，可以使用<code>display: table</code>和相关属性在非表元素上使用。</li> <li><strong>多列布局</strong>— 这个 <a href="/zh-CN/docs/Web/CSS/CSS_multicol_layout">Multi-column layout</a> 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。</li> </ul></div></section><section aria-labelledby="display_属性"><h2 id="display_属性"><a href="#display_属性">display 属性</a></h2><div class="section-content"><p>在 css 中实现页面布局的主要方法是设定<code>display</code>属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个<code>display</code>的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是<code>display:block</code>。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为<a href="/zh-CN/docs/Web/HTML/Element/a"><code><a></code></a>元素默认为<code>display:inline</code>。</p> <p>你可以更改此默认显示行为。例如，<a href="/zh-CN/docs/Web/HTML/Element/li"><code><li></code></a>元素默认为<code>display:block</code>，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为<code>inline</code>，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，你可以更改任何元素的<code>display</code>值，这意味着你可以根据它们的语义选择 html 元素，而不必关心它们的外观。他们的样子是你可以改变的。</p> <p>除了可以通过将一些内容从<code>block</code>转换为<code>inline</code>（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以<code>display</code>值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是 <code>display: flex</code> 和 <code>display: grid</code>。</p></div></section><section aria-labelledby="弹性盒子"><h2 id="弹性盒子"><a href="#弹性盒子">弹性盒子</a></h2><div class="section-content"><p>Flexbox 是 CSS 弹性盒子布局模块（<a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照 flex 进行布局。我们来看一个例子。</p></div></section><section aria-labelledby="设置_displayflex"><h3 id="设置_displayflex"><a href="#设置_displayflex">设置 display:flex</a></h3><div class="section-content"><p>下面这些 HTML 标记描述了一个 class 为<code>wrapper</code>的容器元素，它的内部有三个<code><div></code>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。</p> <p>现在，当我们把<code>display: flex</code>添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了<em>flex 项 (flex items)</em>，按照 flex 容器（也就是它们的父元素）的一些 flex 相关的初值进行 flex 布局：它们整整齐齐排成一行，是因为父元素上<code>flex-direction</code>的初值是<code>row</code>。它们全都被拉伸至和最高的元素高度相同，是因为父元素上<code>align-items</code>属性的初值是<code>stretch</code>。这就意味着所有的子元素都会被拉伸到它们的 flex 容器的高度，在这个案例里就是所有 flex 项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: flex; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置 display:flex sample" id="frame_设置_displayflex" width="300" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="设置_displayflex" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置_flex_属性"><h3 id="设置_flex_属性"><a href="#设置_flex_属性">设置 flex 属性</a></h3><div class="section-content"><p>除了上述可以被应用到 flex 容器的属性以外，还有很多属性可以被应用到 flex 项 (flex items) 上面。这些属性可以改变 flex 项在 flex 布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间。</p> <p>作为一个简单的例子，我们可以在我们的所有子元素上添加<a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性，并赋值为<code>1</code>，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。除此之外，如果你在 HTML 标记中添加了一个新元素，那么它们也会变得更小，来为新元素创造空间——不管怎样，最终它们会调整自己直到占用相同宽度的空间。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: flex; } .wrapper > div { flex: 1; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置 flex 属性 sample" id="frame_设置_flex_属性" width="300" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="设置_flex_属性" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>备注：</strong>为了找到更多关于 Flexbox 的信息，看看我们的 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 的文章。</p> </div></div></section><section aria-labelledby="grid_布局"><h2 id="grid_布局"><a href="#grid_布局">Grid 布局</a></h2><div class="section-content"><p>Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。</p></div></section><section aria-labelledby="设置_display_grid"><h3 id="设置_display_grid"><a href="#设置_display_grid">设置 display: grid</a></h3><div class="section-content"><p>同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：<code>display: grid</code>。下面的例子使用了与 flex 例子类似的 HTML 标记，描述了一个容器和若干子元素。除了使用<code>display:grid</code>，我们还分别使用 <a href="/zh-CN/docs/Web/CSS/grid-template-rows"><code>grid-template-rows</code></a> 和 <a href="/zh-CN/docs/Web/CSS/grid-template-columns"><code>grid-template-columns</code></a> 两个属性定义了一些行和列的轨道。定义了三个<code>1fr</code>的列，还有两个<code>100px</code>的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> <div class="box6">Six</div> </div> </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置 display: grid sample" id="frame_设置_display_grid" width="300" height="330" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="设置_display_grid" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="在网格内放置元素"><h3 id="在网格内放置元素"><a href="#在网格内放置元素">在网格内放置元素</a></h3><div class="section-content"><p>一旦你拥有了一个 grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的 grid，但是这一次我们只有三个子元素。我们利用 <a href="/zh-CN/docs/Web/CSS/grid-column"><code>grid-column</code></a> 和 <a href="/zh-CN/docs/Web/CSS/grid-row"><code>grid-row</code></a> 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } .box1 { grid-column: 2 / 4; grid-row: 1; } .box2 { grid-column: 1; grid-row: 1 / 3; } .box3 { grid-row: 2; grid-column: 3; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="在网格内放置元素 sample" id="frame_在网格内放置元素" width="300" height="330" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="在网格内放置元素" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>备注：</strong>这两个例子只是展示了 grid 布局的冰山一角，要深入了解 grid 布局，请参阅我们的文章<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>。</p> </div> <p>这篇指南的其余部分介绍了其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。</p></div></section><section aria-labelledby="浮动"><h2 id="浮动"><a href="#浮动">浮动</a></h2><div class="section-content"><p>把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (<a href="/zh-CN/docs/Web/CSS/float"><code>float</code></a>) 的元素周围环绕。</p> <p><a href="/zh-CN/docs/Web/CSS/float"><code>float</code></a> 属性有四个可能的值：</p> <ul> <li><code>left</code> — 将元素浮动到左侧。</li> <li><code>right</code> — 将元素浮动到右侧。</li> <li><code>none</code> — 默认值，不浮动。</li> <li><code>inherit</code> — 继承父元素的浮动属性。</li> </ul> <p>在下面这个例子当中，我们把一个<code><div></code>元素浮动到左侧，并且给了他一个右侧的<a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a>，把文字推开。这给了我们文字环绕着这个<code><div></code>元素的效果，在现代网页设计当中，这是你唯一需要学会的事情。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { width: 90%; max-width: 900px; margin: 0 auto; } p { line-height: 2; word-spacing: 0.1rem; } .box { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; border-radius: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><h1>Simple float example</h1> <div class="box">Float</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { float: left; width: 150px; height: 150px; margin-right: 30px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="浮动 sample" id="frame_浮动" width="100%" height="600" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="浮动" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>备注：</strong>CSS 浮动的知识会在我们关于 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a>的教程当中被详细地解释。除此之外，如果你想要了解在 Flexbox 和 Grid 布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方式</a>的文章。</p> </div></div></section><section aria-labelledby="定位技术"><h2 id="定位技术"><a href="#定位技术">定位技术</a></h2><div class="section-content"><p>定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。</p> <p>有一些非常有用的技术在特定的布局下依赖于<a href="/zh-CN/docs/Web/CSS/position"><code>position</code></a>属性。同时，理解定位 (positioning) 也能够帮助你理解正常布局流 (normal flow)，理解把一个元素移出正常布局流 (normal flow) 是怎么一回事。</p> <p>有五种主要的定位类型需要我们了解：</p> <ul> <li><strong>静态定位</strong>（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。</li> <li><strong>相对定位</strong>（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。</li> <li><strong>绝对定位</strong>（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <code><html></code> 元素边缘固定，或者相对于该元素的<em>最近被定位祖先元素</em>（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。</li> <li><strong>固定定位</strong>（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。</li> <li><strong>粘性定位</strong>（Sticky positioning）是一种新的定位方式，它会让元素先保持和 <code>position: static</code> 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 <code>position: fixed</code> 一样定位。</li> </ul></div></section><section aria-labelledby="简单定位示例"><h3 id="简单定位示例"><a href="#简单定位示例">简单定位示例</a></h3><div class="section-content"><p>我们将展示一些示例代码来熟悉这些布局技术。这些示例代码都作用在下面这一个相同的 HTML 上：</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><h1>Positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">I am a basic block level element.</p> <p>I am a basic block level element.</p> </code></pre></div> <p>该 HTML 将使用以下 CSS 默认样式：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 500px; margin: 0 auto; } p { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; } </code></pre></div> <p>渲染效果如下：</p><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="简单定位示例 sample" id="frame_简单定位示例" width="100%" height="300" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="简单定位示例" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="相对定位"><h3 id="相对定位"><a href="#相对定位">相对定位</a></h3><div class="section-content"><p>相对定位 (relative positioning) 让你能够把一个正常布局流 (normal flow) 中的元素从它的默认位置按坐标进行相对移动。比如将一个图标往下调一点，以便放置文字。我们可以通过下面的规则添加相对定位来实现效果：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: relative; top: 30px; left: 30px; } </code></pre></div> <p>这里我们给中间段落的<a href="/zh-CN/docs/Web/CSS/position"><code>position</code></a> 一个 <code>relative</code>值——这属性本身不做任何事情，所以我们还添加了<a href="/zh-CN/docs/Web/CSS/top"><code>top</code></a>和<a href="/zh-CN/docs/Web/CSS/left"><code>left</code></a>属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。</p> <p>添加此代码将给出以下结果：</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h1>Relative positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my relatively positioned element.</p> <p>I am a basic block level element.</p> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { width: 500px; margin: 0 auto; } p { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: relative; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="相对定位 sample" id="frame_相对定位" width="100%" height="300" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="相对定位" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="绝对定位"><h3 id="绝对定位"><a href="#绝对定位">绝对定位</a></h3><div class="section-content"><p>绝对定位用于将元素移出正常布局流 (normal flow)，以坐标的形式相对于它的容器定位到 web 页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。</p> <p>回到我们最初的非定位示例，我们可以添加以下的 CSS 规则来实现绝对定位：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: absolute; top: 30px; left: 30px; } </code></pre></div> <p>这里我们给我们的中间段一个<a href="/zh-CN/docs/Web/CSS/position"><code>position</code></a>的 <code>absolute</code>值，并且和前面一样加上 <a href="/zh-CN/docs/Web/CSS/top"><code>top</code></a> 和<a href="/zh-CN/docs/Web/CSS/left"><code>left</code></a> 属性。但是，添加此代码将给出以下结果：</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h1>Absolute positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my absolutely positioned element.</p> <p>I am a basic block level element.</p> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { width: 500px; margin: 0 auto; } p { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: absolute; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="绝对定位 sample" id="frame_绝对定位" width="100%" height="300" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="绝对定位" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。<a href="/zh-CN/docs/Web/CSS/top"><code>top</code></a>和<a href="/zh-CN/docs/Web/CSS/left"><code>left</code></a>属性对绝对位置元素的影响不同于相对位置元素。在这一案例当中，他们没有指定元素相对于原始位置的移动程度。相反，在这一案例当中，它们指定元素应该从页面边界的顶部和左边的距离 (确切地说，是 <code><html></code>元素的距离)。我们也可以修改作为容器的那个元素（在这里是<code><html></code>元素），要了解这方面的知识，参见关于<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位 (positioning)</a>的课程</p> <p>我们现在暂时不讨论固定定位（fixed positioning）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。</p></div></section><section aria-labelledby="固定定位"><h3 id="固定定位"><a href="#固定定位">固定定位</a></h3><div class="section-content"><p>固定定位 (fixed positioning) 同绝对定位 (absolute positioning) 一样，将元素从文档流 (document flow) 当中移出了。但是，定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口 (viewport) 边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。</p> <p>在这个例子里面，我们在 HTML 加了三段很长的文本来使得页面可滚动，又加了一个带有<code>position: fixed</code>的盒子。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> <p>Paragraph 1.</p> <p>Paragraph 2.</p> <p>Paragraph 3.</p> </code></pre></div> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { width: 500px; margin: 0 auto; } .positioned { background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: fixed; top: 30px; left: 30px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="固定定位 sample" id="frame_固定定位" width="100%" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="固定定位" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="粘性定位"><h3 id="粘性定位"><a href="#粘性定位">粘性定位</a></h3><div class="section-content"><p>粘性定位 (sticky positioning) 是最后一种我们能够使用的定位方式。它将默认的静态定位 (static positioning) 和固定定位 (fixed positioning) 相混合。当一个元素被指定了<code>position: sticky</code>时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了<code>position: fixed</code>一样。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <div class="positioned">Sticky</div> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { width: 500px; margin: 0 auto; } .positioned { background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.positioned { position: sticky; top: 30px; left: 30px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="粘性定位 sample" id="frame_粘性定位" width="100%" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="粘性定位" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>备注：</strong>想要发现更多关于定位的信息，请参阅我们的<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>和<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a>文章。</p> </div></div></section><section aria-labelledby="表格布局"><h2 id="表格布局"><a href="#表格布局">表格布局</a></h2><div class="section-content"><p>HTML 表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的 CSS 之前——web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p> <p>一个<a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a>标签之所以能够像表格那样展示，是由于 css 默认给<a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a>标签设置了一组 table 布局属性。当这些属性被应用于排列非<a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a>元素时，这种用法被称为“使用 CSS 表格”。</p> <p>下面这个例子展示了一个这样的用法。使用 CSS 表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持 Flexbox 和 Grid 的浏览器。</p> <p>让我们来看一个例子。首先，创建 HTML 表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在<a href="/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a>中。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <p>First of all, tell us your name and age.</p> <div> <label for="fname">First name:</label> <input type="text" id="fname" /> </div> <div> <label for="lname">Last name:</label> <input type="text" id="lname" /> </div> <div> <label for="age">Age:</label> <input type="text" id="age" /> </div> </form> </code></pre></div> <p>现在，我们例子中的 CSS。除了使用 <a href="/zh-CN/docs/Web/CSS/display"><code>display</code></a> 属性外，大多数 CSS 都是相当普通的。 <a href="/zh-CN/docs/Web/HTML/Element/form"><code><form></code></a>, <a href="/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a>, <a href="/zh-CN/docs/Web/HTML/Element/label"><code><label></code></a>和<a href="/zh-CN/docs/Web/HTML/Element/input"><code><input></code></a>被告知要分别显示表、表行和表单元——基本上，它们会像 HTML 表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。</p> <p>你会注意到标题段落已经给出了 <code>display: table-caption;</code>——这使得它看起来就像一个表格 <a href="/zh-CN/docs/Web/HTML/Element/caption"><code><caption></code></a>——同时出于设计需要，我们通过 <code>caption-side: bottom;</code> 告诉标题应该展示在表格的底部，即使这个 <a href="/zh-CN/docs/Web/HTML/Element/p"><code><p></code></a> 标记在源码中是在 <code><input></code> 之前。这就能让你有一点灵活的弹性。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>html { font-family: sans-serif; } form { display: table; margin: 0 auto; } form div { display: table-row; } form label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; } </code></pre></div> <p>结果如下：</p><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="表格布局 sample" id="frame_表格布局" width="100%" height="170" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="表格布局" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>你可以在 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html" class="external" target="_blank">css-tables-example.html</a> 看到预览版 (也可以见<a href="https://github.com/mdn/learning-area/blob/main/css/styling-boxes/box-model-recap/css-tables-example.html" class="external" target="_blank">源码</a>)</p></div></section><section aria-labelledby="多列布局"><h2 id="多列布局"><a href="#多列布局">多列布局</a></h2><div class="section-content"><p>多列布局模组给了我们一种把内容按列排序的方式，就像文本在报纸上排列那样。由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。</p> <p>要把一个块转变成多列容器 (multicol container)，我们可以使用 <a href="/zh-CN/docs/Web/CSS/column-count"><code>column-count</code></a>属性来告诉浏览器我们需要多少列，也可以使用<a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/CSS/column-width"><code>column-width</code></a>来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。</p> <p>在下面这个例子中，我们从一个 class 为<code>container</code>的<code><div></code>容器元素里边的一块 HTML 开始。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="container"> <h1>Multi-column layout</h1> <p>Paragraph 1.</p> <p>Paragraph 2.</p> </div> </code></pre></div> <p>我们指定了该容器的<code>column-width</code>为 200 像素，这让浏览器创建了尽可能多的 200 像素的列来填充这一容器。接着他们共同使用剩余的空间来伸展自己的宽度。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="container"> <h1>Multi-column Layout</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>body { max-width: 800px; margin: 0 auto; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.container { column-width: 200px; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="多列布局 sample" id="frame_多列布局" width="100%" height="200" src="about:blank" data-live-path="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction" data-live-id="多列布局" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>本文提供了关于你应该了解的所有布局技术的简要概述。阅读更多关于每一项技术的信息！</p><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/CSS/CSS_layout"><span class="button-wrap"> 概述：CSS 布局</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow"><span class="button-wrap"> 下一页 </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-07-26T11:49:59.000Z">2024年7月26日</time> by <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/css/css_layout/introduction/index.md?plain=1" title="Folder: zh-cn/learn/css/css_layout/introduction (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FCSS%2FCSS_layout%2FIntroduction&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn%2Fcss%2Fcss_layout%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FCSS%2FCSS_layout%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn%2Fcss%2Fcss_layout%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fa134c27248aeeb1cdd9d9be0a525aec4e008bf5d%0A*+Document+last+modified%3A+2024-07-26T11%3A49%3A59.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"介绍 CSS 布局","mdn_url":"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction","locale":"zh-CN","native":"中文 (简体)","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">Web 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">发布你的网站</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">万维网是如何工作的</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/HTML\">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML\">HTML 简介</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">HTML 调试</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding\">多媒体与嵌入</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">从 object 到 iframe——其他嵌入技术</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">向 web 中添加矢量图形</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">响应式图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Tables\">HTML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Advanced\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data\">作业：构建行星数据</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/CSS\">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps\">CSS 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS\">什么是 CSS?</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS 的组成</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page\">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks\">CSS 构建</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">类型、类和 ID 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers\">层叠层</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">处理不同方向的文本</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">高级区块效果</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Organizing\">组织 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text\">为文本添加样式（样式化文本）</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li><details open=\"\"><summary>CSS 排版</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout\">CSS 布局</a></li><li><em><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" aria-current=\"page\">介绍 CSS 布局</a></em></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow\">常规流布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">多列布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">传统的布局方法</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">支持旧浏览器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/JavaScript\">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps\">JavaScript 第一步</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator\">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks\">创建 JavaScript 代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery\">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects\">JavaScript 对象入门</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous\">异步 JavaScript</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">workers 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs\">客户端 Web API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">操作文档</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">第三方 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">客户端存储</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单构建块</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls\">如何构建自定义表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript\">使用 JavaScript 发送表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">表单控件兼容性列表</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Performance\">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Performance\">Web 性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/MathML\">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps\">MathML 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Getting_started\">MathML 使用入门</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Text_containers\">MathML 文本容器</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML 分数和根号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Scripts\">MathML 附加符号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Tables\">MathML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">三个著名的数学公式</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/../Games\">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href=\"/zh-CN/docs/Games/Introduction\">Web 游戏开发简介</a></li><li><a href=\"/zh-CN/docs/Games/Techniques\">游戏开发技术</a></li><li><a href=\"/zh-CN/docs/Games/Tutorials\">教程</a></li><li><a href=\"/zh-CN/docs/Games/Publishing_games\">发布游戏</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Tools_and_testing\">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">理解客户端 web 开发工具</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">命令行速成课</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">框架的主要特性</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">组件化我们的 React App</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">开始使用 Vue</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">创建第一个 Vue 组件</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">渲染 Vue 组件列表</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">使用 CSS 为 Vue 组件添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Vue 中的计算属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">使用 Vue 模板引用进行焦点管理</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Svelte 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Svelte 中的动态行为：变量和属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">将我们的 Svelte 应用组件化</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">使用 Svelte store</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">Svelte 对 TypeScript 的支持</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Angular 入门</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Beginning our Angular todo list app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling our Angular app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Creating an item component</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtering our to-do items</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/GitHub\">Git 和 GitHub</a></li></ol></details></li><li><details><summary>跨浏览器测试</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing\">跨浏览器测试</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">处理常见的 JavaScript 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Server-side\">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps\">服务端网站编程的第一步</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Django\">Django Web 框架 (python)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs\">Express Web 框架（Node.js/JavaScript）</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment\">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Common_questions\">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href=\"/zh-CN/docs/Learn/Common_questions\">常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Howto\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Howto\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Howto\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n \n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/CSS/CSS_layout\"><span class=\"button-wrap\"> 概述：CSS 布局</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>\n<p>本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的<a href=\"/zh-CN/docs/Web/CSS/display\"><code>display</code></a>值——并介绍我们将在本模块中使用的一些概念。</p>\n<figure class=\"table-container\"><table class=\"learn-box standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>对 HTML 有一些基本的了解 (学习“<a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML\">HTML 介绍</a>”), 并且理解 CSS 的工作原理 (学习“<a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS 介绍</a>”).</td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>\n 对 CSS\n 页面布局技术有一个总体的了解。每种技术都能够在后面的教程中获取到更加详细的信息。\n </td>\n </tr>\n </tbody>\n</table></figure>\n<p>CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面<a href=\"/zh-CN/docs/Web/CSS/Layout_mode\">布局技术</a>的细节：</p>\n<ul>\n <li>正常布局流</li>\n <li><a href=\"/zh-CN/docs/Web/CSS/display\"><code>display</code></a>属性</li>\n <li>弹性盒子</li>\n <li>网格</li>\n <li>浮动</li>\n <li>定位</li>\n <li>CSS 表格布局</li>\n <li>多列布局</li>\n</ul>\n<p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p>"}},{"type":"prose","value":{"id":"正常布局流","title":"正常布局流","isH3":false,"content":"<p>正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。让我们快速地看一个 HTML 的例子：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><p>I love my cat.</p>\n\n<ul>\n <li>Buy cat food</li>\n <li>Exercise</li>\n <li>Cheer up friend</li>\n</ul>\n\n<p>The end!</p>\n</code></pre></div>\n<p>默认情况下，浏览器的显示如下：</p><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"正常布局流 sample\" id=\"frame_正常布局流\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"正常布局流\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>注意，HTML 元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p>\n<p>出现在另一个元素下面的元素被描述为<strong>块</strong>元素，与出现在另一个元素旁边的<strong>内联元素</strong>不同，内联元素就像段落中的单个单词一样。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p>\n</div>\n<p>当你使用 css 创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的 Html 文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。</p>\n<p>下列布局技术会覆盖默认的布局行为：</p>\n<ul>\n <li><strong><a href=\"/zh-CN/docs/Web/CSS/display\"><code>display</code></a></strong> 属性 — 标准的 value，比如<code>block</code>, <code>inline</code> 或者 <code>inline-block</code> 元素在正常布局流中的表现形式 (见 <a href=\"/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes\">Types of CSS boxes</a>). 接着是全新的布局方式，通过设置<code>display</code>的值，比如 <a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Grids\">CSS Grid</a> 和 <a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a>.</li>\n <li><strong>浮动</strong>——应用 <strong><a href=\"/zh-CN/docs/Web/CSS/float\"><code>float</code></a></strong> 值，诸如 <code>left</code> 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。</li>\n <li><strong><a href=\"/zh-CN/docs/Web/CSS/position\"><code>position</code></a></strong> 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 <code>static</code> ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。</li>\n <li><strong>表格布局</strong>— 表格的布局方式可以用在非表格内容上，可以使用<code>display: table</code>和相关属性在非表元素上使用。</li>\n <li><strong>多列布局</strong>— 这个 <a href=\"/zh-CN/docs/Web/CSS/CSS_multicol_layout\">Multi-column layout</a> 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。</li>\n</ul>"}},{"type":"prose","value":{"id":"display_属性","title":"display 属性","isH3":false,"content":"<p>在 css 中实现页面布局的主要方法是设定<code>display</code>属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个<code>display</code>的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是<code>display:block</code>。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为<a href=\"/zh-CN/docs/Web/HTML/Element/a\"><code><a></code></a>元素默认为<code>display:inline</code>。</p>\n<p>你可以更改此默认显示行为。例如，<a href=\"/zh-CN/docs/Web/HTML/Element/li\"><code><li></code></a>元素默认为<code>display:block</code>，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为<code>inline</code>，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，你可以更改任何元素的<code>display</code>值，这意味着你可以根据它们的语义选择 html 元素，而不必关心它们的外观。他们的样子是你可以改变的。</p>\n<p>除了可以通过将一些内容从<code>block</code>转换为<code>inline</code>（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以<code>display</code>值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是 <code>display: flex</code> 和 <code>display: grid</code>。</p>"}},{"type":"prose","value":{"id":"弹性盒子","title":"弹性盒子","isH3":false,"content":"<p>Flexbox 是 CSS 弹性盒子布局模块（<a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout\">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照 flex 进行布局。我们来看一个例子。</p>"}},{"type":"prose","value":{"id":"设置_displayflex","title":"设置 display:flex","isH3":true,"content":"<p>下面这些 HTML 标记描述了一个 class 为<code>wrapper</code>的容器元素，它的内部有三个<code><div></code>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。</p>\n<p>现在，当我们把<code>display: flex</code>添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了<em>flex 项 (flex items)</em>，按照 flex 容器（也就是它们的父元素）的一些 flex 相关的初值进行 flex 布局：它们整整齐齐排成一行，是因为父元素上<code>flex-direction</code>的初值是<code>row</code>。它们全都被拉伸至和最高的元素高度相同，是因为父元素上<code>align-items</code>属性的初值是<code>stretch</code>。这就意味着所有的子元素都会被拉伸到它们的 flex 容器的高度，在这个案例里就是所有 flex 项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper > div {\n border-radius: 5px;\n background-color: rgb(207, 232, 220);\n padding: 1em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: flex;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n</div>\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置 display:flex sample\" id=\"frame_设置_displayflex\" width=\"300\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"设置_displayflex\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置_flex_属性","title":"设置 flex 属性","isH3":true,"content":"<p>除了上述可以被应用到 flex 容器的属性以外，还有很多属性可以被应用到 flex 项 (flex items) 上面。这些属性可以改变 flex 项在 flex 布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间。</p>\n<p>作为一个简单的例子，我们可以在我们的所有子元素上添加<a href=\"/zh-CN/docs/Web/CSS/flex\"><code>flex</code></a> 属性，并赋值为<code>1</code>，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。除此之外，如果你在 HTML 标记中添加了一个新元素，那么它们也会变得更小，来为新元素创造空间——不管怎样，最终它们会调整自己直到占用相同宽度的空间。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper > div {\n border-radius: 5px;\n background-color: rgb(207, 232, 220);\n padding: 1em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: flex;\n}\n\n.wrapper > div {\n flex: 1;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n</div>\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置 flex 属性 sample\" id=\"frame_设置_flex_属性\" width=\"300\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"设置_flex_属性\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>为了找到更多关于 Flexbox 的信息，看看我们的 <a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a> 的文章。</p>\n</div>"}},{"type":"prose","value":{"id":"grid_布局","title":"Grid 布局","isH3":false,"content":"<p>Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。</p>"}},{"type":"prose","value":{"id":"设置_display_grid","title":"设置 display: grid","isH3":true,"content":"<p>同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：<code>display: grid</code>。下面的例子使用了与 flex 例子类似的 HTML 标记，描述了一个容器和若干子元素。除了使用<code>display:grid</code>，我们还分别使用 <a href=\"/zh-CN/docs/Web/CSS/grid-template-rows\"><code>grid-template-rows</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/grid-template-columns\"><code>grid-template-columns</code></a> 两个属性定义了一些行和列的轨道。定义了三个<code>1fr</code>的列，还有两个<code>100px</code>的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper > div {\n border-radius: 5px;\n background-color: rgb(207, 232, 220);\n padding: 1em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 100px 100px;\n grid-gap: 10px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n <div class=\"box5\">Five</div>\n <div class=\"box6\">Six</div>\n</div>\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置 display: grid sample\" id=\"frame_设置_display_grid\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"设置_display_grid\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"在网格内放置元素","title":"在网格内放置元素","isH3":true,"content":"<p>一旦你拥有了一个 grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的 grid，但是这一次我们只有三个子元素。我们利用 <a href=\"/zh-CN/docs/Web/CSS/grid-column\"><code>grid-column</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/grid-row\"><code>grid-row</code></a> 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper > div {\n border-radius: 5px;\n background-color: rgb(207, 232, 220);\n padding: 1em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: 100px 100px;\n grid-gap: 10px;\n}\n\n.box1 {\n grid-column: 2 / 4;\n grid-row: 1;\n}\n\n.box2 {\n grid-column: 1;\n grid-row: 1 / 3;\n}\n\n.box3 {\n grid-row: 2;\n grid-column: 3;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n</div>\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"在网格内放置元素 sample\" id=\"frame_在网格内放置元素\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"在网格内放置元素\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>这两个例子只是展示了 grid 布局的冰山一角，要深入了解 grid 布局，请参阅我们的文章<a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Grids\">Grid Layout</a>。</p>\n</div>\n<p>这篇指南的其余部分介绍了其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。</p>"}},{"type":"prose","value":{"id":"浮动","title":"浮动","isH3":false,"content":"<p>把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (<a href=\"/zh-CN/docs/Web/CSS/float\"><code>float</code></a>) 的元素周围环绕。</p>\n<p><a href=\"/zh-CN/docs/Web/CSS/float\"><code>float</code></a> 属性有四个可能的值：</p>\n<ul>\n <li><code>left</code> — 将元素浮动到左侧。</li>\n <li><code>right</code> — 将元素浮动到右侧。</li>\n <li><code>none</code> — 默认值，不浮动。</li>\n <li><code>inherit</code> — 继承父元素的浮动属性。</li>\n</ul>\n<p>在下面这个例子当中，我们把一个<code><div></code>元素浮动到左侧，并且给了他一个右侧的<a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a>，把文字推开。这给了我们文字环绕着这个<code><div></code>元素的效果，在现代网页设计当中，这是你唯一需要学会的事情。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n width: 90%;\n max-width: 900px;\n margin: 0 auto;\n}\n\np {\n line-height: 2;\n word-spacing: 0.1rem;\n}\n\n.box {\n background-color: rgb(207, 232, 220);\n border: 2px solid rgb(79, 185, 227);\n padding: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h1>Simple float example</h1>\n\n<div class=\"box\">Float</div>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam\n dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus\n ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus\n laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,\n tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus\n neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat\n volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros\n pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec\n lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.\n</p>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n float: left;\n width: 150px;\n height: 150px;\n margin-right: 30px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"浮动 sample\" id=\"frame_浮动\" width=\"100%\" height=\"600\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"浮动\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>CSS 浮动的知识会在我们关于 <a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Floats\">浮动</a>的教程当中被详细地解释。除此之外，如果你想要了解在 Flexbox 和 Grid 布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于<a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">传统布局方式</a>的文章。</p>\n</div>"}},{"type":"prose","value":{"id":"定位技术","title":"定位技术","isH3":false,"content":"<p>定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。</p>\n<p>有一些非常有用的技术在特定的布局下依赖于<a href=\"/zh-CN/docs/Web/CSS/position\"><code>position</code></a>属性。同时，理解定位 (positioning) 也能够帮助你理解正常布局流 (normal flow)，理解把一个元素移出正常布局流 (normal flow) 是怎么一回事。</p>\n<p>有五种主要的定位类型需要我们了解：</p>\n<ul>\n <li><strong>静态定位</strong>（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。</li>\n <li><strong>相对定位</strong>（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。</li>\n <li><strong>绝对定位</strong>（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <code><html></code> 元素边缘固定，或者相对于该元素的<em>最近被定位祖先元素</em>（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。</li>\n <li><strong>固定定位</strong>（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。</li>\n <li><strong>粘性定位</strong>（Sticky positioning）是一种新的定位方式，它会让元素先保持和 <code>position: static</code> 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 <code>position: fixed</code> 一样定位。</li>\n</ul>"}},{"type":"prose","value":{"id":"简单定位示例","title":"简单定位示例","isH3":true,"content":"<p>我们将展示一些示例代码来熟悉这些布局技术。这些示例代码都作用在下面这一个相同的 HTML 上：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h1>Positioning</h1>\n\n<p>I am a basic block level element.</p>\n<p class=\"positioned\">I am a basic block level element.</p>\n<p>I am a basic block level element.</p>\n</code></pre></div>\n<p>该 HTML 将使用以下 CSS 默认样式：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background-color: rgb(207, 232, 220);\n border: 2px solid rgb(79, 185, 227);\n padding: 10px;\n margin: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<p>渲染效果如下：</p><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"简单定位示例 sample\" id=\"frame_简单定位示例\" width=\"100%\" height=\"300\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"简单定位示例\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"相对定位","title":"相对定位","isH3":true,"content":"<p>相对定位 (relative positioning) 让你能够把一个正常布局流 (normal flow) 中的元素从它的默认位置按坐标进行相对移动。比如将一个图标往下调一点，以便放置文字。我们可以通过下面的规则添加相对定位来实现效果：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: relative;\n top: 30px;\n left: 30px;\n}\n</code></pre></div>\n<p>这里我们给中间段落的<a href=\"/zh-CN/docs/Web/CSS/position\"><code>position</code></a> 一个 <code>relative</code>值——这属性本身不做任何事情，所以我们还添加了<a href=\"/zh-CN/docs/Web/CSS/top\"><code>top</code></a>和<a href=\"/zh-CN/docs/Web/CSS/left\"><code>left</code></a>属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。</p>\n<p>添加此代码将给出以下结果：</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h1>Relative positioning</h1>\n\n<p>I am a basic block level element.</p>\n<p class=\"positioned\">This is my relatively positioned element.</p>\n<p>I am a basic block level element.</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background-color: rgb(207, 232, 220);\n border: 2px solid rgb(79, 185, 227);\n padding: 10px;\n margin: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: relative;\n background: rgba(255, 84, 104, 0.3);\n border: 2px solid rgb(255, 84, 104);\n top: 30px;\n left: 30px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"相对定位 sample\" id=\"frame_相对定位\" width=\"100%\" height=\"300\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"相对定位\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"绝对定位","title":"绝对定位","isH3":true,"content":"<p>绝对定位用于将元素移出正常布局流 (normal flow)，以坐标的形式相对于它的容器定位到 web 页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。</p>\n<p>回到我们最初的非定位示例，我们可以添加以下的 CSS 规则来实现绝对定位：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: absolute;\n top: 30px;\n left: 30px;\n}\n</code></pre></div>\n<p>这里我们给我们的中间段一个<a href=\"/zh-CN/docs/Web/CSS/position\"><code>position</code></a>的 <code>absolute</code>值，并且和前面一样加上 <a href=\"/zh-CN/docs/Web/CSS/top\"><code>top</code></a> 和<a href=\"/zh-CN/docs/Web/CSS/left\"><code>left</code></a> 属性。但是，添加此代码将给出以下结果：</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h1>Absolute positioning</h1>\n\n<p>I am a basic block level element.</p>\n<p class=\"positioned\">This is my absolutely positioned element.</p>\n<p>I am a basic block level element.</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background-color: rgb(207, 232, 220);\n border: 2px solid rgb(79, 185, 227);\n padding: 10px;\n margin: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: absolute;\n background: rgba(255, 84, 104, 0.3);\n border: 2px solid rgb(255, 84, 104);\n top: 30px;\n left: 30px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"绝对定位 sample\" id=\"frame_绝对定位\" width=\"100%\" height=\"300\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"绝对定位\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。<a href=\"/zh-CN/docs/Web/CSS/top\"><code>top</code></a>和<a href=\"/zh-CN/docs/Web/CSS/left\"><code>left</code></a>属性对绝对位置元素的影响不同于相对位置元素。在这一案例当中，他们没有指定元素相对于原始位置的移动程度。相反，在这一案例当中，它们指定元素应该从页面边界的顶部和左边的距离 (确切地说，是 <code><html></code>元素的距离)。我们也可以修改作为容器的那个元素（在这里是<code><html></code>元素），要了解这方面的知识，参见关于<a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Positioning\">定位 (positioning)</a>的课程</p>\n<p>我们现在暂时不讨论固定定位（fixed positioning）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。</p>"}},{"type":"prose","value":{"id":"固定定位","title":"固定定位","isH3":true,"content":"<p>固定定位 (fixed positioning) 同绝对定位 (absolute positioning) 一样，将元素从文档流 (document flow) 当中移出了。但是，定位的坐标不会应用于\"容器\"边框来计算元素的位置，而是会应用于视口 (viewport) 边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。</p>\n<p>在这个例子里面，我们在 HTML 加了三段很长的文本来使得页面可滚动，又加了一个带有<code>position: fixed</code>的盒子。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h1>Fixed positioning</h1>\n\n<div class=\"positioned\">Fixed</div>\n\n<p>Paragraph 1.</p>\n<p>Paragraph 2.</p>\n<p>Paragraph 3.</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h1>Fixed positioning</h1>\n\n<div class=\"positioned\">Fixed</div>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam\n dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus\n ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus\n laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,\n tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus\n neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat\n volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros\n pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec\n lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.\n</p>\n\n<p>\n Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada\n ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed\n est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus\n tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus\n sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis\n vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n</p>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam\n dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus\n ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus\n laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,\n tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus\n neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat\n volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros\n pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec\n lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.\n</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n width: 500px;\n margin: 0 auto;\n}\n\n.positioned {\n background: rgba(255, 84, 104, 0.3);\n border: 2px solid rgb(255, 84, 104);\n padding: 10px;\n margin: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: fixed;\n top: 30px;\n left: 30px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"固定定位 sample\" id=\"frame_固定定位\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"固定定位\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"粘性定位","title":"粘性定位","isH3":true,"content":"<p>粘性定位 (sticky positioning) 是最后一种我们能够使用的定位方式。它将默认的静态定位 (static positioning) 和固定定位 (fixed positioning) 相混合。当一个元素被指定了<code>position: sticky</code>时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了<code>position: fixed</code>一样。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h1>Sticky positioning</h1>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam\n dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus\n ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus\n laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,\n tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus\n neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat\n volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros\n pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec\n lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.\n</p>\n\n<div class=\"positioned\">Sticky</div>\n\n<p>\n Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada\n ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed\n est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus\n tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus\n sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis\n vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n</p>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam\n dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus\n ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus\n laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,\n tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus\n neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat\n volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros\n pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec\n lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.\n</p>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n width: 500px;\n margin: 0 auto;\n}\n\n.positioned {\n background: rgba(255, 84, 104, 0.3);\n border: 2px solid rgb(255, 84, 104);\n padding: 10px;\n margin: 10px;\n border-radius: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.positioned {\n position: sticky;\n top: 30px;\n left: 30px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"粘性定位 sample\" id=\"frame_粘性定位\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"粘性定位\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>想要发现更多关于定位的信息，请参阅我们的<a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a>和<a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples\">Practical positioning examples</a>文章。</p>\n</div>"}},{"type":"prose","value":{"id":"表格布局","title":"表格布局","isH3":false,"content":"<p>HTML 表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的 CSS 之前——web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p>\n<p>一个<a href=\"/zh-CN/docs/Web/HTML/Element/table\"><code><table></code></a>标签之所以能够像表格那样展示，是由于 css 默认给<a href=\"/zh-CN/docs/Web/HTML/Element/table\"><code><table></code></a>标签设置了一组 table 布局属性。当这些属性被应用于排列非<a href=\"/zh-CN/docs/Web/HTML/Element/table\"><code><table></code></a>元素时，这种用法被称为“使用 CSS 表格”。</p>\n<p>下面这个例子展示了一个这样的用法。使用 CSS 表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持 Flexbox 和 Grid 的浏览器。</p>\n<p>让我们来看一个例子。首先，创建 HTML 表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在<a href=\"/zh-CN/docs/Web/HTML/Element/div\"><code><div></code></a>中。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <p>First of all, tell us your name and age.</p>\n <div>\n <label for=\"fname\">First name:</label>\n <input type=\"text\" id=\"fname\" />\n </div>\n <div>\n <label for=\"lname\">Last name:</label>\n <input type=\"text\" id=\"lname\" />\n </div>\n <div>\n <label for=\"age\">Age:</label>\n <input type=\"text\" id=\"age\" />\n </div>\n</form>\n</code></pre></div>\n<p>现在，我们例子中的 CSS。除了使用 <a href=\"/zh-CN/docs/Web/CSS/display\"><code>display</code></a> 属性外，大多数 CSS 都是相当普通的。 <a href=\"/zh-CN/docs/Web/HTML/Element/form\"><code><form></code></a>, <a href=\"/zh-CN/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/zh-CN/docs/Web/HTML/Element/label\"><code><label></code></a>和<a href=\"/zh-CN/docs/Web/HTML/Element/input\"><code><input></code></a>被告知要分别显示表、表行和表单元——基本上，它们会像 HTML 表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。</p>\n<p>你会注意到标题段落已经给出了 <code>display: table-caption;</code>——这使得它看起来就像一个表格 <a href=\"/zh-CN/docs/Web/HTML/Element/caption\"><code><caption></code></a>——同时出于设计需要，我们通过 <code>caption-side: bottom;</code> 告诉标题应该展示在表格的底部，即使这个 <a href=\"/zh-CN/docs/Web/HTML/Element/p\"><code><p></code></a> 标记在源码中是在 <code><input></code> 之前。这就能让你有一点灵活的弹性。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>html {\n font-family: sans-serif;\n}\n\nform {\n display: table;\n margin: 0 auto;\n}\n\nform div {\n display: table-row;\n}\n\nform label,\nform input {\n display: table-cell;\n margin-bottom: 10px;\n}\n\nform label {\n width: 200px;\n padding-right: 5%;\n text-align: right;\n}\n\nform input {\n width: 300px;\n}\n\nform p {\n display: table-caption;\n caption-side: bottom;\n width: 300px;\n color: #999;\n font-style: italic;\n}\n</code></pre></div>\n<p>结果如下：</p><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"表格布局 sample\" id=\"frame_表格布局\" width=\"100%\" height=\"170\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"表格布局\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>你可以在 <a href=\"https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html\" class=\"external\" target=\"_blank\">css-tables-example.html</a> 看到预览版 (也可以见<a href=\"https://github.com/mdn/learning-area/blob/main/css/styling-boxes/box-model-recap/css-tables-example.html\" class=\"external\" target=\"_blank\">源码</a>)</p>"}},{"type":"prose","value":{"id":"多列布局","title":"多列布局","isH3":false,"content":"<p>多列布局模组给了我们一种把内容按列排序的方式，就像文本在报纸上排列那样。由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。</p>\n<p>要把一个块转变成多列容器 (multicol container)，我们可以使用 <a href=\"/zh-CN/docs/Web/CSS/column-count\"><code>column-count</code></a>属性来告诉浏览器我们需要多少列，也可以使用<a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Web/CSS/column-width\"><code>column-width</code></a>来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。</p>\n<p>在下面这个例子中，我们从一个 class 为<code>container</code>的<code><div></code>容器元素里边的一块 HTML 开始。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"container\">\n <h1>Multi-column layout</h1>\n\n <p>Paragraph 1.</p>\n <p>Paragraph 2.</p>\n</div>\n</code></pre></div>\n<p>我们指定了该容器的<code>column-width</code>为 200 像素，这让浏览器创建了尽可能多的 200 像素的列来填充这一容器。接着他们共同使用剩余的空间来伸展自己的宽度。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"container\">\n <h1>Multi-column Layout</h1>\n\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus\n aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,\n pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at\n ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer\n ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur\n vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.\n Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus\n sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.\n Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,\n eget fermentum sapien.\n </p>\n\n <p>\n Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada\n ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed\n est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus\n tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies\n lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis\n vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n </p>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>body {\n max-width: 800px;\n margin: 0 auto;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.container {\n column-width: 200px;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"多列布局 sample\" id=\"frame_多列布局\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\" data-live-id=\"多列布局\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>本文提供了关于你应该了解的所有布局技术的简要概述。阅读更多关于每一项技术的信息！</p><ul class=\"prev-next\">\n \n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/CSS/CSS_layout\"><span class=\"button-wrap\"> 概述：CSS 布局</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>"}}],"toc":[{"text":"正常布局流","id":"正常布局流"},{"text":"display 属性","id":"display_属性"},{"text":"弹性盒子","id":"弹性盒子"},{"text":"Grid 布局","id":"grid_布局"},{"text":"浮动","id":"浮动"},{"text":"定位技术","id":"定位技术"},{"text":"表格布局","id":"表格布局"},{"text":"多列布局","id":"多列布局"},{"text":"总结","id":"总结"}],"summary":"本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的display值——并介绍我们将在本模块中使用的一些概念。","popularity":0.0118,"modified":"2024-07-26T11:49:59.000Z","other_translations":[{"locale":"de","title":"Einführung in CSS Layout","native":"Deutsch"},{"locale":"en-US","title":"Introduction to CSS layout","native":"English (US)"},{"locale":"es","title":"Introducción al diseño en CSS","native":"Español"},{"locale":"fr","title":"Introduction à la mise en page en CSS","native":"Français"},{"locale":"ja","title":"CSS レイアウト入門","native":"日本語"},{"locale":"ko","title":"CSS 레이아웃 입문서","native":"한국어"},{"locale":"pt-BR","title":"Introdução ao leiaute com CSS","native":"Português (do Brasil)"},{"locale":"ru","title":"Введение в CSS вёрстку","native":"Русский"}],"pageType":"unknown","source":{"folder":"zh-cn/learn/css/css_layout/introduction","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/css/css_layout/introduction/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/a134c27248aeeb1cdd9d9be0a525aec4e008bf5d","filename":"index.md"},"short_title":"介绍 CSS 布局","parents":[{"uri":"/zh-CN/docs/Learn","title":"学习 Web 开发"},{"uri":"/zh-CN/docs/Learn/CSS","title":"学习使用 CSS 为 HTML 添加样式"},{"uri":"/zh-CN/docs/Learn/CSS/CSS_layout","title":"CSS 布局"},{"uri":"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction","title":"介绍 CSS 布局"}],"pageTitle":"介绍 CSS 布局 - 学习 Web 开发 | MDN","noIndexing":false}}</script></body></html>