CSS理解之margin

html-css012

CSS理解之margin,第1张

margin重叠通常特性:

margin重叠三种情况:

demo 1:

1.相邻兄弟元素margin重叠

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

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

demo 1:

inline元素(内联元素,像图片、文字这样的东西)

块状格式化上下文元素(BFC元素)

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

demo 2:

demo 2 :

demo 2:

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

3.空的block元素margin重叠:

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

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

3.margin重叠的计算规则:

1、正正取大值:

2、正负值相加:

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

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

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

例1:

例2:

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

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

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

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

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

如上图,设置了 margin auto ,图片为什么还是不居中呢?

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

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

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

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

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

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

1.writing-mode与垂直居中:

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

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

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

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

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

demo:

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

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

3.display:table-cell与margin

demo:

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

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

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

margin 外边距(标签与标签之间的距离)

margin的四个方向

margin-top 上边距

margin-right 右边距

margin-bottom 下边距

margin-left 左边距

margin的复合样式

一个值 四个方向的margin值都一样

两个值 第一个值代表上边和下边的margin值,第二个值代表右边与左边的margin值

三个值 第一个值代表上边的margin值,第二值代表右边与左边的margin值,第三个值代表下边的margin值

四个值 第一个值代表上边的margin值,第二个值代表右边的margin值,第三个值代表下边的margin值,第四个值代表左边的margin值

margin的问题

margin的问题

1、margin的传递(只会上下传递不会左右传递)

子级会把自己的margin-top与margin-bottom传递给父级

解决办法:给父级加上一个边框(其中一个办法)

2、margin上下叠压(只有上下会叠压,左右不会叠压)

上边元素的margin-bottom与下边元素的margin-top叠压在了一起(他会取大的值)

解决办法只给上边的元素设置margin-bottom或只给下边的元素设置margin-top就可以了

auto 自动

margin-left:auto; 元素居右显示

margin-right:auto; 元素居左显示

元素水平居中显示

margin:auto;

margin:0 auto 0px表示上外抄边距为0px,左右外边距自动,下外边距为0px。

margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。

扩展资料:

“margin:20px 40px”表示top为20px,right为40px;由于bottom和left缺省,所以自动将它们分别设为20px和40px。转化为第4种写法为:“margin:20px 40px 20px 40px”。

“margin:20px 40px 60px”表示top为20px,right为40px,bottom为60px;由于left缺省,所以自动将它设为40px。转化为第4种写法为:“margin:20px 40px 60px 40px”。

需要注意的是一种情况不能写为缺省写法:“margin:20px 40px 20px 60px”。该例中,由于top和bottom相同,但right和left不同,所以不能将bottom缺省,否则会等同于“margin:20px 40px 60px 40px”。