如何从零开始学习CSS盒子模型，成为奶奶级Web开发高手？

上一篇我们讨论了 CSS 基础，把基础 CSS 概念搞清楚了。这篇我们开始学习 CSS 排版。从最基本的盒子模型开始。 盒式模型 什么是盒式模型？ 顾名思义，就是把元素看作盒子。 先来直观感受下，比如说这是我的博客网站，我们打开开发者工具，然后用 CSS 给每个元素加上 2px 的边框…… 注意到了吗？开发者工具右下角出现了盒子模型。 从内到外，有三条…… padding，内边距，即元素内容和它的边框之间的距离 border，边框，包裹在元素外部的框 margin，外边距，即元素与它的母容器间的距离 现在，我们来搞点简单示例代码看看。 <div class="container"> <p class="para">Readme</p> </div> .container { background-color: red; margin: 50px; padding: 30px; border: 50px solid blue; } .para { background-color: white; color: green; margin: 50px; } 结果是这样的： 我们从外面到内部依次解释： 由于设定了外边距大小，因此整个界面没有被填满，而是存在留白。可以看到，margin 50px，左右两边存在白色空白。 蓝色的部分是容器边框。容器边框设置为了 50px，蓝色。 红色部分，可以分成两部分。 外部容器的内边距。内边距设定为了 30px，因此将内容物向内推动 30px 内部 p 的外边距。由于内部设定了50px 的外边距，所以和外部容器内边距叠加 白色部分，包括 p 元素的文本和边框（因为没有设定，所以看不见边框，为 0px） 绿色部分，即文本，是 p 的内容 这部分可以自己搞点代码尝试一下，相信你很快明白了。 外边距重叠问题 我们看看另外一个例子，如果我把上面的 html 复制一下，变成这样： <div class="container"> <p class="para">Readme</p> </div> <div class="container"> <p class="para">Readme</p> </div> 那么，会是什么效果呢？ 这不简单~不就是两个东西复制一遍嘛，有什么问题吗？ 看起来确实如此： 但如果你观察比较仔细，你会发现，两个蓝色框之间的距离不太对劲。 回看下上面的 CSS： margin: 50px; 我们确实对两个容器都设定了外边距对吧！？那么，实际应该是 50+50=100px 的间距，现在为什么间距和左右侧相同？ 这里就涉及到一个重要的知识：外边距折叠 (Collapse) 区块的上下外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。 说人话就是两个外边距撞了取更大的那一个。 但是还有个问题，如果边距为负，比如改一下两个容器的 CSS： .container1 { background-color: red; margin: 50px; padding: 30px; border: 50px solid blue; } .container2{ background-color: red; margin: -40px; padding: 30px; border: 50px solid blue; } 这种情况下，负边距出现了，此时我们看看这条缝隙： 是的，它收缩了。当出现正负边距时，取值为正负相加，而非较大的那一个。 还有种更加特殊的情况，当出现双负边距时，取值为最小的负边距的值。 总结一下： 符号相同时，取绝对值最大的一方。符号不同时，两个带着符号相加。 不同类型的盒子 接下来介绍两种不同的盒子。相信我，简单到不行。 盒子类型由 box-sizing 决定。顾名思义，盒子大小的计算方式。 默认的盒子模型叫 content-box，在这种情况下，宽高的设定应用于内容物。 而设定为 border-box 后，宽高的设定应用于边框。也就是说，宽度=内容物+两边内边距+两边边框宽度，高度同理。