今天我们来看一下网页布局中很重要的一个概念：标准盒模型（框模型），如果理解了盒模型中各个元素的用法，才能熟练地使用css的定位方法和技巧。所有的页面的元素都可以抽象成一个盒子（其实也比较贴合现实生活），说通俗点，就是我们要养成这样一个思维习惯：看到一个元素，就要想到它的每一层结构；先来一张W3C教程里的图解镇楼：
image
我们可以看到，平时我们设置的width和height只是一个元素的一部分（也就是实际内容所占的空间），并不是这个元素整体所占的总空间，我们把人当成一个最小单位来举例子：
两个实体：width * height（实际内容所占的大小）——我们的身体 border（边框）：衣服
两个距离：padding（内边距）（父子元素之间的距离）——衣服和身体之间的距离 margin（外边距）（兄弟元素之间的距离）：人与人之间的距离
【注】：1.实际内容所占的大小是必须要有的（不管被撑开，自己设置还是自适应获得的大小），你没肉体，只有灵魂合适吗？我们是唯物主义者；
2.边框看需求，就好比你的衣服出去要穿，洗澡还穿吗？
3.内边距看需求，就好比我们买衣服要买适合自己的尺码，因为需要衣服给自己带来一个合适的空间；
4.外边距看需求，人与人之间的距离，不同的人和你之间的舒适距离不同
说了这么多废话，能看出来除了实际内容所需要的大小，其他都是看需求，也就是看页面的布局需求，说白了，就是用户哪样舒服哪样来。
下面来聊一聊盒模型的使用中注意的地方：其中width、height和border的使用没有什么问题，就是margin和padding使用起来要小心一点，
先来看问题较小的padding，padding是内边距，但是书写了padding（不管哪个方向），盒子大小就会增大，也就是padding是凭空增加的大小，为了不影响其他元素，使用了padding后，我们就要在相应的方向上减去内容的大小，例：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>padding</title>
6 <style>
7 div{width:100px;height:100px;background:yellow;border:2px solid #000;
8 }
9 </style>
10 </head>
11 <body>
12
13 <div>
14 内容
15 </div>
16
17 </body>
18 </html>**</pre>
image
现在我设置了一个width:100px；height:100px；border:2px的元素，总大小是104 x 104**
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>padding</title>
6 <style>
7 div{width:100px;height:100px;background:yellow;border:2px solid #000;padding:10px 15px 0 20px;
8 }
9 </style>
10 </head>
11 <body>
12
13 <div>
14 内容
15 </div>
16
17 </body>
18 </html>**</pre>
image
然后我加入了一个上：10px；右15px；下0px；左：20px的padding，他的总大小变成了（104+15+20） x （104+10）：139 x 114**
下面我们来看下margin的使用需要注意的问题：
问题一：上下mragin会重叠，左右不会（也就是上面元素的margin-bottom和下面元素的margin-top会重合）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>margin问题一</title>
6 <style>
7 .top{width:100px;height:100px;background:yellow;margin-bottom:20px;}
8 .bottom{width:100px;height:100px;background:red;margin-top:100px;}
9 </style>
10 </head>
11 <body>
12
13 <div class="top"></div>
14 <div class="bottom"></div>
15
16
17 </body>
18 </html>**</pre>
image
image
左侧图为上面元素的margin-bottom,右侧图为下面元素的margin-top，我们可以看到下面元素的大距离覆盖了上面元素的小距离，它们之间的距离是100px，而不是120px**
解决手段：只设置一方即可，其实这个只要思维习惯好，就不用担心，因为你的目的是为了设置上面的元素和下面的元素的距离，那么直接给一个元素书写一个总距离margin就可以了
问题二：块元素内的第一个块状子元素的margin-top会向父元素无限传递（也就是只要满足条件，就会一直向上传）
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>margin问题2</title>
6 <style>
7 .top{width:200px;height:200px;background:blue;}
8 .top .top-son1{width:40px;height:40px;background:yellow;margin-top:50px;}
9 .top .top-son2{width:40px;height:40px;background:red;margin-top:30px;}
10 </style>
11 </head>
12 <body>
13
14 <div class="top">
15 <div class="top-son1"></div>
16 <div class="top-son2"></div>
17 </div>
18
19 </body>
20 </html>**</pre>
image
我们可以看到父元素内第二个子元素正常显示了它的margin-top，但第一个子元素的margin-top并没有拉开它与父元素的距离，而是传给了父元素top，使得top和top的父元素body拉开了50px的距离，而且还没完，top作为body的第一个块状子元素，又向body传递了50px的margin-top,导致body和body的父元素html拉开了50px的距离，幸亏body不是html的第一个块状子元素，所以传递到此结束，感觉像瘟疫一样，真的是很可怕。接下来我们来看一下怎么来解决这个问题：**
解决手段一：给父元素设置至少1px 的padding-top
解决手段二：给父元素设置至少1px的border-top
这两个方案明显就是牺牲小我，保全大我，因为虽然解决了，但是改变了大小，导致精确度变差，而且说不定就因为这1px，导致你还要去调其他元素的大小和距离
解决手段三：给父元素设置浮动
解决手段四：给子元素设置浮动
这两个方案感觉有点兴师动众，为了解决这个问题，又跳到了浮动的坑里，就算浮动不会出现问题，那么也打乱了自己的布局思路，感觉划不来
解决手段五：给父元素设置一个属性overflow:hidden
解决手段六：给父元素设置伪类:before{content:"";display:table;}
这个两个方案是目前为止，最偏向完美的解决方案了，不需要改动其他元素额距离，只需要加一条属性即可
问题三：行元素上下会穿透，左右正常
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>margin问题3</title>
6 <style>
7 .top{width:200px;height:100px;background:yellow;}
8 span{background:gray;margin:20px;border:10px solid #000;padding:20px;}
9 .bottom{width:200px;height:100px;background:red;}
10 </style>
11 </head>
12 <body>
13
14 <div class="top"></div>
15 <span>一个行元素</span>
16 <div class="bottom"></div>
17
18 </body>
19 </html>**</pre>
image
我们可以看出行元素的上下margin穿透了上下两个元素**
解决手段：避免给行元素设置上下盒模型
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。
网友评论