深层次了解css中的margin特性(强烈推荐)

日期:2021-03-03 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

以前我1直觉得margin特性是1个十分简易的特性,可是近期做新项目时遇到了1些难题,才发现margin特性還是有1些“坑”的,下面我会详细介绍margin的基础专业知识和那些“坑”。这篇博文关键分成下列几个一部分:

  • margin--基本专业知识
  • margin--在同级元素(非父子关联)之间运用
  • margin--在父元素和子元素之间运用(关键)
  • margin--margin值的企业为%时的几种状况  

第1一部分:margin--基本专业知识

要详细介绍margin的基本专业知识,大家不能逃避地要谈到css盒子实体模型(Box Model),1般而言,css盒子实体模型是用来设计方案和合理布局的。它实质上是1个盒子,包含:外边距(margin)、边框(border)、内边距(padding)和最正中间的內容(content)。下图即为盒子实体模型(这里只谈W3C标准的规范盒实体模型,而不谈IE5和IE6在奇异方式中应用的非规范的盒子实体模型):

 

 大家要详细介绍的margin在最外层,由于margin(外边距)1定是全透明的,因此它能够用来使得不一样的盒子之间留有1定的空隙从而做到合理布局美观大方等实际效果。从上面的盒子实体模型中大家能够看到,margin在4周均存在,大家可使用margin-top、margin-right、margin-bottom、margin-left各自设定这4个方位的margin值。(注:因为这一部分专业知识较为基本,因此我已不在这一部分不做更多详细介绍)

 第2一部分:margin--在同级元素(非父子关联)之间运用

这1一部分关键详细介绍水平方位和垂直方位的外边距的合拼难题。

(1)水平方位的外边距合拼

两个水平方位的盒子相遇,那末最后二者之间的间距为左侧盒子的右外边距和右侧盒子的做外边距之和。

 例1:

编码以下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <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出現在同1行中。

(2)垂直方位的外边距合拼

两个垂直方位的盒子相遇时,其垂直方位的间距等于上方盒子的下外边距和正下方盒子的上外边距中较大的1个。

例2:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <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;这更是由于两个垂直方位的盒子相遇时,其垂直方位的间距等于上方盒子的下外边距和正下方盒子的上外边距中较大的1个。

此外1个趣味的事例便是:假定有1个元素另外设定了margin-top和margin-bottom,可是內容为空,那末这两个margin值也会叠加,值为二者最大的1个,它相近与垂直方位上两个盒子margin值的叠加。编码以下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

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

    <style>

        *{

            margin:0;

            padding:0;

        }

 

        .top{

            width: 500px;

            height: 100px;

            background: red;

        }

        .middle{

            margin-top: 100px;

            margin-bottom:50px;

        }

        .footer{

            width: 500px;

            height: 100px;

            background: green;

        }

 

    </style>

</head>

<body>

    <div class="top">上面的div,高100px</div>

    <div class="middle"></div>

    <div class="footer">下面的div,高100px</div>

</body>

</html> 

最后的实际效果以下:

 

大家发现这时候在上面的div和在下面的div之间的举例其实不是100+50=150px,而是二者中的最大者,即100px。

那末W3C为何会设置这样的规范而不设置和水平方位1样的规范呢?即margin值的叠加,具体上这也是有1定的道理的。例如大家必须设计方案1个由若干个段落组成的1个网页页面。大家必须设定margin-top和margin-bottom使得第1段和网页页面的最上方有1段间距,使得最终1段和最正下方有1段间距。下面是不叠加和叠加的实际效果图:

大家能够看到左侧的网页页面沒有重合,那末两个段落之间的举例便是最上方的两倍间隔了,而右侧的网页页面产生了重合,则全部的间隔全是相同的。也许这便是这样设置规范的目地吧,谁了解呢?

第3一部分:margin--在父元素和子元素之间运用(关键)

第2一部分详细介绍了同级元素之间应用margin,而这1一部分即将详细介绍最成心思的父元素和子元素之间margin的运用。这1一部分,大家一样从两个层面来探讨。1层面是子元素设定水平方位上的margin值,另外一层面是子元素设定垂直方位的margin值。

(1)在子元素中设定水平方位的margin值

大家能够设定margin-left来操纵子元素的左侧框和父元素的左侧框之间的举例。

例3:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-left: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px,margin-left为100px。</div>

    </div>

</body>

</html> 

我将子元素的margin-left设定以便100px;实际效果以下:

即子元素的左侧框和父元素的左侧框之间的间距为100px。与在同级元素之间设定margin不一样,由于同级元素之间的margin不容易考虑到到padding,可是在父元素和子元素就不一样了,那末假如父元素中假如有padding,实际效果会是甚么样的呢?请看下面1个事例:

例4:

下面大家在上面事例的基本上给父元素加上padding值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            padding:100px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-left: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px,margin-left为100px。</div>

    </div>

</body>

</html> 

上面的编码给父元素加上了100px的padding值,实际效果以下:

大家能够看到子元素举例上方的间距为100px,由于子元素1定是在父元素的content的一部分的,这点没什么疑惑。

可是历经精确测量能够发现子元素的左侧框间距父元素的左侧框之间的间距为200px,由于在其中也有100px的左padding值,前面的事例由于我沒有设定padding值,因此沒有观查出来,因而这就表明了在子元素中设定margin-left,其值具体上是子元素的左侧框间距父元素左padding里侧的间距。

例5:margin-right的应用和margin-left的应用是类似的,我在这里只举1个事例。

这个事例在子元素中设定了margin-right值,以下所示:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            padding:100px;

            background: red;

        }

        .son{

            float: right;

            width: 100px;

            height: 100px;

            background: green;

            margin-right: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">宽度为100px,margin-right为100px。</div>

    </div>

</body>

</html> 

这个事例与例4的差别仅在与子元素的部位不一样。实际效果以下:

根据这个事例能够表明margin-right的值是子元素的右侧框和父元素的右padding里侧的间距。只是前面的几个事例我沒有应用padding,因此没法观查出来。

(2)在子元素中设定垂直方位的margin值

依照前面的工作经验,基础理论上来讲,大家一样能够根据设定margin-top的值使得子元素的上边框和父元素的上padding的里侧留有1定的间距。那末大家就试试吧!

例6:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{padding:0; margin:0; border:0;}

        .father{

            width: 500px;

            height: 500px;

            background: red;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">高宽比为100px,margin-top为100px。</div>

    </div>

</body>

</html> 

这个事例我设定了margin-top为100px,实际效果以下:

这其实不是大家要想的实际效果啊,大家期待子元素的上部间距父元素的上部为100px,但是大家看到的确是父元素的上部间距访问器网页页面的上部有100px的间距,这是为何呢?哪里出現难题了呢?

具体上这是由于当父元素沒有设定padding值和border值时,出現了1个bug--父元素的上方与子元素的上方彻底重叠在了1起,没法分开。因此才会致使上述这类父元素和子元素另外向下的状况。

针对这类难题处理方式有下面几种:

  • 方式1:给父元素加上padding-top值
  • 方式2:给父元素加上border值
  • 方式3:给父元素加上特性overflow:hidden;
  • 方式4:给父元素或子元素申明波动float
  • 方式5:使父元素或子元素申明为肯定精准定位:position:absolute;
  • 方式6:给父元素加上特性 overflow:auto; positon:relative;(注:此方式为后续加上,谢谢博友@精灵Pawn出示此方式)

方式1:根据例6,在父元素的css编码中加上padding-top:1px;实际效果以下:

 方式的唯1缺陷便是提升了1px的偏差。

方式2:根据例6,在父元素的css编码中加上border-top:1px solid transparent;实际效果以下:

一样做到了实际效果, 缺陷同方式1。

方式3:根据例6,在父元素的css编码中加上overflow:hidden;实际效果以下:

一样做到了实际效果,而且沒有任何偏差的存在。称得上perfect!!!!

方式4:给父元素或子元素申明float;根据例6,在子元素css编码加上float:left;或在父元素css编码加上float:left;均做到实际效果,这里已不展现同样的照片。

优势:沒有像素的偏差。   缺陷:float有时是无须要的。

方式5:给父元素或子元素加上position:absolute;特性。 一样做到实际效果。

优势:同方式4。  且要是大家不应用top和left也不容易有任何危害,因此这也是1种非常好的方式。

方式6:给父元素加上overflow:auto;和position:relative;一样做到实际效果。

第4一部分:margin值的企业为%时的几种状况

以前我举事例时应用margin,它的值全是以px为企业的,这个了解起来沒有难题。可是假如margin值是以%为企业呢?具体上这时候候百分比(%)是相对该元素的父元素(器皿),针对同级元素和父子元素全是这般。(再度谢谢 博友@精灵Pawn 出示的提议!!根据此提议填补这一部分內容) 可是在同级元素中应用垂直方位的margin时会出現出乎意料的結果,下面举例表明。

(1)同级元素在水平方位应用值为%的margin

例7:

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .first{

            float: left;

            width: 200px;

            height: 200px;

            background: green;

        }

        .second{

            float: left;

            width: 200px;

            height: 200px;

            background: red;

            margin-left: 20%;

        }

    </style>

</head>

<body>

    <div class="first">宽为200,无margin</div>

    <div class="second">宽为200,margin-left为20%;</div>

</body>

</html> 

这个事例中,设定两个元素向左波动,便于于观查二者水平方位的margin。在其中左侧div无margin,右侧div的margin-left为20%,实际效果以下:

从实际效果图能够看出两个div之间的间隔自始至终为父元素(这里右侧div的父元素即为body,其宽度为访问器宽度)的20%。

(2)同级元素在垂直方位应用值为%的margin

依据例7的启迪,大家能够猜测,假如在垂直方位上应用margin,且值的企业为%,那末最后二者之间的间距将是父元素(上例中为body)的百分数。那末到底是否这样呢?看下面的事例。

例8

<head>

    <meta charset="UTF⑻">

    <title>margin</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .first{

            width: 200px;

            height: 200px;

            background: green;

        }

        .second{

            width: 200px;

            height: 200px;

            background: red;

            margin-top: 10%;

        }

    </style>

</head>

<body>

    <div class="first">高为200,无margin</div>

    <div class="second">高为200,margin-top为20%;</div>

</body>

</html> 

这里设定上面的div无margin,下面的div的margin-top为10。实际效果以下:

大家发现,当我在变小访问器的高宽比时,垂直方位上的间隔并沒有变小!!! 而当我变小访问器的宽度时,垂直方位上的间距变小了!!!

这就表明:统计分析元素之间在垂直方位上应用margin,当值的企业为%时,它是相对父元素的宽度。

那末这里为何并不是如大家所期待的那样相对访问器的高宽比呢?知乎上有高手是这样解释的:

(3)父子元素应用值为%的margin

针对父子元素,假如在子元素中应用企业为%margin,那末这个margin值是相对父元素的宽度和高宽比(留意:这时候确实是相对父元素的高宽比!)的。

例9 

编码以下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF⑻">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .father{

            width: 500px;

            height: 300px;

            background: red;

            overflow: hidden;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-top: 20%;

            margin-left: 20%;

        }

    </style>
</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

</html> 

在这个事例中,我设定了margin-left的值为20%,margin-top的值为20%,父元素的width为500px,父元素的height为300px。下面看看实际效果吧。

从上图能够看出子元素的margin-top值最后一样是相对性与父元素的宽度而非高宽比。

总结:

这篇博文只详细介绍了margin的在其中1一部分专业知识点,但假如大伙儿读后能一些许获得是再好但是的了。因为自己总结匆忙,专业知识不够,不正确在所免不了,期待大伙儿假如发现不当之处之初能提出建议,我将十分感谢。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:运用纯css完成照片旋转的实际效果 返回下一篇:没有了