margin负值的布局使用

1。负红利 上:程度铅直校准
适合相对上来上人体细胞核的使满足。,那时的适合压缩边界(使满足宽度的半个的),把使满足的核带回人体细胞的核。,已到达者程度铅直校准的音响效果。

.content{
    width:550px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-275px;
    margin-top:-210px;
    border:1px dashed #333;
    background:#eee;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:10px;
}

2。砍掉列表的一直距。
漂列表通常用于显示提出罪状正中鹄的书信。,因为美,每个列表中间通常有必然的间隔(镶边RI)。,父元素系牢宽度,每行右舷的Li元素的一直距是冗余的。,移除的方式通常是在左边添加李类。,设定保释金正常的:0 该方式需求静态决定什么人李元素添加类。,折磨!!!适合压缩边界那就够了实施。

html

<div><ul><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li><li><imgsrc=……JPGalt="" />li>ul>div>

css

.list_wrap{
    width:640px;
    overflow:hidden;
    background:#ccc;
}.list_wrapul{
    margin-right:-30px;
    overflow:hidden;
    zoom:1;
}.list_wrapulli{
    float:left;
    width:120px;
    height:120px;
    margin:010px 10px 0;
}.list_wrapulliimg{
    width:120px;
    height:120px;
}.remove_margin_bottom{
    margin-top:30px;
}.remove_margin_bottomul{
    margin-bottom:-10px;
}

三。砍掉列表中上个任何人Li元素的边框欢呼。
我们家常常在列表中添加边框欢呼值。,李的上个任何人利润常常与外框登记。,视觉上局促不安,常搞掉。音响效果列举如下:

有很多方式。,添加类以移除,这种方式需求毁灭HTML框架。;替代的方式是适合框架伪类:第n体格(AN B),设置a:last-child{border-bottom:0 none;},三灾八难的是,我们家的IE6不支持这种上进的探测器。。不外,我们家可以设置边距欢呼:-1px为李元历来实施。,还不要设置UL/OL的高等的。,为了高等的,请在外界上设置任何人DIV高等的。。

html框架

<ul><li>陆地出神成像将以后发布。 星和禽的地区推延了25秒。li><li>禽级残骸用沥青涂贵州 使方向转换罩坠入江西li><li>奇纳航天系统的困处 当美国航天局:汇成月球没有要紧li><li>奇纳长城计算机集团公司特警守夜。 琼楼金阙观光客庞大的生产率 国庆节半价li><li>菊月,人民币兑一元纸币再评价。 外汇收入增幅最大的一个月的时间li><li>温家宝:奇纳将积极参与希腊新发行财政长期债券捐款li><li>俄罗斯帝国总统梅德韦杰夫暗中策划到达者日本有争议的岛。li><li>美国统一航空公司和贞洁的航空公司 装饰最大航空公司的诞li>ul>

css

ul.test1{
    margin:20px;
    width:390px;
    background:#F4F8FC;
    -moz-border-radius:3px 3px 3px 3px;
    -webkit-border-radius:3px 3px 3px 3px;
    border-radius:3px 3px 3px 3px;
    border:2px solid #D7E2EC;
}ul.test1li{
    height:25px;
    line-height:25px;
    padding:5px;
    border-bottom:1px dotted #D5D5D5;
    margin-bottom:-1px;
}

4。带压缩边界的自适应规划(打我大浪的心。,获得)
此示例一致的列宽度系牢列宽度自适应规划。,就像QQmail同样的。,航海杆宽度,使满足区域随浏览程序体积自动化机器或设备缩放。。

<divid="header"><h2>#headerh2>div><divid="container"><divid="content"><h2>#contenth2>
    your content goes here.
  div>div><divid="sidebar"><h2>#sidebarh2><ul><li>link-1li><li>link-2li><li>link-3li><li>link-4li><li>link-5li><li>link-6li><li>link-7li><li>link-8li>ul>div><divid="footer"><h2>#footerh2>div>

发生适合百分最近决定元素宽度是很心净的。,还浏览程序不克不及了解100% -200 px的表现。。这边我们家需求嵌套元素和压缩边界。。自然,现时有计算的方式。,还我忘了。,我觉得计算帐单的规划过错地租。,最好用CSS方式来处理这么地问题。

#header{
    background:#d7dabd;
    height:60px;
}#container{
    width:100%;
    float:left;
    margin-right:-200px;
}#content{
    background:#f1f2ea;
    margin-right:200px;
}#sidebar{
    background:#e5e7d3;
    width:200px;
    float:right;
}#footer{
    background:#d7dabd;
    clear:both;
    height:60px;
}

5。三栏高等的
这种情况的枢要是为每个框设置任何人大的欢呼边距。,那时的用数值上接近的压缩边界去除这么地高等的。。这会造成每个列过多打包元素。,免得外包打包的过多属性设置为躲藏,柱在最远点处被刻。。

html框架

<divclass="wrapper"><divclass="box"><h1>Andy Buddh1><p>your content goes here.p><divclass="bottom">div>div><divclass="box"><h1>Richard Rutterh1><p>your content goes here.p><divclass="bottom">div>div><divclass="box"><h1>Jeremy Keithh1><p>your content goes here.p><divclass="bottom">div>div>div>

CSS

.wrapper{
    overflow:hidden;
    width:100%;
    position: relative;
}.box{
    width:250px;
    margin-left:20px;
    float:left;
    display:inline;
    padding:20px;
    padding-bottom:220px;
    margin-bottom:-200px;
    background:#89ac10url(img/) no-repeat left top;
}.bottom{
    position:absolute;
    bottom:0;
    height:20px;
    width:290px;
    background:#89ac10url(img/) no-repeat left bottom;
    margin-left:-20px;
}

转载交链有demo,我这就录用了法典!!!!
转载交链:负值之美:负值在浏览规划正中鹄的适合
参考资料
—————-
1. RYAN BRILL. Creating Liquid Layouts with Negative Margins[EB/OL].
2. Andy Budd, Simon Collison, Cameron Moll. 通晓css:较高的web基准处理方案[M].现在称Beijing:人民邮电紧抱,2010.5
3.Google Reader

发表评论

电子邮件地址不会被公开。 必填项已用*标注