前端技巧关于外边距margin属性的特殊情况总结

关于外边距margin属性的特殊情况总结

外边距属性margin是CSS里十分常用的属性,外边距在是一个盒子模型外部留下的一个透明的间隙,通过margin定义四个方向的边距很简单(基础部分请点这里复习),本文主要总结关于对margin属性几个特殊的情况:

1. 竖直方向外边距重叠问题:

如果有两个水平方向的相邻元素分别设置了右外边距和左外变距,那么两者之间的外边距会相加,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {margin:0;padding:0;}
.left {width:100px;height:100px;background:#333;margin-right:50px;float:left;}
.right {width:100px;height:100px;background:#06c;margin-left:50px;float:left;}
</style>
</head>
<body>
<div id="all">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

此时,左右两个div之间的距离为left的右边距和right的左边距之和:

CSS-margin1.png

如果是竖直方向上的两个相邻元素分别设置了下边距和上边距,则两者之间的外边距会发生重叠,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {margin:0;padding:0;}
.left {width:100px;height:100px;background:#333;margin-bottom:50px;}
.right {width:100px;height:100px;background:#06c;margin-top:50px;}
</style>
</head>
<body>
<div id="all">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

此时,上下两个div之间的距离并不是两个div上下外边距之和,而是只显示了50px的距离:

CSS-margin垂直方向重叠.png

在CSS中,竖直方向相邻元素的外边距会发生重叠,取其中最大的值,比如上面的例子如果改为:

.left {margin-bottom:70px;}
.right {margin-top:50px;}

此时两个div之间的距离则为70px,如果一个内容为空的元素同时设置了上下外边距,则也会出现类似的重叠现象,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {margin:0;padding:0;}
.left {width:100px;height:100px;background:#333;}
.right {width:100px;height:100px;background:#06c;}
.center {margin-top:40px;margin-bottom:70px;}
</style>
</head>
<body>
<div id="all">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>

此时,left和right两个div之间的距离为70px……

竖直方向上外边距的重叠现象是CSS的特性,而如果将元素生成BFC,则可以竖直方向的margin就不会发生重叠,请点击这里浏览关于BFC的概念。

2. 外边距设置百分比值的情况:

外边距margin的值除了可以设置具体数值(如10px,2em…)之外,还可以设置百分比的值,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {margin:0;padding:0;}
#all {width:200px;height:150px;background:#19a;}
.box {width:100px;height:100px;background:#f50;margin-left:50%;margin-top:50%;}
</style>
</head>
<body>
<div id="all">
<div class="box"></div>
</div>
</body>
</html>

这里给box这个元素设置了左边距50%和上边距50%,显示效果如下:

CSS-margin百分比.png

一般情况下,CSS里margin的百分比是以父元素的宽度的百分比值来计算的,例如上例中父元素宽度为200px,所以box的左边距和上边距都是200px的50%,即100px。

如果这里的子元素box设置了绝对定位,则margin的百分比是相对于祖先元素或最近的定位父元素宽度的来计算的,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {margin:0;padding:0;}
#top {width:300px;height:300px;background:#777;position:relative;}
#all {width:200px;height:150px;background:#19a;}
.box {width:100px;height:100px;background:#f50;margin-left:50%;margin-top:50%;position:absolute;}
</style>
</head>
<body>
<div id="top">
<div id="all">
<div class="box"></div>
</div>
</div>
</body>
</html>

这时候box的左边距和上边距是相对于top这个div的宽度来计算的:

CSS-margin百分比3.png

3. 关于margin设置auto的情况:

如果给某元素右边距设置固定值,左边距为auto:

div {width:400px;height:250px;background:#368;margin-right:30px;margin-left:auto;}

则元素离右边的距离始终为30px,而离左边的距离会随着浏览器宽度而变化,这里的auto可以理解为自动,auto值常见的用法是用于元素的居中。一般的,某个元素设置了宽度的情况下,通过设置margin-left:auto和margin-right:auto可以实现元素的水平居中,即:

div {width:400px;height:250px;background:#368;margin:0 auto;}

那如果设置将四个方向的外边距都设置为auto,会不会实现水平和竖直方向都居中呢?

div {width:400px;height:250px;background:#368;margin:auto;}

通过测试证明,这样设置的话,竖直方向是无法居中的,至少在网页为水平流的情况下是不行的,除非通过writing-mode属性将网页改为垂直流,关于这个属性本文先不做分析,下面说说关于margin:auto居中的改进方法:

.box {width:400px;height:250px;background:#368;position:absolute;top:0;right:0;left:0;bottom:0;margin:auto;}

这里给元素设置了定位,并将四个方向的偏移值都设为0,此时margin:auto便实现了水平和竖直方向的居中,如下图:

CSS-margin水平和垂直居中.png

关于水平方向居中和竖直方向居中的实现,在《网页设计必备的几个技巧》这篇文章中也有相关介绍,可前往了解。

4. 关于margin取负值的情况:

元素的外边距margin属性是可以设置负值的,请移步《margin属性设置负值的用法》这篇文章详细了解。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.medwheat.com.cn/skill/124.html