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 条评论
登录 后参与评论

相关文章

来自专栏Python研发

CSS

CSS是Cascading Style Sheets的加简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

893
来自专栏HTML5学堂

关于其他选择器以及选择器优先级详解

上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,...

2778
来自专栏HTML5学堂

JQuery选择器(上)

HTML5学堂:jQuery的选择器可以让我们很方便的操作获取元素,那么本文介绍的是jQuery选择器的几种选择器,希望对大家有帮助!谢谢! 1.基本选择器(3...

2754
来自专栏程序员的知识天地

前端学习之HTML【一】

块级元素默认占一行,一行内添加一个块元素后一般无法添加其他的元素,其宽度自动填满其父元素宽度

681
来自专栏大数据钻研

初探HTML之CSS篇(属性)

前言 I am a slow walker,but I never walk backwards. ---- CSS(层叠样式表) CSS是一种用来表现HTML...

1983
来自专栏河湾欢儿的专栏

2.布局解决方案- 垂直居中<2>

垂直布局 写出两个盒子并满足以下条件条件: 1.里面的高度盒子不固定 2.外面盒子的高度不固定

461
来自专栏小古哥的博客园

标签语义化之常用HTML标签

一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个...

2735
来自专栏Android干货

CSS基本知识(慕课网)

3126
来自专栏用户3211691的专栏

前端面试题2(CSS)

对BFC规范(块级格式化上下文:block formatting context)的理解?

380
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 ver...

992

扫码关注云+社区