3-2问题
来源：3-1 实战分析
OlafChou
2017-05-18 08:50:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
li{list-style-type: none;}
.boss{width: 760px;border: 1px dashed #000;overflow: hidden;margin: 0 auto;
margin-top:80px; }
.one,.two,.three,.four,.five,.six{float: left;border: 1px solid #9e9e9e; margin: 5px 5px;}
</style>
</head>
<body>
<div>
<div>
<ul><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div>
<ul><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div>
<ul><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div>
<ul><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div>
<ul><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div>
<ul><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
</div>
</body>
</html>
三个问题
1、boss里面能不能这样写：margin: 0 auto;margin-top:80px; 理由是想让大盒子居中，然后距离顶部80px;所以我采取了这样的写法；
2、小盒子之间的间距用：margin: 5px 5px;这样的做法为何会出现边距相等的情况，不是说marign共用上下间距的吗，现在为何不共用了呢？
3、是不是不管小盒子有没有浮动，即使他们浮动了，如果父级的宽度不够的话，他们仍然会换行？说明他们还是没有完全脱离父级的存在？那浮动的并不是完全的脱离，对不？
4、还有为何我的图片四周间距不相等，我给boss的宽度是760，图片的大小事是240，760=240*3+4*10；那为何边距的效果不一致呢？
2回答
-
一路电光带火花
2017-05-18
比如说，div里面有俩div，A和B，他俩就按照顺序在页面中放着，后来给A设置了浮动，那么A就脱离文档流，浮在了它原有位置的上面，B呢就顶替了A的位置，A呢就在B的上面。
0 -
小于飞飞
2017-05-18
你好，问题分析及建议如下：
boss 可以 margin: 0 auto;margin-top:80px; 这样写，使其大盒子居中，距上面80 px .
当设置 float 的元素在设置 margin 上下不会重叠。
官方的解释：
. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
4. boss 的宽度是 760px , 里面的小盒子，一行三个小盒子，根据设置 总宽为 240 *3 +1(边框)*6+ 5（边距）*6 =756 , 又由于左浮动右侧多出4 px .
希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。
0h017-05-18
相似问题