margin负边距的使用
程序员文章站
2024-01-29 23:41:28
...
1.左右列固定，中间列自适应：
body{
margin:0;
padding:0;
}
.main{
float:left;
width:100%;
text-align: center;
}
.main_body{
margin:0 110px;
background:#888;
height:200px;
}
.left,.right{
text-align: center;
float:left;
width:100px;
height:200px;
background:#C40000;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-100px;
}<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
.main设置float的原因是让负边距div能够和.main显示在一行。
或者使用绝对定位的方式：
*{
margin: 0px;
padding:0px;
}
.main{
width:100%;
text-align: center;
}
.main_body{
margin: 0px 110px;
background:#888;
height: 200px;
}
.left{
position: absolute;
width: 100px;
height: 200px;
text-align: center;
left:0px;
top:0px;
background-color: #C40000;
}
.right{
position: absolute;
width: 100px;
height: 200px;
text-align: center;
right: 0px;
top:0px;
background-color: #C40000;
}
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>2.去除列表右边框
*{
margin: 0px;
padding:0px;
}
#test{
margin:auto;
width: 320px;
height: 210px;
border:2px solid blue;
overflow: hidden;
position: absolute;
top: 0px;
left:0px;
bottom: 0px;
right: 0px;
}
ul{
height: 210px;
margin-right: -10px;
background-color: #2da77a;
}
li{
width: 100px;
height:100px;
margin-right:10px ;
margin-bottom:10px;
background-color: #C40000;
list-style: none;
float: left;
}<div id="test">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>注意：
.ul一定要设置height,不然没法撑开，不要设置width,不然margin-right负边距不起作用,margin-right为负不会吧父元素撑开。float 元素不会脱离父元素的左边界
第一，父元素不浮动，子元素不浮动，子元素内容可以填充父元素
第二，父元素浮动，子元素不浮动，子元素内容可以填充父元素
第三，父元素浮动，子元素浮动，子元素内容可以填充父元素
第四，父元素不浮动，子元素浮动，子元素内容不可以填充父元素
3.去除列表的下边框
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;
overflow: hidden;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:2px dotted #D5D5D5;
margin-bottom: -2px;
}<body>
<ul id="test">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>注意：margin-bottom为负不会把父元素撑开，不设置overflow的话，最后一个下边框依然会出现在列表下面
下一篇： css硬件加速_CSS动画的硬件加速简介