day26 css坍塌边界
外边距margin
外边距的设置规则：
1. 首先查找父元素有没边框
2. 再看看设置边距元素前面有没文本
3. 在看看父元素有没设置内边距padding
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. }
7. .inner{
8. background:red;
9. height:100px;
10. width:100px;
11. }
12. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="inner"></div>
4. </div>
5.
6.</body>
结果：
需求：将红色的方块移到灰色块的中心？
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. /*border:1px solid #ccc;*/
7. }
8. .inner{
9. background:red;
10. height:100px;
11. width:100px;
12. margin-top:100px;
13. margin-left:100px;
14. }
15. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="inner"></div>
4. </div>
5.
6.</body>
我们看到当我们将外层的div的border注释掉的时候；按照我们正常的思维；inner在out里面；即设置inner的margin会将其与out留出外边距；但是结果：
分析：
结果是左右留出了边距；但是上面本身是与out的边距；但是结果；和out没变化；却是inner和out一起动的。
问题：怎么会这样那，其中的运行规则是什么？
1、这样我们要明白；边距的查找规则，首先是找父元素的边界；没边界就找文本；没文本找内边距padding；这是margin设置的依据。
2、如果在当前的父元素内没找到；会继续往上找
3、根据代码；我们看出当前inner的父元素out并没上面的3个条件；所以他会继续往上找；则找到body；body肯定是有边界的；所以，结果设置的margin是相对body的
问题：验证上面说的margin设置依据的三个条件？
1、为父元素设置边界
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. border:1px solid #ccc;
7. }
8. .A{
9. background:red;
10. height:100px;
11. width:100px;
12. margin:100px;
13. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="A"></div>
4. </div>
5.
6.</body>
结果显示：
2、父元素内有文本
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. }
7. .A{
8. background:red;
9. height:100px;
10. width:100px;
11. margin:100px;
12. </style>
html代码：
1.<div class="out">
2. sfdhdfhdsf
3. <div class="A"></div>
4. </div>
结果显示：
注意：
文本要是在设置外边距元素的后面；是不起作用的。
文本在红色框后面
html代码：
1.<body>
2. <div class="out">
3. <div class="A"></div>
4. sdfsdf
5. </div>
6.
7.</body>
结果显示：
父元素设置内边距padding
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. padding:5px;
7. }
8. .A{
9. background:red;
10. height:100px;
11. width:100px;
12. margin:100px;
13. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="A"></div>
4. </div>
5.
6.</body>
结果显示：
注意：
内边距padding的设置；会对元素本身的尺寸有影响；实际应用中要注意调节
扩展
两个同辈元素将的margin
一、在out里面增加2个框；然后都是设置margin：20px；看结果
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. }
7. .inner{
8. background:red;
9. height:100px;
10. width:100px;
11. margin:20px;
12. }
13. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="inner"></div>
4. <div class="inner"></div>
5. </div>
6.
7.</body>
结果显示：
问题：
顶部inner设置的外边的情况；我们在前面分析了；但是out里面的两个同辈的子元素；我们从代码中知道；我们为每个子元素都设置了外边距；可以这样理解；上面的红色块四周都有外边距20px；下面的红色块四周也有外边距20px；那么上面红色块底部的外边距20px和西面红色块的上外边距20px；加起来应该是40px；可是结果却是20px；原因？
这里是盒子模型的一个语法规则；两个子元素之间这只外边距margin；则以数大的为准
看下面的代码：
css代码：
1.<style>
2. .out{
3. background:#ccc;
4. width:300px;
5. height:300px;
6. }
7. .A{
8. background:red;
9. height:100px;
10. width:100px;
11. margin:40px;
12. }
13. .B{
14. background:red;
15. height:100px;
16. width:100px;
17. margin:20px;
18. }
19. </style>
html代码：
1.<body>
2. <div class="out">
3. <div class="A"></div>
4. <div class="B"></div>
5. </div>
6.
7.</body>
结果：
分析：
上面的盒子的外边距我们设为了40px；下面的盒子边距还是为20px；但是结果和上面的图对比；我们发现是按40px；边距来显示的；所以；印证了上面的那句话；同父元素的子元素间设置；外边距margin则以数大的为准
分析浏览器默认边距
问题：
从上面的操作中我们发现‘在浏览器的结果显示中；设置的元素并没和浏览器边界重合；都有间距。
图中红色线包围的部分
那这个边距是属于谁的那？body还是html
很简单：
我们为body设置个边框
1.body{
2. border:5px solid red
3.}
结果显示：
从上面的图中看出这个边框不包含在body中；不属于body。
问题：怎样清除那？
用前面学的我们可以设置body的margin
1.body{
2. border:5px solid red;
3. margin:0;
4.}
结果显示：
结果完美解决
问题：既然body能解决；那最外层html用内边距内padding否解决那？
css代码：
1.html{
2. padding:0;
3.}
4.body{
5. border:5px solid red;
6.}
结果显示：
可以看到结果没什么变化
总结：
1、浏览器最外边的边距默认的是body的外边距margin
2、htm标签的内边距padding不能解决这个边距
浙公网安备 33010602011771号