margin详解

margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin,而其它margin属性只设置它们各侧的。这些属性适用于所有元素,但非替换行内元素上的竖直margin将不会产生任何效果

margin与容器尺寸

margin与可视尺寸

margin与可视尺寸

  1. 只适用于没有设定width/height的普通block元素

  2. 只适用于水平方向尺寸

一侧定宽的自适应布局(未修改版)

margin与占据尺寸

margin与占据尺寸

我们修改图片的margin-bottom值,容器的高度随着margin值变化

  1. block/inline-block水平元素均适用

  2. 与有没有设定width/height值无关

  3. 适用于水平方向和垂直方向

滚动容器内上下留白

margin与百分比

普通元素百分比

普通元素的百分比margin都是相对于容器的宽度计算的

绝对定位百分比

绝对定位元素的百分比margin是相对于第一个祖先定为元素(relative/absolute/fixed)的宽度计算的

宽度2:1自适应矩形

margin重叠

CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin。Margin按这种方式结合叫合并(collapse),产生的结合的margin叫做margin重叠

CSS里面关于重叠的条件:

  1. 都属于流内(In-flow)块级盒,处于同一个块级格式化上下文(BFC)

  2. 没有行盒(line box),没有空隙,没有padding并且没有border把它们隔开

  3. 都属于竖直相邻盒边(vertically-adjacent box edges)

相邻兄弟元素的重叠

相邻兄弟元素的重叠

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

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

需要注意的是,overflow:hidden只在父子元素margin重叠时有效,相邻兄弟元素重叠中无效

margin-top重叠

  1. 父元素非块状格式化上下文元素

  2. 父元素没有border-top设置

  3. 父元素没有padding-top

  4. 父元素和第一个子元素之间没有inline元素分隔

margin-bottom重叠

上面的四个例子都可以导致margin-bottom重叠,除此之外

  1. 父元素没有height,min-height,max-height限制

空block元素margin重叠

空block元素margin重叠

空block元素margin重叠其他条件

  1. 元素没有border设置

  2. 元素没有padding

  3. 里面没有inline元素

  4. 没有height或者min-height

margin重叠的计算规则

正正取大值

正负值相加

负负最负值

margin重叠的意义

在互联网早期,网页主要是以文字为载体,连续段落或列表如果没有margin重叠,首尾项间距会和其它兄弟标签1:2关系,排版不自然.所以margin重叠主要是为了解决文字布局排版的问题.

margin重叠实践

在表单中,使用.list{margin-top:15px;margin-bottom:15px;},比.list{margin-top:15px;}更具有健壮性,最后一个元素移除或位置调换,均不会破坏原来的布局

margin:auto

margin:auto的各种特性演示

例1,块级元素,就算没有设置widthheight,也会自动填充

例2,作为绝对定位元素,width自动填满父级第一个定位元素容器

例3,此时,如果设置widthheight,自动填充特性就会被覆盖

例4,设置margin-right:100px,margin-left:auto,则margin-left为剩余空间大小即widthmargin-right

例5,两边均设置margin:auto则平分剩余空间

margin左右均设置auto,图片水平居中

margin:0 auto没有使图片水平居中,因为img是inline水平元素,需要设置display:block属性,这样,就算没有width,元素也会占据整个容器

改变流动方向,使用margin:auto垂直居中

使用margin:auto,绝对定位的水平垂直居中,浏览器要求IE8+

上例中绝对定位的水平垂直居中的原理

margin负值

常规流中的margin负值

常规流中的margin负值

在常规流中,设置margin-left:-20px,元素会向左移动-20px,对于设置margin-top也一样.

当设置margin-right:-20px;,元素本身不会移动,后面的元素会向左移动20px到该元素上.对于设置margin-bottom同理

同时,在元素不指定宽度的情况下,如果设置margin-left或者margin-right为负值的话,会在元素的对应方向上增加其宽度.

相对定位元素的margin负值

相对定位元素的margin

当设置margin-bottom/top的时候,表现如上,需要注意的是,设置了position:relative属性的元素会覆盖在后面的元素上面(后面的元素没有设置定位以及Z-index)

float元素的margin负值

float与marginDemo

对于设置了float的margin,设置margin为负值的时候,表现如下:

如果设置的margin的方向与float相同,那么,元素会往对应的方向移动对应的距离.

如果设置margin的方向与float的方向相反,则元素不动,元素之前或者之后的元素会向该元素的方向移动相应的距离.

第二个例子是使用margin负值与float实现的一列定宽的两列流式布局

使用margin负值的绝对定位垂直居中对齐

垂直居中对齐Demo

给元素设置absolutelefttop分别为50%;然后margin-top为 负的高度的一半、margin-left为 负的宽度的一半

这种方法的缺点是需要固定宽高

使用margin负值的有边框的列表布局

有边框的列表布局

这里用marginpadding的偏移使边框重合

使用margin负值的有间距的列表布局以及两端对齐

有间距的列表布局以及两端对齐

两个例子用到当元素没有固定宽度时负值会增加自身宽度

第一个例子实现有间距的列表布局,其中需要消除ul的样式,并且在ul设置margin负值抵消li中的margin值

第二个例子实现margin负值下的两端对齐

一侧定宽自适应布局

一侧定宽自适应布局以及DOM顺序正确的修改版

第一个例子的重点是给左边的div嵌套了一个父级div并设置为宽度100%,这样当容器宽度变化时,左边的div自适应

第二个例子,我们利用同样的原理,来使DOM顺序和最终视觉顺序相符,也就是上面第一个一侧定宽的自适应布局的修改版

等高列布局

等高列布局Demo

等高列布局主要利用了padding会显示背景颜色的原理,先给div一个巨大的margin负值,从而产生塌陷,再使用padding正值填补塌陷,从而达到多等高列布局

半遮挡的标题

半遮挡的标题Demo

这个例子使用relative属性会在后面元素上面显示的特性,配合margin负值偏移

圣杯布局

圣杯布局Demo

圣杯布局中,需要注意:

  • 三栏都使用浮动,需要使用clear:both清除浮动影响

  • 左右两列需要使用position:relative以及负margin来达到三栏一行的目的

  • 父容器需要指定跟左右两栏宽度相同的padding,用来盛放左右两栏

圣杯布局详细介绍

双飞翼布局

双飞翼布局Demo

双飞翼布局是圣杯布局的改良版,区别在于对待中间栏内容不被遮挡的处理.
圣杯布局用padding以及相对定位来处理,而双飞翼布局让中间栏新增div的margin处理

CSS深入理解之margin
理解并运用 CSS 的负 margin 值
margin负值详解

    原文作者:人丑就要多读书_
    原文地址: https://segmentfault.com/a/1190000009053587
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞