搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

一篇关于负margin的一些应用

发布时间：2023-01-02 12:01:13 来源：网络
.
人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。你在看孤独的风景，你在逃避我的真心!

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

1. 实现左右两列布局

方法一：

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

方法二：

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

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

2.导航栏

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Document</title>
  6. <styletype="text/css">
  7. *{
  8. margin:0;
  9. border:0;
  10. padding:0;
  11. }
  12. ul{
  13. overflow:hidden;
  14. }
  15. ulli{
  16. background:#999;
  17. border-left:1pxsolid#000;
  18. width:60px;
  19. height:30px;
  20. float:left;
  21. list-style:none;
  22. text-align:center;
  23. margin-left:-1px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <divstyle="margin-left:20px;">
  29. <ul>
  30. <li>1</li>
  31. <li>2</li>
  32. <li>3</li>
  33. </ul>
  34. </div>
  35. </body>
  36. </html>

或者：

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Document</title>
  6. <styletype="text/css">
  7. *{
  8. margin:0;
  9. border:0;
  10. padding:0;
  11. }
  12. ul{
  14. }
  15. ulli{
  16. background:#999;
  17. border-left:1pxsolid#000;
  18. border-right:1pxsolid#000;
  19. width:60px;
  20. height:30px;
  21. float:left;
  22. list-style:none;
  23. text-align:center;
  24. margin-left:-1px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <divstyle="margin-left:20px;">
  30. <ul>
  31. <li>1</li>
  32. <li>2</li>
  33. <li>3</li>
  34. </ul>
  35. </div>
  36. </body>
  37. </html>
合理使用overflow以及-margin 。

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

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

以下您可能有感兴趣的文章:
标签： 一篇关于 margin
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图