margin四值顺序
- 【1个值】margin: top|right|bottom|left;
- 【2个值】margin: top|bottom left|right;
- 【3个值】margin: top left|right bottom;
- 【4个值】margin: top right bottom left;
margin表现
block元素可以使用四个方向的margin值
inline元素使用上下方向的margin值无效
inline-block使用上下方向的margin负值看上去无效
重叠
- 【1】两个block元素重叠时,后面元素可以覆盖前面元素的背景,但无法覆盖其内容
- 【2】当两个inline元素,或两个line-block元素,或inline与inline-block元素重叠时,后面元素可以覆盖前面元素的背景和内容
- 【3】当inline元素(或inline-block元素)与block元素重叠时,inline元素(或inline-block元素)覆盖block元素的背景,而内容的话, 后面的元素覆盖前面的元素
总结:在普通流布局中,浏览器将页面布局分为内容和背景,内容的层叠显示始终高于背景。block元素分为内容和背景,而inline元素或inline-block元素,它本身就是内容(包括其背景等样式设置)
负值
1、原理:
- 设置左右margin负值会增加元素的宽度 (该元素没有设定width属性或width:auto)
- margin-top设置负值不会增加元素高度,只会产生向上的位移
- -margin-bottom设置负值不会产生位移,只会减小元素供CSS读取的高度
2、对普通文档流中元素(指不是浮动元素也不是绝对定位、固定定位的元素等)的影响
负边距对由普通文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,这种偏移不同于相对定位(通过相对定位偏移后的元素仍然会坚守着它原来占据的空间,不会让文档流的其它元素乘虚而入),通过负边距进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
文档流只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对普通文档流元素的影响</title>
<style type="text/css">
.box{
display: block;
width: 400px;
height: 200px;
background-color: red;
}
span{
background-color: aqua;
}
p{
display: inline-block;
background-color: indianred;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">块状元素,位置由文档流控制</div>
<div>
行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制<span>行内元素,位置由文档流控制</span>
行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制
</div>
<p>inline-block元素,位置由文档流控制</p>
</body>
</html>
页面效果
给所有元素设置负边距
*{
margin: -10px;
}
页面效果
3、对浮动元素的影响
可以改变元素的布局显示位置,某个元素即使是写在了后面,但可以通过负边距让它在浏览器显示的时候显示在前面 (圣杯布局、双飞翼布局利用此原理实现。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对浮动元素的影响</title>
<style type="text/css">
div{
float: left;
width: 100px;
height: 100px;
line-height: 100px;
}
.one{
background-color: salmon;
}
.two{
background-color: aqua;
}
.three{
background-color: yellow;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="one">元素一</div>
<div class="two">元素二</div>
<div class="three">元素三</div>
</body>
</html>
页面效果
4、对绝对定位元素的影响(做居中)
绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离,这个元素自身的边界指的就是margin定义的边界,所以,如果margin为正的时候,那它的边界是向外扩的,如果margin为负的时候,则它的边界是向里收的。
必须知道定位元素的宽高才能设置margin值做居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对绝对定位元素的影响</title>
<style type="text/css">
.a{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left:50%;
top:50%;
margin-left: -100px;//宽度一半
margin-top: -100px;//高度一半
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
页面效果