负margin的一些应用

最新推荐文章于 2020-12-03 16:22:07 发布

woshifan1989

最新推荐文章于 2020-12-03 16:22:07 发布

阅读量578

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/fanhaiwang520/article/details/8950189

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

1. 实现左右两列布局

方法一：

方法二：

对比两种方法，第一种用到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="margin-left:20px;">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    </div>
</body>
</html>

或者：

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

合理使用overflow以及-margin