css学习(四):margin负值原理和垂直外边距重叠合并

一、margin和padding的简单说明

1、margin是用来隔开元素与元素的间距;padding是用来隔开元素和内容的间隔;

2、margin用于布局分开元素,使元素与元素互不相干;padding用于元素和内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”;

3、如果margin-left+content>父元素的宽度,元素将溢出到父元素右边;如果margin-right+content>父元素宽度,则以content内容展示为主,content不变化;如果content宽度给了,元素后边剩余的宽度不会随margin-right的值的变化而移动content的位置;如果content宽度没有给,那么margin-right的值则会影响到content的宽度;

二、margin负值原理:

1、当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距。

2、当元素margin的top和left是负值时会引起元素(本身)的向上或向左位置移动;

3、当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线(负值感觉元素本身盒子变小,相邻元素会往左移动或者往上提;其实,元素本身没有变小,只是文档流计算元素位置的时候变小了);既:元素本身不会产生位移,但会影响右边或者下面的元素左移动或者上提;

4、当元素没有设置 width 属性或者width:auto的时候,左右负 margin 会增加元素的宽度(超出父元素,可以再父元素中设置overflow:hidden隐藏);

下图不设置margin-bottom时候的原始样式;

下图设置margin-bottom为正值时候的样式;

下图设置margin-bottom为负值时候的样式;

 下图元素不设置宽度且设置margin-right为负值时候的样式;

三、margin负值主要应用场景:

1、边框去重
有的时候我们做Tab选项卡的时候不希望tab元素和父元素都加上边框,因此就可以给tab元素添加一像素的margin。详见我知道你不知道的负Margin

2、左右布局
当用margin负值之后就可以通过改变margin-top等的值成为负值之后不需要使用float就可以实现左右布局(同理,利于margin负值的原理也可以实现绝对定位);

3、一行中多个相同内容排列,每个元素内容间都有外右边距,最后一个与边框紧贴(没有外右边距);如下图:

四、margin垂直外边距重叠、合并:

1、发生外边距折叠的三种基本情况

相邻元素之间

毗邻的两个元素之间的外边距会折叠(除非后一个元素需要清除之前的浮动------如果这个元素是需要清除之前的浮动的话,那么浏览器会将他放在浮动元素的下面,不与浮动元素重叠;也就是这个元素有一个默认的、比较大的margin-top;所以如果在这个元素上加个margin-top且值不大的时候,还是紧贴着浮动元素底部展示)。

空的块级元素

既:一个元素(假设p、或者div)如果没有内容、边框、内边距、height/min-height等情况,仅仅只设置了上下外边距,那么这个上下外边距会合并;

父元素与第一个或者最后一个子元素之间

一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。既:父元素无border、padding-top控制这它,这个元素就会僭越犯上,把自己的margin当领导的margin执行;

2、外边距重叠计算方式

  • 全部是正值,则取最大值;
  • 有正值、有负值;则都取绝对值,用正值的最大值 — 绝对值的最大值;
  • 全部是负值,则都取绝对值,然后用0减去绝对值的最大值(0 - 最大绝对值)

3、防止外边距重叠解决方案:

  1. 生成/创建了bfc的元素不会和其流中的子元素重叠;(父与子元素)
  2. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠;(毗邻元素,不在同一个bfc中)
  3. 父元素设置border-top、margin-top(第一个元素);border-bottom、padding-bottom、height不为auto、min-height不为0(父元素的margin-bottom不与最后一个子元素的margin-bottom重叠)

 

参考链接:

https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/

https://segmentfault.com/a/1190000010346113

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值