文档摘要

盒模型原理与属性 本节摘要：浏览器渲染页面时把每个 HTML 元素都看作一个矩形盒子，盒子由内容、内边距、边框、外边距四层组成。本节逐层拆解四层的职责与语法，动手验证背景延伸范围和简写规则，最后直面盒模型最反直觉的行为——垂直外边距合并不叠加而是取较大值。 学习目标 完成本节后，你将能够：画出盒模型的四层结构并解释每层的作用；使用 、 、 、 、 精确控制元素的空间占位；解释背景色延伸到哪一层；复现外边距合并的三种情形并知道如何应对。 会员。《3.1 盒模型原理与属性》收录于灏天文库文集《CSS网页样式设计与布局教程》，原作者/来源：灏天文库，整理自「灏天文库」，提供技术教程、实践指南与问题解决方案，支持在线阅读、全文检索与知识沉淀，助力开发者系统化学习。本站整理收录，版权归原作者/开源协议所有。

该文档为会员专享，请先登录或注册后再查看

登录 注册

---

作者与出处

原作者： 灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/141-css%E7%BD%91%E9%A1%B5%E6%A0%B7%E5%BC%8F%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%B8%83%E5%B1%80%E6%95%99%E7%A8%8B

整理： 灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流