本文介绍了浏览器页面的盒模型，包括内容区、边框、内边距和外边距的概念，并通过实例展示了如何使用浏览器开发者工具查看元素盒模型。文章还提及了margin叠压问题及其解决技巧，强调通过设置特定方向的margin值来避免叠压。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Axure 8
作者：Justin Bieber
撰写时间：2021年11月18日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我们浏览器的页面其实你认真看，很容易发现，他们都是由一个“盒子”做成的每一部分，就相当于，一个大盒子，里面有无数个小盒子，小盒子就是我们的浏览器呈现的内容。
我们要想查看浏览器的元素控制台，我们就点击键盘上的“F12”就可以点开浏览的的控制台页面了，
在浏览器的这个地方（红框）就是整个浏览器的盒模型容器，里面分为： 内容区（element）、边框（border）、内边距（内填充）（padding）、外边距（margin）；
1.内容区就是蓝色的那块区域，也就是我们整个浏览器内容的范围。
2.边框区就是黄色的那块区域，这个border，一般浏览器内容都是不添加的，都是为0。
3.内边距就是绿色那块区域，padding 会撑大元素框的大小；
4.最后，外边距就是我们棕色那块区域，margin属性可以拉开元素与元素之间的距离；
存在问题：margin上下叠压问题；
解决技巧：可以将某一元素方向设置成预想值，margin叠压会取最大的margin值；
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
