HTML笔记 ·

负margin在页面布局中的应用

两栏布局

在页面中经常会遇到两列的情况,比如说左侧栏固定宽度,右侧栏自适应宽度,此时可以用flex布局的方式,但是这种方式在ie8上不兼容,但是也可以用table。这里我们来说用margin的负值来实现两栏布局。

<div>
	<div style="height: 400px;float: left;width: 100%;background: green;">
		<div style="margin-left: 200px;">sdfsfdfsd</div>
	</div>
	<div style="height: 400px;float: left;width: 200px;background: red;margin-left: -100%;"></div>
</div>

如上代码,即可实现一个两列的布局,具体效果就是下图负margin在页面布局中的应用

去除列表右边距

项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:

html:

<div id="test">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </div>

css

 body,ul,li{ padding:0; margin:0;}
    ul,li{ list-style:none;}
    #test{
        width:320px;
        height:210px;
        background:#CCC;
    }
    #test ul{
        margin-right:-10px;
        zoom:1;
    }
    #test ul li{
        width:100px;
        height:100px;
        background:#F60;
        margin-right:10px;
        margin-bottom:10px;
        float:left;
    }

具体实现效果

负margin在页面布局中的应用

去除列表最后一个li元素的border-bottom

列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

HTML

<ul id="test">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>

CSS

 body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }

具体实现效果负margin在页面布局中的应用

参与评论