外边距叠加
问题引入
看看以下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距叠加</title>
<style type="text/css">
.div1{
background-color: #1E90FF;
width:100px;
height:100px;
}
.div2{
background-color:sienna;
width:50px;
height:50px;
margin-top: 25px;
margin-left:25px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
你觉得程序运行结果是怎样的?
是不是应该这样
但实际上却是:
其原因就是父元素和子元素发生了外边距的叠加。
三种外边距叠加情况
同级元素
当一个元素出现在一个元素上方的时候,两者的外边距(margin-top和margin-bottom)会发生叠加,最终的值是两个值之间的较大者。
父子元素
当一个元素出现在另一个元素内部时,如果没有padding和border分隔开,子元素和父元素的上下外边距也会发生合并。就如上述例子。
空元素
没有子元素或没有文字内容的元素,如br和hr。
注意
只有块级元素的垂直外边距才会叠加,且叠加后的值为两者中的较大者。
如何解决外边距叠加
这个涉及到BFC布局了,该专栏后期会详细介绍的!
负margin技术
简介
当margin-top和margin-left为负数时,当前元素会被拉向指定方向;
当margin-bottom和margin-right为负数时,后续元素会被拉向指定位置。
例如以下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距叠加</title>
<style type="text/css">
div{
background-color: #1E90FF;
width:200px;
height:100px;
text-align: center;
line-height: 100px;
font-size: 40px;
}
.div1{
background-color: aqua;
}
.div2{
background-color: yellowgreen;
}
.div3{
background-color: burlywood;
}
</style>
</head>
<body>
<div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
在正常情况下,运行结果应该是这样的
当我们修改div2的CSS代码:
.div2{
background-color: yellowgreen;
margin-top:-50px;
}
程序运行结果如下
当我们修改div3的CSS代码:
.div3{
background-color: yellowgreen;
margin-bottom:-50px;
}
程序运行如下:
margin-left和margin-right效果也是类似的!
负margin技术的应用
图片与文本对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距叠加</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<img src="img/roll_in.PNG"width="50px">这是图片
</div>
</body>
</html>
我们发现图片和文字是没有对齐的,但是如果给图片应用如下负margin技术,
<div>
<img src="img/roll_in.PNG"width="50px"style="margin:0 3px -3px 0">这是图片
</div>
这样就对齐了。至于数据为什么是3px,记住就好。
自适应两栏布局(重点)
右端宽度固定,左端宽度自适应:
1 两栏都设置浮动布局
2 左栏宽度设置100%,然后给margin-right设置负值,以留出右栏的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距叠加</title>
<style type="text/css">
/* 都向左浮动 */
.left,.right{
float:left;
}
/* 左侧宽度设置100%,然后给margin设置负值以留出右栏的宽度 */
.left{
background-color:yellowgreen;
width:100%;
height:300px;
margin-right:-200px;
}
.right{
background-color:brown;
width:200px;
height:300px;
}
</style>
</head>
<body>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
左端宽度固定,右端宽度自适应就比较简单了, 只需要左端浮动即可。
垂直居中对齐
1 父元素的position设置为relative,子元素的position设置为absolute
2 子元素top和left属性都设置为50%
3 子元素的margin-top和margin-left设置负为自身大小的一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距叠加</title>
<style type="text/css">
.father{
background-color: aqua;
width:200px;
height:100px;
position:relative;
}
.son{
position: absolute;
background-color:rosybrown;
width:100px;
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>