CSS理解之margin

1.margin与百分比单位

Paste_Image.png

Paste_Image.png

2.margin重叠

margin重叠通常特性:

  • 只发生在block水平元素(例如:p、div、list、item标签.....)
  • 只发生在垂直方向(margin-top/margin-bottom)

margin重叠三种情况:

  • 相邻的兄弟元素
  • 父级和第一个/最后一个子元素
  • 空的block元素(自己和自己重叠)

demo 1: 1.相邻兄弟元素margin重叠

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    p{
  line-height:2em;
  margin:1em 0;
  background:#f0f1f3;
}
  </style>
</head>
<body>
  <p>第一行</p>
  <p>第二行</p>
  </div>
</body>
</html>  

兄弟元素的上下margin发生了重叠

2.父级和第一个/最后一个子元素

demo 1:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .father{
      height:200px;
      background:red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      我是子元素
    </div>
  </div>
</body>
</html>

Paste_Image.png

当我们为子元素设置margin后:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .father{
      height:200px;
      background:red;
    }
    .son{
      margin-top:80px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      我是子元素
    </div>
  </div>
</body>
</html>

Paste_Image.png

对最后的子元素设置的margin-top:80px;等同于为父元素设置了margin-top:80px;(父元素的margin-top=0,最后的子元素的margin-top=80px,发生了外边距重叠),也等同于他们两个同时设置margin-top:80px;

Paste_Image.png

Paste_Image.png

inline元素(内联元素,像图片、文字这样的东西) 块状格式化上下文元素(BFC元素)

同样可以利用父子margin重叠条件来去除margin重叠:

demo 2:

为父元素添加`overflow:hidden;`,使其变为状格式化上下文元素(BFC元素)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .father{
      height:200px;
      background:red;
     overflow:hidden;
    }
    .son{
      margin-top:80px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      我是子元素
    </div>
  </div>
</body>
</html>

Paste_Image.png

demo 2 :

为父元素设置border-top:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .father{
      height:200px;
      background:red;
      border:1px solid;
    }
    .son{
      margin-top:80px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      我是子元素
    </div>
  </div>
</body>
</html>

Paste_Image.png

demo 2:

为父元素和第一个子元素之间添加一个 (空格或文字、图片等内联元素)inline元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .father{
      height:200px;
      background:red;
    }
    .son{
      margin-top:80px;
    }
  </style>
</head>
<body>
  <div class="father">
     
    <div class="son">
      我是子元素
    </div>
  </div>
</body>
</html>

Paste_Image.png

去掉margin-bottom重叠与上面类似。

3.空的block元素margin重叠:

Paste_Image.png

空的block元素发生margin重叠,也需要一些条件限制:

Paste_Image.png

去掉空的block元素的margin重叠也是利用上面的条件:

Paste_Image.png

3.margin重叠的计算规则:

1、正正取大值:

Paste_Image.png

2、正负值相加:

Paste_Image.png

3、负负最负值(取绝对值大的):

Paste_Image.png

3、理解CSS中的margin auto

首先理解margin atuo的作用机制 ,先看一些事实例子:

1.元素有时候,就算没有设置width或height,也会自动填充外部容器

例1:

image.png

图中是一个div元素,可以看到设置了背景色之后,它的宽度自动填满了它所在的容器。

例2:

image.png

我们设置左右定位值left:0; right:0;,它的宽度同样自动填充填满了它所在的容器,只不过它的容器是它的第一个父级相对定位元素。

以上两个例子是比较常见的,没有设置宽高也会自动填充所在容器。

若刚才的两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。

上图宽度从填满整个所在的容器到宽度500px,这就产生了剩余空间,图中的剩余空白部分空间width=整个容器宽度-500px,而margin auto 就是 为了填充这个空白的尺寸设计的,这就是margin auto的作用。

image.png

image.png

总之一句话,auto就是用来分配。

通过以上的例子,很多事情就很好理解了,比方说:

1.为什么图片设置了margin:0 auto不水平居中?

image.png

如上图,设置了margin auto,图片为什么还是不居中呢? 因为图片是inline水平的,它占据的空间并没有撑满整个容器,如果没有设置宽度值。所以它就不满足margin auto 用来填充剩余空间的条件,因为他根本就没有剩余空间。要想让它居中也很简单:

image.png

为图片设置display:block属性,这时就算没有为图片设置宽度,它也会占满整个容器,这时候在设置margin auto 它就会自动分配剩余空间。

2.为什么明明容器定高,子元素也定高了,margin auto 0 无法垂直居中?

image.png

上图水平方向剧中了,但是垂直方向不剧中,父级元素高度有了,子元素高度也有了,为什么还是不垂直居中呢?

因为他不满足占满整个容器这个条件,想一下,如果,没有为.son设置高度值,它之前满足占满整个容器这个条件吗?很显然不满足,也就没有剩余空间,所以设置height:100px margin auto不会垂直居中。

还需要注意一点:用margin:auto来实现居中,它计算后的值必须是正直,比如说你的父容器宽度1000px,子元素宽度2000px,这时设置margin:auto它是不居中的。

那么如何实现垂直方向上的剧中呢,方法很多不止一种:

1.writing-mode与垂直居中:

image.png

更改流为垂直居中之后,内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器,所以宽度的水平居中就失效了。

2.绝对定位元素实现垂直居中:

image.png

子元素设置了top:0;right:0;bottom:0;left:0;之后,没有设置宽高,absolute元素也自动填满了容器。

image.png

这时再设置宽高,自动填充就会被覆盖,如上图所示。这时上图蓝色旁边的空间尺寸就是被强制更改的尺寸,也就是margin:auto可以用来分配的尺寸空间,此时在设置margin:auto空间就被重新分配了,从而就实现了绝对定位元素的水平和垂直居中效果。但是这个特性只有IE8+以上的浏览器才支持。

image.png

4.CSS margin负值定位

1.margin负值下的两端对齐(主要利用了margin可以改变元素尺寸这一特性:正直变小,负值变大)

image.png

一个block水平元素,如果没有设置宽度值,我们通过设置margin可以改变它的尺寸:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  .box{
    width:1200px;
    margin:auto;
    background:orange;
  }
  .ul{
    overflow:hidden;
    margin-right:-20px;
  }
  .li{
    width:386.66666px;height:300px;background:green;float:left;margin-right:20px;
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="ul">
      <div class="li">列表1</div>
      <div class="li">列表2</div>
      <div class="li">列表3</div>
    </div>
  </div>
</body>
</html>

由于<div class="ul"></div>没有设置宽度,所以设置了margin-right:-20px;后,改变了它的宽度,增大了20px,变为1220px。这时我们再把li的宽度设置为计算好的386.66666px,就可以实现没有间隙的两端对齐。主要利用了margin负值增加它的空间

image.png

image.png

5.CSS margin失效情形解析

  1. inline水平元素的垂直margin无效,前提:
  • inline水平元素是非替换元素,例如,不是<img>元素;
  • 正常书写模式,是正常的流(不是writing-mode这种重置它的书写模式)

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <span style="margin:233px;">margin: 0px;</span>
</body>
</html>

可以看出它的垂直方向是没有margin的,是无效的。

2.第二种常见的无效是margin重叠,比如你设置了margin-top当发现没有效果,这就是margin重叠带来的影响。

3.display:table-cell与margin

MDN:margin可以应用于任何元素,除了display为table的相关类型(不包括table-caption,table以及inline-table)。 换句话说,如果这个元素的display属性是table-cell/table-row等类似这样的表格相关的声明,它的margin是无效的。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .table-cell{
            display: table-cell;
            margin: 100px;
        }
    </style>
</head>
<body>
    <span class="table-cell">span.table-cell</span>
    <div>
       <div class="table-cell">div.table-cell</div> 
    </div>
    
</body>
</html>

Paste_Image.png

可以看出设置的margin是无效的。

但是对替换元素设置table-cell是可以发生作用的,但平时我们不会给替换元素设置table-cell,这是没有任何意义的,所以记住这点就行。

4.position:absolute与margin,绝对定位元素非定位方向的margin值“无效”,定位方向的margin值是有效的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。

602
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之margin

1、margin与容器尺寸   元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸 ?   margin与可视尺寸:①适用于没有设定width/h...

3546
来自专栏数据库新发现

关于shared pool的深入探讨(一)

http://www.eygle.com/internal/shared_pool-1.htm

833
来自专栏用户画像

导航页下拉菜单

1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

892
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(1)

jQuery框架 jQuery 1.4 是企业主流版本,从jQuery1.6 开始引入大量新特性。最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏...

2876
来自专栏十月梦想

CSS边框

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

773
来自专栏Android干货

安卓开发小效果--走马灯

26212
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

1033
来自专栏吾爱乐享

php学习之html属性-表格(六)

1182
来自专栏杨龙飞前端

css常用居中

2696

扫码关注云+社区