关于负margin的一些应用

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含margin等相关知识,佚名希望在学习及工作中可以帮助到您

最近听大家在讨论负margin的一些应用，所以自己研究一下，下面做一些记录。

1. 实现左右两列布局

方法一：

<div>
<div style="float:left;width:200px;">左侧</div>
<div style="margin-left:200px;background:#999;">右侧</div>
</div>

方法二：

<div>
<div style="width:200px;height:200px;">左侧</div>
<div style="margin-left:200px;margin-top:-200px;">右侧</div>
</div>

对比两种方法，第一种用到float，弊端就是应用float在IE中可能引起很多bug，第二种的话用-margin，本事还是比较赞的，暂时没发现没事问题；

2.导航栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
border: 0;
padding: 0;
}
ul{
overflow: hidden;
}
ul li{
background: #999;
border-left: 1px solid #000;
width:60px;
height:30px;
float: left;
list-style: none;
text-align: center;
margin-left:-1px;
}
</style>
</head>
<body>
<div style

您可能想查找下面的文章:

相关文章

2017-08-06详解CSS中的规则声明
2017-08-06cellpadding=0 cellspacing=0的css替代写法
2017-08-06IE7下生成高质量CSS缩略图
2017-08-06常用的CSS命名规则 web标准化设计
2017-08-06IE6盒子模型没问题详测双倍边距
2017-08-06css实现兼容火狐、IE的LI奇偶行颜色交替方法
2017-08-06纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2017-08-06并排的两个对象如何水平对齐兼容ie6
2017-08-06CSS伪类对象before和after的用法实例详解
2017-08-06web标准教程，帮你走进web标准设计的世界第三讲（html终结篇）