注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

margin负值应用  

2014-08-01 16:37:07|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

margin负值应用

一:去除列表中最后一个li元素的border-bottom或者列表中第一个li元素的border-top
实现的效果:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
结构代码:

<div class="module">
<h2>梦幻雪冰博客</h2>
<div class="con">
<ul>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
<li><a href="">这是列表项内容-梦幻雪冰</a></li>
</ul>
</div>
</div>

样式代码:

<style>
.module {
width: 210px;
/*为了实现模块居中显示,如果没有用可以删除掉*/
margin: 100px auto;
/*为了方便查看,对整个模块设置了边框,如果没有用可以删除掉*/
border: 1px solid #0f0;
}
.module div {
/*设置超出隐藏*/
overflow: hidden;
}
.module ul {
/*对整个ul向上移动1px,所以间距为负值*/
margin-top: -1px;
}
.module h2 {
height: 30px;
margin-bottom: 5px;
background:#b8b8b8;
line-height: 30px;
}
.module li {
height: 20px;
/*设置列表项元素的边框样式*/
border-top: 1px dashed #f00;
line-height: 20px;
font-size: 14px;
}
</style>

原理:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
 
为了方便理解画了上面一张图,上面绿色边框代表是ul标签,外面那个黑色边框代表div标签;第一张图代表实现了基本样式的效果;第二张图代表设置了margin-top:-1px(对ul标签向上移动了1px)的效果;第三张图代表div标签设置了overflow:hidden(超出隐藏),所以你在黑色边框看不到了绿色边框,因为被超出隐藏掉了。

优点:
为什么要使用margin负值呢?干嘛不直接在第一个或者最后一个li元素直接取一个类名,然后给类名设置样式,把边框给去除掉;如果你使用了类名实现了去除边框,样式可以实现,但是不利于我们后期的扩展和控制。因为后台传数据是这样子的,结构里面只有一个li元素,如下:

<ul>
<li><a href="">这边的内容是从后台数据库获取(内容可以变化的)</a></li>
</ul>

平时我们从网页中看到的那么多个 <li><a href="">内容是从数据库获取</a></li> 是用后台语言控制显示个数。所以给li元素添加类名去除border,你还需要判断li元素的个数并且在第一个或者最后一个li元素添加类名。使用了margin负值的话,你就不必给第一个或者最后一个li元素添加类名了,也不用管后台传几条数据过来都没有响(前提是布局允许的情况下),扩展性强,方便控制。

二:去除右边距
方法一:
实现的效果:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
结构代码:

<div class='box'>

<div class='con clearfix'>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
</div>
</div>
样式代码:

<style type='text/css'>
.box {
/*设置超出隐藏*/
overflow: hidden;
width: 580px;
height: 220px;
border: 1px solid green;
}
.con div {
float: left;
width: 100px;
height: 100px;
margin: 0 20px 20px 0;
background-color: #fcf;
}
.con {
width: 600px;
}
</style>

原理:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
为了方便理解画了一张图片,黑色的边框代表是最外层的div,绿色代表是10个div的父级,也就是这10个div被这个div个包含着。其实这个原理就是这样,最外层设置了width: 580px;height: 220px;,而里面那个div设置了width: 600px;(为了保证float布局正常,如果宽度不够的话,就不能正常浮动布局),所以显示出来就行第一张图片那样子;你在最外层设置了overflow:hidden;超出的范围就被隐藏掉了,看不到了,效果就出来了。
但是怎么没有用到margin负值呢?,上面这一种做法是没有用到margin负值,那接下来讲一下margin负值的做法。
方法二:
实现效果:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
结构代码:

<div class='box'>
<div class='con clearfix'>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
<div>margin负值-梦幻雪冰</div>
</div>
</div>

样式代码:

<style type='text/css'>
.box {
overflow: hidden;
float: left;
border: 1px solid green;
}
.con div {
float: left;
width: 100px;
height: 100px;
margin: 20px 0 0 20px;
background-color: #fcf;
}
.con {
width: 600px;
margin: -20px 0 0 -20px;
}
</style>

原理:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
 为了方便理解画了一张图片,黑色的边框代表是最外层的div,绿色代表是10个div的父级,也就是这10个div被这个div个包含着。只需要把里面那个绿色的边框(包含10个div的元素)向左移动20px,向上移动20px,因为边距都是20px,在最外层div设置了overflow:hidden,样式就实现了;但是你如果给最外层的div设置了宽高,效果如下:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
发现右边和下边都出现了间距,因为你给最外层的div设置了宽高,导致你隐藏了左边和上边的边距,又出现了右边和下边的边距,(简单的理解,就是两个人一起睡觉,一个人把被子卷走了,另外一个人没有被子盖了,于是另外一个人又把被子抢过来了,另外一个人没有被子盖了。如果这个被子的大小会动态变化,这两个人就不会没有被子盖了,上面也是同样的道理),于是给最外层的div设置了float:left,靠内容撑开,里面的元素宽高决定最外层的宽高(也就是说内容撑开宽高)
三:去除列表左边框
实现效果:
margin负值应用 - 梦幻雪冰 - 梦幻雪冰
 结构代码:

<div class="wrap">
<div class="nav clearfix">
<div class="clearfix">
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
<a href="">梦幻雪冰</a>
</div>
</div>
</div>

样式代码:

<style>
.nav {
/*超出隐藏*/
overflow: hidden;
width: 980px;
/*设置水平居中,测试使用可以删除*/
margin: 100px auto;
background: #999;
}
.nav div {
/*向左移动1px*/
margin-left: -1px;
}
.nav a {
float: left;
height: 40px;
/*内容大小和padding撑开a标签大小*/
padding: 0px 25px;
border-left: 1px solid #f00;
/*垂直居中*/
line-height: 40px;
/*字体加粗*/
font-weight: bold;
font-size: 12px;
color: #E1E5E4;
/*文本装饰没有下划线*/
text-decoration: none;
/*水平居中*/
text-align: center;
}
/*鼠标移入效果*/
.nav a:hover {
background: #b8b8b8;
}
</style>

原理:这边就不再说了,上面已经提到了

友情提示:大家最好看完后,自己拿起电脑试试,看能不能实现出来,实践是检验真理的唯一标准。

 

  
  
  评论这张
 
阅读(194)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017