margin负值设置理解

最新推荐文章于 2020-10-10 17:12:26 发布

haveadream66666

最新推荐文章于 2020-10-10 17:12:26 发布

阅读量137

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/haveadream66666/article/details/84224055

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<style type="text/css">
.d{width:1000;float:left;}
*{margin:0;padding:0}
.d0{width:800px;height:300px;background:black;}
.d1{background:red;width:250px;height:300px;float:left;margin-left:-50%;}
.d2{background:yellow;width:250px;height:300px;float:left;}
</style>
</head>
<body style="width:1000 ;margin:0 auto">
<div class="d">
<div class="d0">
</div>
</div>
<div class="d1">
</div>
<div class="d2">
</div>
</body>
</html>
一、同一级别的盒子
1、盒子上下排列，上面盒子没有设置float属性，下面盒子设置float属性，那么下面盒子只能在原来所在行浮动。
2、盒子上下排列，上面盒子设置float属性，下面盒子没有设置float属性，那么下面盒子降跑向上面盒子所在位置，上面盒子盖在下面盒子上面。
3、盒子上下排列，上下盒子都设置float属性，那么下面盒子将紧挨着上面盒子浮动。
4、盒子上下排列，上下盒子都设置float属性，下盒子margin-left:设成负值，当负值正好大于等于下盒子宽度是下盒子跑到上盒子所在行。
5、盒子上下排列，上盒子没设置float属性，下盒子设置float属性，改变下盒子margin-left:设成负值，随便设置多少下盒子都不会跑到上盒子上。