上节课呢，我们介绍了一个很重要的概念——盒模型
主要介绍了盒模型的一些基础知识：margin padding的概念 以及margin:0 auto;和margin的塌陷
如果对上述知识点还有不清楚的地方大家一定要弄懂
要不然再往下看的话比较费劲
这节课的话我们接着上节课的话题继续扯
实际上关于margin的话题还远远不止我们上节课说的那些问题
我们再看下面一个布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx</title> <style type="text/css"> #div1{ width:300px; height:300px; background: gray;} #div2{ width:100px; height:100px; background: red;} </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
预览之后结果很正常：
这时我们给div2加上margin:30px;
大家先不要看我贴出来的预览图，先想想会是什么样的
是不是应该在灰色的div1中有个红色的div2，然后这个div2距离div1的上边界和左边界各30px
没错，理论上应该是这样，但是浏览器没有按照这样解析，它解析成了
距离左边没什么问题，稍微一瞄大概就是30px那个样子
但是距离上面好奇怪，红色的div2居然直接顶上去了
再仔细一看，好像div1的上面距离浏览器可视区的边界好像和之前不一样了
给我们的感觉好像就是div2的margin-top传递给了div1
没错，就是这样，浏览器解析的有问题
其实像chrome、FireFox、IE8+等这些浏览器解析CSS还算是比较好了
在IE6 IE7这些老版本的浏览器下出的问题更多
好在现在的公司都不要求兼容IE6、7这种版本很低的浏览器了
当然，我们刚刚提到的这个问题是有解决方案的
我给大家说两种解决的方案
首先，第一种，我们其实可以转变一下思路
需求不就是想让div2距离div1的上面和左边有30px吗？
除了对div2下手，去设置它的margin之外难道就没有别的办法了吗？
肯定有，我们思考一下子元素的margin是不是就等同于父元素的padding呢？
那么在我们这里div2的margin是不是就可以用div1的padding代替呢？
所以，大家基本上可以猜出我要干什么了
没错，给div1加padding:30px;即可
顺便说句废话，记得把div2的margin去掉
再次预览：
不过，大家发现了没有，好像我们灰色的div1变大了
为什么变大了呢？
之前我们讲padding已经解释的很清楚了
给一个元素加padding是在width和height的基础之上加的
也就是说我们在页面上看起来的宽实际上应该是width加上padding-left，再加上padding-right
而页面上看起来的高实际上应该是height加上padding-top，再加上padding-bottom
好的，知道问题所在了，如果想让看起来的宽和高恢复到之前的大小怎么办呢？
很简单，把div1的width减去padding-left和padding-right不就可以了么？
div1的height减多少想必不用我多说了
好的，第一种方法我们介绍到这里
总结一下，其实就是将子元素的margin转换为了父元素的padding而已
那么接下来介绍的第二种方法，可以说就是先人们不断探索得到的一种方法了
为什么这么说呢？
因为初学CSS的人听了这种方法会感觉不可思议
其实方法内部蕴含了很深的东西，不是一时半会儿能理解了的
不小心又说了这么多废话，好的，直接给大家解决方案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx</title> <style type="text/css"> #div1{ width:300px; height:300px; background: gray; border:1px solid gray;} #div2{ width:100px; height:100px; background: red; margin:30px;} </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
大家可以发现，我给div1加了一个border就好了
此时大家一定有疑问，为什么加了border就好了呢？
对于这个问题，到目前为止我也没有弄的太明白
恕我才疏学浅
看到这里的朋友们有兴趣的话可以上网搜一些相关的资料找找原因
当然，我们给div1加了1px的border，而且是和div1的background一样的gray
那么div1看起来的宽度就会增加2px，成了302px了
这一点大家一定要注意
好了，至此为止我们的盒模型中的一些基础知识以及经常遇到的问题给大家介绍的差不多了
但是看了这么多例子不知道大家发现了没有
我们在页面中显示的每个div好像距离浏览器的可视区左边和上面都有一定的距离
其实，我这么跟大家说吧，如果我们的页面里面什么都不写
预览之后一片空白
但实际上还是有一个元素的
谁呢？
body
body是我们写的那些div、a、ul、li等等所有元素的根元素
那么知道了这一点之后我们再回想一下，上面的例子里面我们给div1加margin了吗？
没有吧？
那正常情况下div1是不是应该紧贴着浏览器的左边和上面的？
但实际情况却不是这样
那接下来我们就可以猜测这应该是body这个元素的margin或者padding
好的，大家脑子一定不要乱，认真想想为什么body的margin或者padding都可以造成这个间距
想好了之后我再告诉大家一个秘密：这个margin或者padding是浏览器自己加上去的
那么这个间距到底是margin还是padding呢？
摁下我们久违的F12
仔细观察我用橙色的箭头和框标注的样式，框的右上角有一行文字user agent stylesheet
不用管它翻译过来是什么意思了，就记住这是浏览器自带的样式就OK了
控制台已经很明白的告诉我们浏览器默认给body加的样式是margin了
好的，现在问题来了
浏览器既然自己会给body加个margin
那它会不会给其他元素，比如div ul li加什么东西呢？
实际的情况是有些标签加了，有些标签没有加
这样一来就会给我们造成一些麻烦，因为浏览器给我们加的那些乱七八糟的东西我们可能不太需要
所以我们就要把浏览器给我们加的那些东西干掉
干掉的方法有两种
第一种，我们需要把所有的元素挨盘儿检测一下
看看浏览器都给它们加了什么，然后自己去覆盖
实际上已经有人帮我们做过这个工作了
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, fieldset, legend, button, input, textarea, th, td{ margin: 0; padding: 0;}
这个是我从网上随便拿了一小段过来的，这里面基本上涵盖了我们常用到的所有标签
怎么说呢？这个东西就是看起来啰嗦一些而已
在公司里面开发的时候可以直接在网上一搜，复制过来一个现成的就可以
第二种，很简洁
*{ margin:0; padding:0;}
*的意思就是所有的元素
写了这句话的话，浏览器加载我们的页面时
会将所有元素挨盘儿过一遍，不管浏览器有没有给它margin或padding
都会重新再设置它的margin为0，padding为0
这种方式显得貌似简单粗暴了一些
而且从我刚刚接触到CSS到正式参加工作的时候听很多人说过这样写不好
会使浏览器变卡，影响性能
不过我在之前的一家公司可以明目张胆的用*{margin:0; padding:0;}
而且项目都已经上线很长时间了
也没有发现什么性能不好之类的问题
所以具体用哪种方案就要看公司要求了
我平时也感觉第一种方式写那么一长串东西实在是烦死人了
说了这么多，我们还是看一下效果吧
在我们的style标签里的最前面加上*{margin:0; padding:0;}
预览之后得到
我们就会发现灰色的块紧紧贴着浏览器的边缘
这样一来，我们的愿望基本上实现了
当然在这里需要多说一句的是
浏览器给我们加的默认样式不是只有margin、padding
例如对于a标签默认的颜色是蓝色，而且还有很难看的下划线
点击之后默认变成紫色
还有对于li元素默认会有一个小黑点等等
这都是浏览器的默认样式
当然也都可以给它清掉
我们到后面遇到了再说
好的，这节课我们又介绍了关于盒模型的一些东西
当然我们的盒模型还没完，下节课接着来扯