margin 负值应用

最新推荐文章于 2019-12-20 13:39:16 发布

Zoe_Wang_ing

最新推荐文章于 2019-12-20 13:39:16 发布

阅读量669

点赞数

分类专栏： html css 文章标签： margin负值布局

css 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

html

76 篇文章 0 订阅

订阅专栏

转自：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 有改动

关于负值的原理建议看这个：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

1.左右列固定，中间列自适应布局

css

<style type="text/css">
body{
	margin:0;
	padding:0;
	min-width:600px;
}
.main{
	width:100%;
	float:left;
	background:#06F;
}
.main_body{
	margin:0 210px;
	height:200px;
	background:#9F0;
}
.left,.right{
	width:200px;
	float:left;
	height:200px;
	background:#F60;
}
.left{
	margin-left:-100%;
}
.right{
	margin-left:-200px;
}
</style>

html

<div class="main">
	<div class="main_body">Main_body</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

1.去除列表右边框

css

<style type="text/css">
body,ul,li{
	padding:0;
	margin:0;
}
ul li{
	list-style:none;
}
.box{
	width:320px;
	height:210px;
	border:5px solid #000;
}
.list{
	margin-right:-10px;
	zoom:1;
	overflow:hidden;
}
.list li{
	width:100px;
	height:100px;
	margin-right:10px;
	margin-bottom:10px;
	background:#060;
	float:left;
}
</style>

html

<div class="box">
	<ul class="list">
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

3.负边距+定位，水平垂直居中

css

<style type="text/css">
#test{
	background:#9C0;
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-100px;
}
</style>

html

<div id="test"></div>

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>去除列表最后一个元素的li的border-bottom</title>
<style type="text/css">
body,ul,li{
	margin:0;
	padding:0;
}
ul,li{
	list-style:none;
}
#test{
	width:400px;
	margin:20px;
	background:#0FF;
	border:2px solid #009;
	border-radius:3px;
}
#test li{
	height:25px;
	line-height:25px;
	padding:5px;
	border-bottom:1px dotted #FF0000;
	margin-bottom:-1px;
}
</style>
</head>

<body>

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

</body>

5.多列等高

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多列等高</title>
<style type="text/css">
body{
	margin:0;
	padding:0;
}
#warp{
	width:600px;
	overflow:hidden;
	margin:0 auto;
}
#left,#center,#right{
	padding-bottom:200px;
	margin-bottom:-200px;
	float:left;
}
#left{
	width:100px;
	height:50px;
	background:#CCC;
}
#center{
	width:200px;
	height:100px;
	background:#999;
}
#right{
	width:300px;
	height:200px;
	background:#666;
}
</style>
</head>

<body>
<div id="warp">
	<div id="left">
    	height=50px;
    </div>
    <div id="center">
    	height=100px;
    </div>
    <div id="right">
    	height=200px;
    </div>
</div>
</body>

6.负边距自适应布局

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负边距自适应布局</title>
<style type="text/css">
body,h2,ul,li{
	margin:0;
	padding:0;
}
ul li{
	list-style:none;
}
#header{
	height:60px;
	background:#990;
}
#main{
	overflow:hidden;
}
#container{
	width:100%;
	float:left;
	background:#9C9;
	/*margin-right:-200px;*/
	padding-bottom:500px;
	margin-bottom:-500px
}
#sidebar{
	width:200px;
	float:right;
	background:#6FC;
	margin-left:-200px;
	padding-bottom:500px;
	margin-bottom:-500px
}
#contain{
	margin-right:200px;
	background:#F60;
	;
}
#footer{
	clear:both;
	height:80px;
	background:#666;
}

</style>
</head>

<body>
<div id="header">
	<h2>#header</h2>
</div>
<div id="main">
    <div id="container">
        <div id="contain">
            <h2>#contain</h2>
            The main content of you
        </div>
    </div>
    <div id="sidebar">
        <h2>#sidebar</h2>
        <ul>
            <li>Fixed the sidebar</li>
            <li>Fixed the sidebar</li>
            <li>Fixed the sidebar</li>
            <li>Fixed the sidebar</li>
            <li>Fixed the sidebar</li>
        </ul>
    </div>
    </div>
<div id="footer">
	<h2>#footer</h2>
</div>
</body>

7.google reader自适应渐变圆角按钮

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google reader自适应渐变圆角按钮</title>
<style type="text/css">
.button-outer-box{
	border-top:1px solid #bbb;
	border-bottom:1px solid #aaa;
	display:inline-block;
	cursor:pointer;
}
.button-inner-box{
	border-left:1px solid #bbb;
	border-right:1px solid #aaa;
	margin:0 -1px;
	background:#e3e3e3;
	position:relative;
}
.button-top-shadow{
	background:#f9f9f9;
	border-bottom:solid #eee 0.23em;
	height:0.692em;
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
}
.button-content{
	color:#333;
	line-height:1.4em;
	padding:0 0.461em;
	position:relative;
	text-align:center;
}
</style>
</head>

<body>
<div class="button-outer-box">
    <div class="button-inner-box">
        <div class="button-top-shadow"> </div>
        <div class="button-content">
        	<span>纯css自适应渐变圆角按钮</span>
        </div>
    </div>
</div>
</body>