margin详解

stonezhu 发布于2019-08-29 12:25 / 1922人阅读

摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。

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

margin与容器尺寸 margin与可视尺寸

margin与可视尺寸

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

只适用于水平方向尺寸

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

margin与占据尺寸

margin与占据尺寸

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

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

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

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

滚动容器内上下留白

margin与百分比

普通元素百分比

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

绝对定位百分比

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

宽度2:1自适应矩形

margin重叠

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

CSS里面关于重叠的条件:

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

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

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

相邻兄弟元素的重叠

相邻兄弟元素的重叠

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

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

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

margin-top重叠

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

父元素没有border-top设置

父元素没有padding-top值

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

margin-bottom重叠

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

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

空block元素margin重叠

空block元素margin重叠

空block元素margin重叠其他条件

元素没有border设置

元素没有padding值

里面没有inline元素

没有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,块级元素,就算没有设置width或height,也会自动填充

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

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

例4,设置margin-right:100px,margin-left:auto,则margin-left为剩余空间大小即width-margin-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

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

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

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

有边框的列表布局

这里用margin与padding的偏移使边框重合

使用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负值详解

云服务器 GPU云服务器 margin: margins margin margin缩写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111887.html

CSS盒子模型中外边距（margin）折叠详解

摘要：盒子模型中外边距折叠的常见情形有如下种情况无子元素的相邻兄弟元素触发折叠的条件两个元素之间没有被其他非空元素隔开时触发外边距折叠。最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。外边距折叠的概念：所...

wmui 2019-08-01 17:22 评论0 收藏0
CSS盒子模型中外边距（margin）折叠详解

摘要：盒子模型中外边距折叠的常见情形有如下种情况无子元素的相邻兄弟元素触发折叠的条件两个元素之间没有被其他非空元素隔开时触发外边距折叠。最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。外边距折叠的概念：所...

genefy 2019-08-29 13:06 评论0 收藏0
border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0
margin详解

摘要：二的赋值普通元素的百分比都是相对于容器的宽度计算。绝对定位元素的百分比，绝对定位元素的百分比是相对于第一个定位祖先元素的宽度计算应用宽高自适应矩形传送门之所以会是，是因为垂直方向上发生重叠。一. margin对尺寸的影响 1.可视尺寸 a.适用于没有设定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

darry 2019-08-29 11:06 评论0 收藏0