关于负margin的一些应用

时间：2021-05-08

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

1. 实现左右两列布局

方法一：

XML/HTML Code复制内容到剪贴板
  • <div>
  • <divstyle="float:left;width:200px;">左侧</div>
  • <divstyle="margin-left:200px;background:#999;">右侧</div>
  • </div>

    • 方法二：

    XML/HTML Code复制内容到剪贴板
  • <div>
  • <divstyle="width:200px;height:200px;">左侧</div>
  • <divstyle="margin-left:200px;margin-top:-200px;">右侧</div>
  • </div>

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

    2.导航栏

    XML/HTML Code复制内容到剪贴板
  • <!doctypehtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>Document</title>
  • <styletype="text/css">
  • *{
  • margin:0;
  • border:0;
  • padding:0;
  • }
  • ul{
  • overflow:hidden;
  • }
  • ulli{
  • background:#999;
  • border-left:1pxsolid#000;
  • width:60px;
  • height:30px;
  • float:left;
  • list-style:none;
  • text-align:center;
  • margin-left:-1px;
  • }
  • </style>
  • </head>
  • <body>
  • <divstyle="margin-left:20px;">
  • <ul>
  • <li>1</li>
  • <li>2</li>
  • <li>3</li>
  • </ul>
  • </div>
  • </body>
  • </html>

    • 或者：

    XML/HTML Code复制内容到剪贴板
  • <!doctypehtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>Document</title>
  • <styletype="text/css">
  • *{
  • margin:0;
  • border:0;
  • padding:0;
  • }
  • ul{
  • }
  • ulli{
  • background:#999;
  • border-left:1pxsolid#000;
  • border-right:1pxsolid#000;
  • width:60px;
  • height:30px;
  • float:left;
  • list-style:none;
  • text-align:center;
  • margin-left:-1px;
  • }
  • </style>
  • </head>
  • <body>
  • <divstyle="margin-left:20px;">
  • <ul>
  • <li>1</li>
  • <li>2</li>
  • <li>3</li>
  • </ul>
  • </div>
  • </body>
  • </html>
    • 合理使用overflow以及-margin 。

    以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

    原文地址：http://blog.csdn.net/fanhaiwang520/article/details/8950189

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章