盒模型知识

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Axure 8

作者：Justin Bieber

撰写时间：2021年11月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我们浏览器的页面其实你认真看，很容易发现，他们都是由一个“盒子”做成的每一部分，就相当于，一个大盒子，里面有无数个小盒子，小盒子就是我们的浏览器呈现的内容。

 

我们要想查看浏览器的元素控制台，我们就点击键盘上的“F12”就可以点开浏览的的控制台页面了，

 

在浏览器的这个地方（红框）就是整个浏览器的盒模型容器，里面分为： 内容区（element）、边框（border）、内边距（内填充）（padding）、外边距（margin）；

1.内容区就是蓝色的那块区域，也就是我们整个浏览器内容的范围。

2.边框区就是黄色的那块区域，这个border，一般浏览器内容都是不添加的，都是为0。

3.内边距就是绿色那块区域，padding 会撑大元素框的大小；

4.最后，外边距就是我们棕色那块区域，margin属性可以拉开元素与元素之间的距离；

存在问题：margin上下叠压问题；

解决技巧：可以将某一元素方向设置成预想值，margin叠压会取最大的margin值；