关于负margin的一些应用
发布时间:2016-07-12 11:52:30 作者:佚名 我要评论
下面小编就为大家带来一篇关于负margin的一些应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近听大家在讨论 负margin的一些应用,所以自己研究一下,下面做一些记录。
1. 实现左右两列布局
方法一:
XML/HTML Code复制内容到剪贴板
- <div>
- <div style="float:left;width:200px;">左侧</div>
- <div style="margin-left:200px;background:#999;">右侧</div>
- </div>
方法二:
XML/HTML Code复制内容到剪贴板
- <div>
- <div style="width:200px;height:200px;">左侧</div>
- <div style="margin-left:200px;margin-top:-200px;">右侧</div>
- </div>
对比两种方法,第一种用到float,弊端就是应用float在IE中可能引起很多bug,第二种的话用-margin,本事还是比较赞的,暂时没发现没事问题;
2.导航栏
XML/HTML Code复制内容到剪贴板
- <!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>
或者:
XML/HTML Code复制内容到剪贴板
- <!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>
以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
原文地址:http://blog.csdn.net/fanhaiwang520/article/details/8950189
相关文章
- 下面小编就为大家带来一篇CSS 之margin知识点(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-10
- 这篇文章主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-07-07
- margin属性可以决定很多HTML元素的宽高度,因而在布局方面也能够有很重要的作用,接下来我们就来看一下CSS的margin属性在页面布局中的使用攻略2016-05-26
- 这篇文章和大家详细说一说CSS中margin属性的使用,重点描述了关于margin,我们日常不太容易发现的“坑,感兴趣的小伙伴们可以参考一下2016-02-25
- 这篇文章主要介绍了CSS中的margin属性的使用,margin是元素盒模型(box model)的基础属性,常被用来设置外边距,实际用途非常广泛,需要的朋友可以参考下2016-02-02
- 这篇文章主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下2015-07-15
- 这篇文章主要介绍了关于ol和ul的padding和margin默认值,需要的朋友可以参考下2014-10-26
- margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相2014-10-22
最新评论