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>盒模型 - 学习 Web 开发 | MDN</title><link rel="alternate" title="The box model" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="en"/><link rel="alternate" title="Das Box-Modell" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="de"/><link rel="alternate" title="El modelo de caja" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="es"/><link rel="alternate" title="Le modèle de boîte" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="fr"/><link rel="alternate" title="ボックスモデル" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="ja"/><link rel="alternate" title="박스 모델" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="ko"/><link rel="alternate" title="The box model" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="pt"/><link rel="alternate" title="Блочная модель" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Styling_basics/Box_model" hrefLang="ru"/><link rel="alternate" title="盒模型" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model" 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 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model"/><meta property="og:title" content="盒模型 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。"/><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_web_development/Core/Styling_basics/Box_model"/><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.f565372a.js"></script><link href="/static/css/main.3d9e7a02.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=" "><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">Build web projects usable for all</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="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/zh-CN/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn_web_development" 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_web_development" 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_web_development/Core/Structuring_content" 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_web_development/Core/Styling_basics" 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_web_development/Core/Scripting" 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/Learn_web_development/Core/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_web_development%2FCore%2FStyling_basics%2FBox_model" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBox_model" 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_web_development" 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="/en-US/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics" 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_web_development/Core/Styling_basics/Box_model" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">盒模型</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="en-US" href="/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model" 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="es" href="/es/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Styling_basics/Box_model" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Styling_basics/Box_model" 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"><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="#外部显示类型">外部显示类型</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="#什么是_css_盒模型？">什么是 CSS 盒模型？</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="#使用_display_inline-block">使用 display: inline-block</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_web_development/Getting_started">入门模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup">配置环境</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">网页、网站、网络服务器和搜索引擎的区别是什么？</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors" class="only-in-en-us">Code editors</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">命令行速成课</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website">你的第一个网站</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">发布你的网站</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards" class="only-in-en-us">Web 标准</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">万维网是如何工作的</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Web 和 Web 标准</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites" class="only-in-en-us">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills" class="only-in-en-us">软性技能</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning" class="only-in-en-us">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork" class="only-in-en-us">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes" class="only-in-en-us">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews" class="only-in-en-us">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core" class="only-in-en-us">核心模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">使用 HTML 构建内容</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">强调与重要性</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists" class="only-in-en-us">Lists</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links">创建超链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">构建网页内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla 欢迎页面</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">作业：构建行星数据</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms" class="only-in-en-us">Forms and buttons in HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML 调试</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 样式基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">运用你的新知识</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators">关系选择器</a></li><li><em><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model" aria-current="page">盒模型</a></em></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">一个漂亮的盒子</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling">CSS 文本样式</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout">CSS 排版</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Scripting">使用 JavaScript 动态编码</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator">笑话生成器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Loops">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery">图片库</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM 脚本简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">处理常见的 JavaScript 问题</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript 架构和库</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">框架的主要特性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components">组件化我们的 React App</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state" class="only-in-en-us">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering" class="only-in-en-us">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility" class="only-in-en-us">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources" class="only-in-en-us">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility">无障碍</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers" class="only-in-en-us">为开发人员设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Version_control">版本控制</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions" class="only-in-en-us">扩展模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs">客户端 Web API</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">客户端存储</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">第三方 API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS">异步 JavaScript</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">worker 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">序列动画</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms">Web 表单</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools">理解客户端工具</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side">服务端网站</a></summary><ol><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps">服务端基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django">Django web 框架（Python）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web 框架（Node.js）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance">Web 性能</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing">测试</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate" class="only-in-en-us">CSS 变换与动画化</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy" class="only-in-en-us">安全与隐私</a></li><li class="section">更多资源</li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Howto">如何解决常见问题</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility">设计与无障碍</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">关于</a></li><li><a href="/en-US/docs/Learn_web_development/Educators" class="only-in-en-us">面向教育工作者的资源</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog" class="only-in-en-us">更新日志</a></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="#外部显示类型">外部显示类型</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="#什么是_css_盒模型？">什么是 CSS 盒模型？</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="#使用_display_inline-block">使用 display: inline-block</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>盒模型</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> 概述：CSS 构建</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts"><span class="button-wrap"> 下一页 </span></a></li></ul> <p>在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提：</th> <td> <p> <a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装基本的软件</a>，<a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">文件处理</a>基本知识，HTML 基础知识（如果不了解 HTML，请移步 <a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">HTML 入门</a>），了解 CSS 的工作原理（如果不了解 CSS，请移步 <a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 入门</a>） </p> </td> </tr> <tr> <th scope="row">目标：</th> <td> 学习盒模型的基本理论、构成以及如何切换到替代盒模型。 </td> </tr> </tbody> </table></figure></div><section aria-labelledby="区块盒子与行内盒子"><h2 id="区块盒子与行内盒子"><a href="#区块盒子与行内盒子">区块盒子与行内盒子</a></h2><div class="section-content"><p>在 CSS 中，我们有几种类型的盒子，一般分为<strong>区块盒子</strong>（block boxes）和<strong>行内盒子</strong>（inline boxes）。类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有<strong>内部显示</strong>（inner display type）和<strong>外部显示</strong>（outer display type）两种类型。</p> <p>一般来说，可以使用 <a href="/zh-CN/docs/Web/CSS/display"><code>display</code></a> 属性为显示类型设置各种值，该属性可以有多种值。</p></div></section><section aria-labelledby="外部显示类型"><h2 id="外部显示类型"><a href="#外部显示类型">外部显示类型</a></h2><div class="section-content"><p>一个拥有 <code>block</code> 外部显示类型的盒子会表现出以下行为：</p> <ul> <li>盒子会产生换行。</li> <li><a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a> 和 <a href="/zh-CN/docs/Web/CSS/height"><code>height</code></a> 属性可以发挥作用。</li> <li>内边距、外边距和边框会将其他元素从当前盒子周围“推开”。</li> <li>如果未指定 <a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a>，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。</li> </ul> <p>某些 HTML 元素，如 <code><h1></code> 和 <code><p></code>，默认使用 <code>block</code> 作为外部显示类型。</p> <p>一个拥有 <code>inline</code> 外部显示类型的盒子会表现出以下行为：</p> <ul> <li>盒子不会产生换行。</li> <li><a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a> 和 <a href="/zh-CN/docs/Web/CSS/height"><code>height</code></a> 属性将不起作用。</li> <li>垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 <code>inline</code> 状态的盒子推开。</li> <li>水平方向的内边距、外边距以及边框会被应用且会把其他处于 <code>inline</code> 状态的盒子推开。</li> </ul> <p>某些 HTML 元素，如 <code><a></code>、 <code><span></code>、 <code><em></code> 以及 <code><strong></code>，默认使用 <code>inline</code> 作为外部显示类型。</p></div></section><section aria-labelledby="内部显示类型"><h2 id="内部显示类型"><a href="#内部显示类型">内部显示类型</a></h2><div class="section-content"><p>盒子还有<em>内部</em>显示类型，它决定了盒子内元素的布局方式。</p> <p>区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以<a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction"><strong>标准流</strong></a>的方式布局，并表现为区块或行内盒子。</p> <p>例如，可以通过设置 <code>display: flex;</code> 来更改内部显示类型。该元素仍将使用外部显示类型 <code>block</code> 但内部显示类型将变为 <code>flex</code>。该方框的任何直接子代都将成为弹性（flex）项，并按照<a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox">弹性盒子</a>规范执行。</p> <p>当你继续详细学习 CSS 布局时，将会遇到 <a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox"><code>flex</code></a> 以及盒子可以具有的其他各种内部值，例如 <a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids"><code>grid</code></a>。</p> <div class="notecard note"> <p><strong>备注：</strong> 想要了解更多有关显示值以及盒子在区块和行内布局中的工作原理，请参阅<a href="/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow">常规流中的区块和行内布局</a>。</p> </div></div></section><section aria-labelledby="不同显示类型的例子"><h2 id="不同显示类型的例子"><a href="#不同显示类型的例子">不同显示类型的例子</a></h2><div class="section-content"><p>下面的示例中有三个不同的 HTML 元素，它们的外部显示类型都是 <code>block</code>。</p> <ul> <li> <p>在 CSS 中添加了边框的段落。浏览器会将其渲染为一个盒子框。段落从新行开始，并扩展整个可用宽度。</p> </li> <li> <p>使用 <code>display: flex</code> 布局的列表。这就为容器的子项（即弹性项）建立了弹性布局。列表本身是一个区块盒子，与段落一样，会扩展到整个容器的宽度，然后换行。</p> </li> <li> <p>一个块级段落，内含两个 <code><span></code> 元素。这些元素通常是 <code>inline</code>，但是其中一个元素的类是 <code>block</code>，令其被设置为 <code>display: block</code>。</p> </li> </ul> <iframe width="100%" height="1100" src="https://mdn.github.io/css-examples/learn/box-model/block.html" loading="lazy"></iframe> <p>在下一个示例中，我们可以看到 <code>inline</code> 元素是如何表现的。</p> <ul> <li>第一段中的 <code><span></code> 元素默认为行级，因此不会强制换行。</li> <li>设置为 <code>display: inline-flex</code> 的 <code><ul></code> 元素会创建一个行向盒子，其中包含一些弹性项目。</li> <li>这两个段落都设置为 <code>display: inline</code>。行向弹性容器和段落都在一行中流动，而不是分成两行（如果它们显示为块级元素，就会这样）。</li> </ul> <p><strong>要在显示模式之间切换，可以将 <code>display: inline</code> 更改为 <code>display: block</code>，或将 <code>display: inline-flex</code> 更改为 <code>display: flex</code>。</strong></p> <iframe width="100%" height="1100" src="https://mdn.github.io/css-examples/learn/box-model/inline.html" loading="lazy"></iframe> <p>目前需要记住的关键是更改 <code>display</code> 属性的值可以改变框的外部显示类型是区块还是行内。这将改变它在布局中与其他元素一起显示的方式。</p></div></section><section aria-labelledby="什么是_css_盒模型？"><h2 id="什么是_css_盒模型？"><a href="#什么是_css_盒模型？">什么是 CSS 盒模型？</a></h2><div class="section-content"><p>CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的<em>部分</em>行为。</p> <p>为了增加复杂性，有一种标准盒模型和一种替代盒模型。默认情况下，浏览器使用标准盒模型。</p></div></section><section aria-labelledby="盒模型的各个部分"><h3 id="盒模型的各个部分"><a href="#盒模型的各个部分">盒模型的各个部分</a></h3><div class="section-content"><p>CSS 中组成一个区块盒子需要：</p> <ul> <li><strong>内容盒子</strong>：显示内容的区域；使用 <a href="/zh-CN/docs/Web/CSS/inline-size"><code>inline-size</code></a> 和 <a href="/zh-CN/docs/Web/CSS/block-size"><code>block-size</code></a> 或 <a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a> 和 <a href="/zh-CN/docs/Web/CSS/height"><code>height</code></a> 等属性确定其大小。</li> <li><strong>内边距盒子</strong>：填充位于内容周围的空白处；使用 <a href="/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 和相关属性确定其大小。</li> <li><strong>边框盒子</strong>：边框盒子包住内容和任何填充；使用 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a> 和相关属性确定其大小。</li> <li><strong>外边距盒子</strong>：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 <a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 和相关属性确定其大小。</li> </ul> <p>下图显示了这些层次：</p> <p><img src="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model.png" alt="盒模型示意图" width="544" height="300" loading="lazy"></p></div></section><section aria-labelledby="css_标准盒模型"><h3 id="css_标准盒模型"><a href="#css_标准盒模型">CSS 标准盒模型</a></h3><div class="section-content"><p>在标准盒模型中，如果在盒子上设置了 <code>inline-size</code> 和 <code>block-size</code>（或 <code>width</code> 和 <code>height</code>）属性值，这些值就定义了<em>内容盒子</em>的 <code>inline-size</code> 和 <code>block-size</code>（水平语言中为 <code>width</code> 和 <code>height</code>）。然后将任何内边距和边框添加到这些尺寸中，以获得盒子所占的总大小（见下图）。</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>.box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } </code></pre></div> <p>方框<em>实际</em>占用的空间宽为 410px（350 + 25 + 25 + 5 + 5），高为 210px（150 + 25 + 25 + 5 + 5）。</p> <p><img src="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/standard-box-model.png" alt="显示使用标准盒模型时的盒子尺寸" width="500" height="300" loading="lazy"></p> <div class="notecard note"> <p><strong>备注：</strong> 外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。</p> </div></div></section><section aria-labelledby="css_替代盒模型"><h3 id="css_替代盒模型"><a href="#css_替代盒模型">CSS 替代盒模型</a></h3><div class="section-content"><p>在替代盒模型中，任何宽度都是页面上可见方框的宽度。内容区域的宽度是该宽度减去填充和边框的宽度（见下图）。无需将边框和内边距相加，即可获得盒子的实际大小。</p> <p>要为某个元素使用替代模型，可对其设置 <code>box-sizing: border-box</code>：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { box-sizing: border-box; } </code></pre></div> <p>假设一个盒子的 CSS 与上例相同：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { width: 350px; inline-size: 350px; height: 150px; block-size: 150px; margin: 10px; padding: 25px; border: 5px solid black; } </code></pre></div> <p>现在，盒子<em>实际</em>占用的空间在行向为 350px，在块向为 150px。</p> <p><img src="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/alternate-box-model.png" alt="显示使用备用盒模型时的盒子尺寸" width="440" height="240" loading="lazy"></p> <p>要在所有元素中使用替代方框模型（这是开发人员的常见选择），请在 <code><html></code> 元素上设置 <code>box-sizing</code> 属性，并将所有其他元素设置为继承该值：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } </code></pre></div> <p>要了解基本概念，可以阅读 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/" class="external" target="_blank">CSS Tricks 关于盒子尺寸的文章</a>。</p></div></section><section aria-labelledby="玩转盒模型"><h2 id="玩转盒模型"><a href="#玩转盒模型">玩转盒模型</a></h2><div class="section-content"><p>在下面的示例中，可以看到两个盒子。两个盒子的类都是 <code>.box</code>，因此具有相同的 <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> 和 <code>padding</code>。唯一不同的是，第二个方框被设置为使用替代盒模型。</p> <p><strong>你能改变第二个盒子的大小（通过添加 CSS 到 <code>.alternate</code> 类中) 让它和第一个盒子宽高一样吗？</strong></p> <iframe width="100%" height="1100" src="https://mdn.github.io/css-examples/learn/box-model/box-models.html" loading="lazy"></iframe> <div class="notecard note"> <p><strong>备注：</strong> 在<a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model" class="external" target="_blank">这里</a>查看该任务的解答。</p> </div></div></section><section aria-labelledby="使用浏览器开发者工具来查看盒模型"><h3 id="使用浏览器开发者工具来查看盒模型"><a href="#使用浏览器开发者工具来查看盒模型">使用浏览器开发者工具来查看盒模型</a></h3><div class="section-content"><p><a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools">浏览器开发者工具</a>可以使你更容易地理解盒模型。如果你在 Firefox 的 DevTools 中查看一个元素，你可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断你的盒子大小是否符合预期！</p> <p><img src="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model-devtools.png" alt="使用 Firefox 开发者工具检查元素的盒模型" width="1150" height="683" loading="lazy"></p></div></section><section aria-labelledby="外边距、内边距和边框"><h2 id="外边距、内边距和边框"><a href="#外边距、内边距和边框">外边距、内边距和边框</a></h2><div class="section-content"><p>在上面的示例中，你已经看到了 <a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a>、<a href="/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 和 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a> 属性的作用。该示例中使用了<strong>简写属性</strong>，允许我们一次性设置盒子的所有边。这些简写属性也有等效的普通属性，可以单独控制盒子的不同边。</p> <p>接下来，让我们更详细地探究这些属性。</p></div></section><section aria-labelledby="外边距"><h3 id="外边距"><a href="#外边距">外边距</a></h3><div class="section-content"><p>外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。外边距属性值可以为正也可以为负。在盒子一侧设置负值会导致盒子和页面上的其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。</p> <p>我们可以使用 <a href="/zh-CN/docs/Web/CSS/margin"><code>margin</code></a> 属性一次性控制一个元素的所有外边距，或者每边单独使用等价的普通属性控制：</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/margin-top"><code>margin-top</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/margin-right"><code>margin-right</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/margin-left"><code>margin-left</code></a></li> </ul> <p><strong>在下面的示例中，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时如何推开周边元素，以及设置为负时，是如何收缩空间的。</strong></p> <iframe width="100%" height="800" src="https://mdn.github.io/css-examples/learn/box-model/margin.html" loading="lazy"></iframe> <h4 id="外边距折叠">外边距折叠</h4> <p>根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：</p> <ul> <li>两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。</li> <li>两个负外边距会折叠，并使用最小（离零最远）的值。</li> <li>如果其中一个外边距为负值，其值将从总值中<em>减去</em>。</li> </ul> <p>在下面的示例中，我们有两个段落。最上面一段的 <code>margin-bottom</code> 为 50 像素，另一段的 <code>margin-top</code> 为 30 像素。页边距折叠在一起，因此方框之间的实际页边距是 50 像素，而不是两个页边距的总和。</p> <p><strong>你可以通过将第 2 段的 <code>margin-top</code> 设置为 0 来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 <code>margin-bottom</code> 设置的 50 像素。如果将其设置为 -10px，你会发现总边距变成了 40px（从 50px 中减去该负值）。</strong></p> <iframe width="100%" height="800" src="https://mdn.github.io/css-examples/learn/box-model/margin-collapse.html" loading="lazy"></iframe> <p>外边距何时折叠，何时不折叠，由许多规则决定。有关详细信息，请参阅<a href="/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing">掌握外边距折叠</a>。需要记住的主要一点是，外边距折叠是指在使用外边距创建空间时，如果没有获得预期的空间，就会发生外边距折叠。</p></div></section><section aria-labelledby="边框"><h3 id="边框"><a href="#边框">边框</a></h3><div class="section-content"><p>边框是在边距和填充盒子之间绘制的。如果你正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果你使用的是替代盒模型，边框越大会使内容框越小，因为它会占用一些可用的宽度和高度。</p> <p>为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。</p> <p>可以使用 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a> 属性一次性设置所有四个边框的宽度、颜色和样式。</p> <p>欲分别设置每边的属性，可以使用：</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/border-top"><code>border-top</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-right"><code>border-right</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-left"><code>border-left</code></a></li> </ul> <p>欲设置所有边的宽度、样式或颜色，可以使用：</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/border-width"><code>border-width</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-style"><code>border-style</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-color"><code>border-color</code></a></li> </ul> <p>欲设置单条边的宽度、样式或颜色，可以使用最细粒度的普通属性之一：</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li> </ul> <p>在下面的示例中，我们使用了各种简写属性和普通属性来创建边框。请尝试使用不同的属性，以了解它们的工作原理。有关边框属性的 MDN 页面提供了有关不同可用边框样式的信息。</p> <iframe width="100%" height="700" src="https://mdn.github.io/css-examples/learn/box-model/border.html" loading="lazy"></iframe></div></section><section aria-labelledby="内边距"><h3 id="内边距"><a href="#内边距">内边距</a></h3><div class="section-content"><p>内边距位于边框和内容区域之间，用于将内容推离边框。与外边距不同，内边距不能为负数。任何应用于元素的背景都会显示在内边距后面。</p> <p>我们可以使用 <a href="/zh-CN/docs/Web/CSS/padding"><code>padding</code></a> 简写属性一次性控制元素所有边，或者每边单独使用等价的普通属性：</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/padding-top"><code>padding-top</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/padding-right"><code>padding-right</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li> <li><a href="/zh-CN/docs/Web/CSS/padding-left"><code>padding-left</code></a></li> </ul> <p>在下面的示例中，你可以更改类 <code>.box</code> 上的内边距值，从而看到文本开始的位置与盒子的关系发生了变化。你还可以更改类 <code>.container</code> 的内边距，在容器和盒子之间创建空间。你可以更改任何元素的内边距，在其边框和元素内部的任何内容之间创建空间。</p> <iframe width="100%" height="700" src="https://mdn.github.io/css-examples/learn/box-model/padding.html" loading="lazy"></iframe></div></section><section aria-labelledby="盒子模型和行内盒子"><h2 id="盒子模型和行内盒子"><a href="#盒子模型和行内盒子">盒子模型和行内盒子</a></h2><div class="section-content"><p>以上所有的方法都完全适用于块级盒子。某些属性也适用于行内盒子，例如由 <code><span></code> 元素创建的盒子。</p> <p>在下面的示例中，我们在一个段落中使用了 <code><span></code>，并对其应用了 <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> 和 <code>padding</code>。可以看到，宽度和高度都被忽略了。上下外边距、内边距边框都得到了应用，但不会改变其他内容与行内盒子之间的关系。内边距和边框与段落中的其他文字重叠。左右内边距、外边距和边框会将其他内容从方框中推开。</p> <iframe width="100%" height="700" src="https://mdn.github.io/css-examples/learn/box-model/inline-box-model.html" loading="lazy"></iframe></div></section><section aria-labelledby="使用_display_inline-block"><h2 id="使用_display_inline-block"><a href="#使用_display_inline-block">使用 display: inline-block</a></h2><div class="section-content"><p><code>display: inline-block</code> 是 <code>display</code> 的一个特殊值，它提供了介于 <code>inline</code> 和 <code>block</code> 之间的中间位置。如果不希望项目换行，但又希望它使用 <code>width</code> 和 <code>height</code> 值并避免出现上述重叠现象，请使用它。</p> <p>一个元素使用 <code>display: inline-block</code>，实现我们需要的块级的部分效果：</p> <ul> <li>设置 <code>width</code> 和<code>height</code> 属性会生效。</li> <li><code>padding</code>、<code>margin</code> 和 <code>border</code> 会推开其他元素。</li> </ul> <p>不过，它不会换行，只有在明确添加 <code>width</code> 和 <code>height</code> 属性后，才会变得比其内容大。</p> <p><strong>在下一个示例中，我们将 <code>display: inline-block</code> 添加到 <code><span></code> 元素中。尝试将此更改为 <code>display: block</code> 或完全删除此行，以查看显示模型中的差异。</strong></p> <iframe width="100%" height="800" src="https://mdn.github.io/css-examples/learn/box-model/inline-block.html" loading="lazy"></iframe> <p>当你想通过添加 <code>padding</code> 来扩大链接的点击范围时，这个功能就派上用场了。<code><a></code> 和 <code><span></code> 一样是一个行内元素；可以使用 <code>display: inline-block</code> 在其上设置内边距，使用户更容易点击链接。</p> <p>这种情况在导航栏中很常见。下面的导航使用弹性盒显示在同一行中，我们为 <code><a></code> 元素添加了内边距，因为我们希望能够在 <code><a></code> 在鼠标移动到上面时改变背景色。内边距似乎覆盖了 <code><ul></code> 元素上的边框。这是因为 <code><a></code> 是一个内联元素。</p> <p><strong>在带有 <code>.links-list a</code> 选择器的规则中添加 <code>display: inline-block</code>，你就会看到它是如何通过使其他元素考虑内边距来解决这个问题的。</strong></p> <iframe width="100%" height="700" src="https://mdn.github.io/css-examples/learn/box-model/inline-block-nav.html" loading="lazy"></iframe></div></section><section aria-labelledby="技能测试！"><h2 id="技能测试！"><a href="#技能测试！">技能测试！</a></h2><div class="section-content"><p>本文已经结束，你还记得最重要的信息吗？在继续学习之前，可以找到一些进一步的测试来验证你是否保留了这些信息——请参阅<a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Box_Model_Tasks" class="only-in-en-us">技能测试：盒模型</a>。</p></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>这就是你需要了解的关于盒子模型的大部分内容。今后，如果你对布局中盒子的大小感到困惑，不妨再回来看看这些内容。</p> <p>在下一篇文章中，我们将看看如何使用<a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景和边框</a>来使你的普通盒子看起来更有趣。</p> <ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> 概述：CSS 构建</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts"><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="2025-02-13T12:53:53.000Z">2025年2月13日</time> by <a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/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_web_development/core/styling_basics/box_model/index.md?plain=1" title="Folder: zh-cn/learn_web_development/core/styling_basics/box_model (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_web_development%2FCore%2FStyling_basics%2FBox_model&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_web_development%2Fcore%2Fstyling_basics%2Fbox_model%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBox_model%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbox_model%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F9e7e180eb34f149ee50fa7a94e060125d55c1e31%0A*+Document+last+modified%3A+2025-02-13T12%3A53%3A53.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://mastodon.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 xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></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–2025 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_web_development/Core/Styling_basics/Box_model","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> 概述：CSS 构建</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>\n<p>在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>\n <p>\n <a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装基本的软件</a>，<a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">文件处理</a>基本知识，HTML 基础知识（如果不了解 HTML，请移步 <a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">HTML 入门</a>），了解 CSS 的工作原理（如果不了解 CSS，请移步 <a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 入门</a>）\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>\n 学习盒模型的基本理论、构成以及如何切换到替代盒模型。\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"区块盒子与行内盒子","title":"区块盒子与行内盒子","isH3":false,"content":"<p>在 CSS 中，我们有几种类型的盒子，一般分为<strong>区块盒子</strong>（block boxes）和<strong>行内盒子</strong>（inline boxes）。类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有<strong>内部显示</strong>（inner display type）和<strong>外部显示</strong>（outer display type）两种类型。</p>\n<p>一般来说，可以使用 <a href=\"/zh-CN/docs/Web/CSS/display\"><code>display</code></a> 属性为显示类型设置各种值，该属性可以有多种值。</p>"}},{"type":"prose","value":{"id":"外部显示类型","title":"外部显示类型","isH3":false,"content":"<p>一个拥有 <code>block</code> 外部显示类型的盒子会表现出以下行为：</p>\n<ul>\n<li>盒子会产生换行。</li>\n<li><a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/height\"><code>height</code></a> 属性可以发挥作用。</li>\n<li>内边距、外边距和边框会将其他元素从当前盒子周围“推开”。</li>\n<li>如果未指定 <a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a>，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。</li>\n</ul>\n<p>某些 HTML 元素，如 <code><h1></code> 和 <code><p></code>，默认使用 <code>block</code> 作为外部显示类型。</p>\n<p>一个拥有 <code>inline</code> 外部显示类型的盒子会表现出以下行为：</p>\n<ul>\n<li>盒子不会产生换行。</li>\n<li><a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/height\"><code>height</code></a> 属性将不起作用。</li>\n<li>垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 <code>inline</code> 状态的盒子推开。</li>\n<li>水平方向的内边距、外边距以及边框会被应用且会把其他处于 <code>inline</code> 状态的盒子推开。</li>\n</ul>\n<p>某些 HTML 元素，如 <code><a></code>、 <code><span></code>、 <code><em></code> 以及 <code><strong></code>，默认使用 <code>inline</code> 作为外部显示类型。</p>"}},{"type":"prose","value":{"id":"内部显示类型","title":"内部显示类型","isH3":false,"content":"<p>盒子还有<em>内部</em>显示类型，它决定了盒子内元素的布局方式。</p>\n<p>区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以<a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction\"><strong>标准流</strong></a>的方式布局，并表现为区块或行内盒子。</p>\n<p>例如，可以通过设置 <code>display: flex;</code> 来更改内部显示类型。该元素仍将使用外部显示类型 <code>block</code> 但内部显示类型将变为 <code>flex</code>。该方框的任何直接子代都将成为弹性（flex）项，并按照<a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\">弹性盒子</a>规范执行。</p>\n<p>当你继续详细学习 CSS 布局时，将会遇到 <a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\"><code>flex</code></a> 以及盒子可以具有的其他各种内部值，例如 <a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids\"><code>grid</code></a>。</p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n想要了解更多有关显示值以及盒子在区块和行内布局中的工作原理，请参阅<a href=\"/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow\">常规流中的区块和行内布局</a>。</p>\n</div>"}},{"type":"prose","value":{"id":"不同显示类型的例子","title":"不同显示类型的例子","isH3":false,"content":"<p>下面的示例中有三个不同的 HTML 元素，它们的外部显示类型都是 <code>block</code>。</p>\n<ul>\n<li>\n<p>在 CSS 中添加了边框的段落。浏览器会将其渲染为一个盒子框。段落从新行开始，并扩展整个可用宽度。</p>\n</li>\n<li>\n<p>使用 <code>display: flex</code> 布局的列表。这就为容器的子项（即弹性项）建立了弹性布局。列表本身是一个区块盒子，与段落一样，会扩展到整个容器的宽度，然后换行。</p>\n</li>\n<li>\n<p>一个块级段落，内含两个 <code><span></code> 元素。这些元素通常是 <code>inline</code>，但是其中一个元素的类是 <code>block</code>，令其被设置为 <code>display: block</code>。</p>\n</li>\n</ul>\n<iframe width=\"100%\" height=\"1100\" src=\"https://mdn.github.io/css-examples/learn/box-model/block.html\" loading=\"lazy\"></iframe>\n<p>在下一个示例中，我们可以看到 <code>inline</code> 元素是如何表现的。</p>\n<ul>\n<li>第一段中的 <code><span></code> 元素默认为行级，因此不会强制换行。</li>\n<li>设置为 <code>display: inline-flex</code> 的 <code><ul></code> 元素会创建一个行向盒子，其中包含一些弹性项目。</li>\n<li>这两个段落都设置为 <code>display: inline</code>。行向弹性容器和段落都在一行中流动，而不是分成两行（如果它们显示为块级元素，就会这样）。</li>\n</ul>\n<p><strong>要在显示模式之间切换，可以将 <code>display: inline</code> 更改为 <code>display: block</code>，或将 <code>display: inline-flex</code> 更改为 <code>display: flex</code>。</strong></p>\n<iframe width=\"100%\" height=\"1100\" src=\"https://mdn.github.io/css-examples/learn/box-model/inline.html\" loading=\"lazy\"></iframe>\n<p>目前需要记住的关键是更改 <code>display</code> 属性的值可以改变框的外部显示类型是区块还是行内。这将改变它在布局中与其他元素一起显示的方式。</p>"}},{"type":"prose","value":{"id":"什么是_css_盒模型？","title":"什么是 CSS 盒模型？","isH3":false,"content":"<p>CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的<em>部分</em>行为。</p>\n<p>为了增加复杂性，有一种标准盒模型和一种替代盒模型。默认情况下，浏览器使用标准盒模型。</p>"}},{"type":"prose","value":{"id":"盒模型的各个部分","title":"盒模型的各个部分","isH3":true,"content":"<p>CSS 中组成一个区块盒子需要：</p>\n<ul>\n<li><strong>内容盒子</strong>：显示内容的区域；使用 <a href=\"/zh-CN/docs/Web/CSS/inline-size\"><code>inline-size</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/block-size\"><code>block-size</code></a> 或 <a href=\"/zh-CN/docs/Web/CSS/width\"><code>width</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/height\"><code>height</code></a> 等属性确定其大小。</li>\n<li><strong>内边距盒子</strong>：填充位于内容周围的空白处；使用 <a href=\"/zh-CN/docs/Web/CSS/padding\"><code>padding</code></a> 和相关属性确定其大小。</li>\n<li><strong>边框盒子</strong>：边框盒子包住内容和任何填充；使用 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a> 和相关属性确定其大小。</li>\n<li><strong>外边距盒子</strong>：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 <a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a> 和相关属性确定其大小。</li>\n</ul>\n<p>下图显示了这些层次：</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model.png\" alt=\"盒模型示意图\" width=\"544\" height=\"300\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"css_标准盒模型","title":"CSS 标准盒模型","isH3":true,"content":"<p>在标准盒模型中，如果在盒子上设置了 <code>inline-size</code> 和 <code>block-size</code>（或 <code>width</code> 和 <code>height</code>）属性值，这些值就定义了<em>内容盒子</em>的 <code>inline-size</code> 和 <code>block-size</code>（水平语言中为 <code>width</code> 和 <code>height</code>）。然后将任何内边距和边框添加到这些尺寸中，以获得盒子所占的总大小（见下图）。</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>.box {\n width: 350px;\n height: 150px;\n margin: 10px;\n padding: 25px;\n border: 5px solid black;\n}\n</code></pre></div>\n<p>方框<em>实际</em>占用的空间宽为 410px（350 + 25 + 25 + 5 + 5），高为 210px（150 + 25 + 25 + 5 + 5）。</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/standard-box-model.png\" alt=\"显示使用标准盒模型时的盒子尺寸\" width=\"500\" height=\"300\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n外边距不计入盒子的实际大小——当然，它影响盒子在页面上所占的总空间，但只影响盒子外的空间。盒子的面积止于边框，不会延伸到外边距中。</p>\n</div>"}},{"type":"prose","value":{"id":"css_替代盒模型","title":"CSS 替代盒模型","isH3":true,"content":"<p>在替代盒模型中，任何宽度都是页面上可见方框的宽度。内容区域的宽度是该宽度减去填充和边框的宽度（见下图）。无需将边框和内边距相加，即可获得盒子的实际大小。</p>\n<p>要为某个元素使用替代模型，可对其设置 <code>box-sizing: border-box</code>：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n box-sizing: border-box;\n}\n</code></pre></div>\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>.box {\n width: 350px;\n inline-size: 350px;\n height: 150px;\n block-size: 150px;\n margin: 10px;\n padding: 25px;\n border: 5px solid black;\n}\n</code></pre></div>\n<p>现在，盒子<em>实际</em>占用的空间在行向为 350px，在块向为 150px。</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/alternate-box-model.png\" alt=\"显示使用备用盒模型时的盒子尺寸\" width=\"440\" height=\"240\" loading=\"lazy\"></p>\n<p>要在所有元素中使用替代方框模型（这是开发人员的常见选择），请在 <code><html></code> 元素上设置 <code>box-sizing</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 box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n</code></pre></div>\n<p>要了解基本概念，可以阅读 <a href=\"https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/\" class=\"external\" target=\"_blank\">CSS Tricks 关于盒子尺寸的文章</a>。</p>"}},{"type":"prose","value":{"id":"玩转盒模型","title":"玩转盒模型","isH3":false,"content":"<p>在下面的示例中，可以看到两个盒子。两个盒子的类都是 <code>.box</code>，因此具有相同的 <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> 和 <code>padding</code>。唯一不同的是，第二个方框被设置为使用替代盒模型。</p>\n<p><strong>你能改变第二个盒子的大小（通过添加 CSS 到 <code>.alternate</code> 类中) 让它和第一个盒子宽高一样吗？</strong></p>\n<iframe width=\"100%\" height=\"1100\" src=\"https://mdn.github.io/css-examples/learn/box-model/box-models.html\" loading=\"lazy\"></iframe>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n在<a href=\"https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model\" class=\"external\" target=\"_blank\">这里</a>查看该任务的解答。</p>\n</div>"}},{"type":"prose","value":{"id":"使用浏览器开发者工具来查看盒模型","title":"使用浏览器开发者工具来查看盒模型","isH3":true,"content":"<p><a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools\">浏览器开发者工具</a>可以使你更容易地理解盒模型。如果你在 Firefox 的 DevTools 中查看一个元素，你可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断你的盒子大小是否符合预期！</p>\n<p><img src=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model-devtools.png\" alt=\"使用 Firefox 开发者工具检查元素的盒模型\" width=\"1150\" height=\"683\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"外边距、内边距和边框","title":"外边距、内边距和边框","isH3":false,"content":"<p>在上面的示例中，你已经看到了 <a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a>、<a href=\"/zh-CN/docs/Web/CSS/padding\"><code>padding</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a> 属性的作用。该示例中使用了<strong>简写属性</strong>，允许我们一次性设置盒子的所有边。这些简写属性也有等效的普通属性，可以单独控制盒子的不同边。</p>\n<p>接下来，让我们更详细地探究这些属性。</p>"}},{"type":"prose","value":{"id":"外边距","title":"外边距","isH3":true,"content":"<p>外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。外边距属性值可以为正也可以为负。在盒子一侧设置负值会导致盒子和页面上的其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。</p>\n<p>我们可以使用 <a href=\"/zh-CN/docs/Web/CSS/margin\"><code>margin</code></a> 属性一次性控制一个元素的所有外边距，或者每边单独使用等价的普通属性控制：</p>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/CSS/margin-top\"><code>margin-top</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/margin-right\"><code>margin-right</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/margin-bottom\"><code>margin-bottom</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/margin-left\"><code>margin-left</code></a></li>\n</ul>\n<p><strong>在下面的示例中，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时如何推开周边元素，以及设置为负时，是如何收缩空间的。</strong></p>\n<iframe width=\"100%\" height=\"800\" src=\"https://mdn.github.io/css-examples/learn/box-model/margin.html\" loading=\"lazy\"></iframe>\n<h4 id=\"外边距折叠\">外边距折叠</h4>\n<p>根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：</p>\n<ul>\n<li>两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。</li>\n<li>两个负外边距会折叠，并使用最小（离零最远）的值。</li>\n<li>如果其中一个外边距为负值，其值将从总值中<em>减去</em>。</li>\n</ul>\n<p>在下面的示例中，我们有两个段落。最上面一段的 <code>margin-bottom</code> 为 50 像素，另一段的 <code>margin-top</code> 为 30 像素。页边距折叠在一起，因此方框之间的实际页边距是 50 像素，而不是两个页边距的总和。</p>\n<p><strong>你可以通过将第 2 段的 <code>margin-top</code> 设置为 0 来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 <code>margin-bottom</code> 设置的 50 像素。如果将其设置为 -10px，你会发现总边距变成了 40px（从 50px 中减去该负值）。</strong></p>\n<iframe width=\"100%\" height=\"800\" src=\"https://mdn.github.io/css-examples/learn/box-model/margin-collapse.html\" loading=\"lazy\"></iframe>\n<p>外边距何时折叠，何时不折叠，由许多规则决定。有关详细信息，请参阅<a href=\"/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing\">掌握外边距折叠</a>。需要记住的主要一点是，外边距折叠是指在使用外边距创建空间时，如果没有获得预期的空间，就会发生外边距折叠。</p>"}},{"type":"prose","value":{"id":"边框","title":"边框","isH3":true,"content":"<p>边框是在边距和填充盒子之间绘制的。如果你正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果你使用的是替代盒模型，边框越大会使内容框越小，因为它会占用一些可用的宽度和高度。</p>\n<p>为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。</p>\n<p>可以使用 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a> 属性一次性设置所有四个边框的宽度、颜色和样式。</p>\n<p>欲分别设置每边的属性，可以使用：</p>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-top\"><code>border-top</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-right\"><code>border-right</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-bottom\"><code>border-bottom</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-left\"><code>border-left</code></a></li>\n</ul>\n<p>欲设置所有边的宽度、样式或颜色，可以使用：</p>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-width\"><code>border-width</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-style\"><code>border-style</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-color\"><code>border-color</code></a></li>\n</ul>\n<p>欲设置单条边的宽度、样式或颜色，可以使用最细粒度的普通属性之一：</p>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-top-width\"><code>border-top-width</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-top-style\"><code>border-top-style</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-top-color\"><code>border-top-color</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-right-width\"><code>border-right-width</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-right-style\"><code>border-right-style</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-right-color\"><code>border-right-color</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-width\"><code>border-bottom-width</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-style\"><code>border-bottom-style</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-color\"><code>border-bottom-color</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-left-width\"><code>border-left-width</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-left-style\"><code>border-left-style</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/border-left-color\"><code>border-left-color</code></a></li>\n</ul>\n<p>在下面的示例中，我们使用了各种简写属性和普通属性来创建边框。请尝试使用不同的属性，以了解它们的工作原理。有关边框属性的 MDN 页面提供了有关不同可用边框样式的信息。</p>\n<iframe width=\"100%\" height=\"700\" src=\"https://mdn.github.io/css-examples/learn/box-model/border.html\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"内边距","title":"内边距","isH3":true,"content":"<p>内边距位于边框和内容区域之间，用于将内容推离边框。与外边距不同，内边距不能为负数。任何应用于元素的背景都会显示在内边距后面。</p>\n<p>我们可以使用 <a href=\"/zh-CN/docs/Web/CSS/padding\"><code>padding</code></a> 简写属性一次性控制元素所有边，或者每边单独使用等价的普通属性：</p>\n<ul>\n<li><a href=\"/zh-CN/docs/Web/CSS/padding-top\"><code>padding-top</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/padding-right\"><code>padding-right</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/padding-bottom\"><code>padding-bottom</code></a></li>\n<li><a href=\"/zh-CN/docs/Web/CSS/padding-left\"><code>padding-left</code></a></li>\n</ul>\n<p>在下面的示例中，你可以更改类 <code>.box</code> 上的内边距值，从而看到文本开始的位置与盒子的关系发生了变化。你还可以更改类 <code>.container</code> 的内边距，在容器和盒子之间创建空间。你可以更改任何元素的内边距，在其边框和元素内部的任何内容之间创建空间。</p>\n<iframe width=\"100%\" height=\"700\" src=\"https://mdn.github.io/css-examples/learn/box-model/padding.html\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"盒子模型和行内盒子","title":"盒子模型和行内盒子","isH3":false,"content":"<p>以上所有的方法都完全适用于块级盒子。某些属性也适用于行内盒子，例如由 <code><span></code> 元素创建的盒子。</p>\n<p>在下面的示例中，我们在一个段落中使用了 <code><span></code>，并对其应用了 <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> 和 <code>padding</code>。可以看到，宽度和高度都被忽略了。上下外边距、内边距边框都得到了应用，但不会改变其他内容与行内盒子之间的关系。内边距和边框与段落中的其他文字重叠。左右内边距、外边距和边框会将其他内容从方框中推开。</p>\n<iframe width=\"100%\" height=\"700\" src=\"https://mdn.github.io/css-examples/learn/box-model/inline-box-model.html\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"使用_display_inline-block","title":"使用 display: inline-block","isH3":false,"content":"<p><code>display: inline-block</code> 是 <code>display</code> 的一个特殊值，它提供了介于 <code>inline</code> 和 <code>block</code> 之间的中间位置。如果不希望项目换行，但又希望它使用 <code>width</code> 和 <code>height</code> 值并避免出现上述重叠现象，请使用它。</p>\n<p>一个元素使用 <code>display: inline-block</code>，实现我们需要的块级的部分效果：</p>\n<ul>\n<li>设置 <code>width</code> 和<code>height</code> 属性会生效。</li>\n<li><code>padding</code>、<code>margin</code> 和 <code>border</code> 会推开其他元素。</li>\n</ul>\n<p>不过，它不会换行，只有在明确添加 <code>width</code> 和 <code>height</code> 属性后，才会变得比其内容大。</p>\n<p><strong>在下一个示例中，我们将 <code>display: inline-block</code> 添加到 <code><span></code> 元素中。尝试将此更改为 <code>display: block</code> 或完全删除此行，以查看显示模型中的差异。</strong></p>\n<iframe width=\"100%\" height=\"800\" src=\"https://mdn.github.io/css-examples/learn/box-model/inline-block.html\" loading=\"lazy\"></iframe>\n<p>当你想通过添加 <code>padding</code> 来扩大链接的点击范围时，这个功能就派上用场了。<code><a></code> 和 <code><span></code> 一样是一个行内元素；可以使用 <code>display: inline-block</code> 在其上设置内边距，使用户更容易点击链接。</p>\n<p>这种情况在导航栏中很常见。下面的导航使用弹性盒显示在同一行中，我们为 <code><a></code> 元素添加了内边距，因为我们希望能够在 <code><a></code> 在鼠标移动到上面时改变背景色。内边距似乎覆盖了 <code><ul></code> 元素上的边框。这是因为 <code><a></code> 是一个内联元素。</p>\n<p><strong>在带有 <code>.links-list a</code> 选择器的规则中添加 <code>display: inline-block</code>，你就会看到它是如何通过使其他元素考虑内边距来解决这个问题的。</strong></p>\n<iframe width=\"100%\" height=\"700\" src=\"https://mdn.github.io/css-examples/learn/box-model/inline-block-nav.html\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"技能测试！","title":"技能测试！","isH3":false,"content":"<p>本文已经结束，你还记得最重要的信息吗？在继续学习之前，可以找到一些进一步的测试来验证你是否保留了这些信息——请参阅<a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_Model_Tasks\" class=\"only-in-en-us\">技能测试：盒模型</a>。</p>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>这就是你需要了解的关于盒子模型的大部分内容。今后，如果你对布局中盒子的大小感到困惑，不妨再回来看看这些内容。</p>\n<p>在下一篇文章中，我们将看看如何使用<a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景和边框</a>来使你的普通盒子看起来更有趣。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> 概述：CSS 构建</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"zh-CN","mdn_url":"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model","modified":"2025-02-13T12:53:53.000Z","native":"中文 (简体)","noIndexing":false,"other_translations":[{"locale":"en-US","title":"The box model","native":"English (US)"},{"locale":"de","title":"Das Box-Modell","native":"Deutsch"},{"locale":"es","title":"El modelo de caja","native":"Español"},{"locale":"fr","title":"Le modèle de boîte","native":"Français"},{"locale":"ja","title":"ボックスモデル","native":"日本語"},{"locale":"ko","title":"박스 모델","native":"한국어"},{"locale":"pt-BR","title":"The box model","native":"Português (do Brasil)"},{"locale":"ru","title":"Блочная модель","native":"Русский"}],"pageTitle":"盒模型 - 学习 Web 开发 | MDN","parents":[{"uri":"/zh-CN/docs/Learn_web_development","title":"学习 Web 开发"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Styling_basics","title":"CSS 构建"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model","title":"盒模型"}],"popularity":null,"short_title":"盒模型","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn_web_development/Getting_started\">入门模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup\">配置环境</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">网页、网站、网络服务器和搜索引擎的区别是什么？</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\" class=\"only-in-en-us\">Code editors</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">命令行速成课</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website\">你的第一个网站</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">发布你的网站</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\" class=\"only-in-en-us\">Web 标准</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">万维网是如何工作的</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Web 和 Web 标准</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\" class=\"only-in-en-us\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\" class=\"only-in-en-us\">软性技能</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\" class=\"only-in-en-us\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\" class=\"only-in-en-us\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\" class=\"only-in-en-us\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\" class=\"only-in-en-us\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\" class=\"only-in-en-us\">核心模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">使用 HTML 构建内容</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">强调与重要性</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\" class=\"only-in-en-us\">Lists</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">构建网页内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla 欢迎页面</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">作业：构建行星数据</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\" class=\"only-in-en-us\">Forms and buttons in HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML 调试</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 样式基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">运用你的新知识</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\">关系选择器</a></li><li><em><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model\" aria-current=\"page\">盒模型</a></em></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">一个漂亮的盒子</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling\">CSS 文本样式</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout\">CSS 排版</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\">使用 JavaScript 动态编码</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">笑话生成器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Loops\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery\">图片库</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM 脚本简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">处理常见的 JavaScript 问题</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript 架构和库</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">框架的主要特性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">组件化我们的 React App</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\" class=\"only-in-en-us\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\" class=\"only-in-en-us\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\" class=\"only-in-en-us\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\" class=\"only-in-en-us\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility\">无障碍</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\" class=\"only-in-en-us\">为开发人员设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Version_control\">版本控制</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\" class=\"only-in-en-us\">扩展模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs\">客户端 Web API</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">客户端存储</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">第三方 API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS\">异步 JavaScript</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">worker 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">序列动画</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\">Web 表单</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools\">理解客户端工具</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side\">服务端网站</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps\">服务端基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django\">Django web 框架（Python）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web 框架（Node.js）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance\">Web 性能</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing\">测试</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\" class=\"only-in-en-us\">CSS 变换与动画化</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\" class=\"only-in-en-us\">安全与隐私</a></li><li class=\"section\">更多资源</li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Howto\">如何解决常见问题</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">关于</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\" class=\"only-in-en-us\">面向教育工作者的资源</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\" class=\"only-in-en-us\">更新日志</a></li></ol>","source":{"folder":"zh-cn/learn_web_development/core/styling_basics/box_model","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/core/styling_basics/box_model/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/9e7e180eb34f149ee50fa7a94e060125d55c1e31","filename":"index.md"},"summary":"在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。","title":"盒模型","toc":[{"text":"区块盒子与行内盒子","id":"区块盒子与行内盒子"},{"text":"外部显示类型","id":"外部显示类型"},{"text":"内部显示类型","id":"内部显示类型"},{"text":"不同显示类型的例子","id":"不同显示类型的例子"},{"text":"什么是 CSS 盒模型？","id":"什么是_css_盒模型？"},{"text":"玩转盒模型","id":"玩转盒模型"},{"text":"外边距、内边距和边框","id":"外边距、内边距和边框"},{"text":"盒子模型和行内盒子","id":"盒子模型和行内盒子"},{"text":"使用 display: inline-block","id":"使用_display_inline-block"},{"text":"技能测试！","id":"技能测试！"},{"text":"总结","id":"总结"}],"pageType":"learn-module-chapter"}}</script></body></html>