好用的负margin

负margin是一个很好用的属性,这里主要介绍几种我碰到的情景。

一、自适应布局

       这个在前面的三栏布局中已经介绍,负margin和float组合使用,详见http://km.oa.com/group/23033/articles/show/225239

二、去除列表右边距 
       项目中经常会使用浮动列表展示信息,为了美观通常为每个li元素之间设置一定的间距,这个间距通过给每个li设置一定的margin-right值实现。于是得到下面的结果:

        但是我们实际想要的结果(最右边不需要间距):

       去除最右边的边距只需给父元素设置相应的负margin值,该值的绝对值刚好是li元素的marging-right值。与依次去掉最右边li元素的margin-right值相比,该方法更加简单,一劳永逸。

ul{
        margin-right:-10px;
    }

 

demo戳这里:http://runjs.cn/code/pxpe2xqg 

三、实现元素居中

       这个在前面已经介绍,详见:http://km.oa.com/group/23033/articles/show/224911?kmref=author_post

四、元素重叠

       第一次碰见需要元素重叠是在做网上银行界面改动时,类似于下图,parta和partb属于不同的父元素,在不能改变html文档结构的前提下,将parta和partb显示在同一行。

         实现方法很简单哦,将partb的margin-top设置为负的parta的高就好。

.partb
	{
	margin-top:-80px;
	}

 

demo戳这里:http://runjs.cn/code/xl8f112k

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章