深入理解css中的margin属性(推荐)

这篇文章主要介绍了深入理解css中的margin属性(推荐),具有一定参考价值,有需要的可以了解一下。

之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分:

  • margin--基础知识
  • margin--在同级元素(非父子关系)之间应用
  • margin--在父元素和子元素之间应用(重点)
  • margin--margin值的单位为%时的几种情况  

第一部分:margin--基础知识

要介绍margin的基础知识,我们不可回避地要谈到css盒子模型(Box Model),一般而言,css盒子模型是用来设计和布局的。它本质上是一个盒子,包括:外边距(margin)、边框(border)、内边距(padding)以及最中间的内容(content)。下图即为盒子模型(这里只谈W3C规范的标准盒模型,而不谈IE5和IE6在怪异模式中使用的非标准的盒子模型):

 

 我们要介绍的margin在最外层,因为margin(外边距)一定是透明的,所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。从上面的盒子模型中我们可以看到,margin在四周均存在,我们可以使用margin-top、margin-right、margin-bottom、margin-left分别设置这四个方向的margin值。(注:由于这部分知识较为基础,所以我不再在这部分不做更多介绍)

 第二部分:margin--在同级元素(非父子关系)之间应用

这一部分主要介绍水平方向和竖直方向的外边距的合并问题。

(1)水平方向的外边距合并

两个水平方向的盒子相遇,那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。

 例1:

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平方向的两个盒子</title>

    <style>

        *{

            margin:0;

            padding:0;

            border:0;

        }

        body{

            font-size: 0;

        }

        .left{

            width: 100px;

            height: 100px;

            background: red;

            display: inline-block;

            margin-right: 50px;

            font-size: 20px;

        }

        .right{

            width: 100px;

            height: 100px;

            background: yellow;

            display: inline-block;

            margin-left: 50px;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div class="left">宽为100px,右边距为50px</div>

    <div class="right">宽为100px,左边距为50px</div>

</body>

</html> 

效果如下:

这时两者之间的距离刚好为100px。

补充说明:大家可以看到,为了使得两个div(块状元素)脱离正常的文档流我使用了display:inline-block;属性,另外,我还把body的font-size设置为0,这样可以解决inline-block自身的问题,否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。

(2)竖直方向的外边距合并

两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

例2:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平方向的两个盒子</title>

    <style>

        *{

            margin:0;

            padding:0;

            border:0;

        }

        .top{

            width: 100px;

            height: 100px;

            margin-bottom: 100px;

            background: red;

        }

        .bottom{

            width: 100px;

            height: 100px;

            margin-top: 50px;

            background: green;

        }

    </style>

</head>

<body>

    <div class="top">高为100px,下边距为100px</div>

    <div class="bottom">高为100px,上边距为50px</div>

</body>

</html> 

效果如下:

 

这时我们肉眼都可以观察出来,两者竖直方向的举例大约为100px(实际就是100px)而非100+50=150px;这正是因为两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。

相关文档推荐

这篇文章主要介绍了纯css实现照片墙3D效果的示例代码,可以实现鼠标经过图片实现改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了纯 Css 绘制扇形的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了一份纯CSS loading效果代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了css 实现文字过长自动隐藏功能,需要的朋友可以参考下
本篇文章主要介绍了详解CSS3 rem(设置字体大小) 教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了CSS3 linear-gradient线性渐变生成加号和减号的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下