普通流中的margin负值原理

本文探讨了CSS中负margin在块级框和行级框中的作用。在块级框中,负margin-top和margin-bottom用于缩短上下框间距,负margin-left可使元素左移。而对于不定宽的块级框,负margin能增加其宽度。行级框的margin值在垂直方向无效,只存在横向水流,无论文字方向如何,元素均向左移动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考资料:https://www.cnblogs.com/LiveWithIt/p/6024864.html 该文对浮动框的负边距讲得很棒,这里就只讲清楚普通流的情况。

此文的关键点是,负值表示套近乎,正值表示离远点,要顺流而行!
阅读前,先记住,margin-left负值移动自己,而margin-right负值一般是移动后面的元素。

一切都是框,所有框处于流动中,水将他们往一个方向推。

1、块级框   

    块级框所处水流大势是:往左、往上。负外边距是为了缩短框之间的距离。注意这里的水流大势是指有负margin的情况,本文讲的是负margin。

margin-top负值,是将自己往拉,使自己更上一个块;
margin-bottom负值,是将后面(下面)的元素往拉,使下一个块更自己;
margin-left负值,是将自己往拉,使自己更左边的块。但是块级元素自己一行,没有左边元素,所以只能看到自己左移了。例外:父元素定宽,本元素不定宽时,不会整体左移,而是向左拉长自己。

margin-right负值,是将后面(右边)的元素往拉近自己。但是块级元素自己一行,没有右边的元素,拉了也没用。例外:父元素定宽,本元素不定宽时,拉了有效果哦,会向右拉长自己。

    块级框有一个纵向流、两个横向流(外横向、内横向)。

   1)纵向流目标往,设置margin-top负值和margin-bottom负值,都是向上拉进框之间的距离。


   2)外横向流目标往,控制框外部流向。

设置margin-left:-10px,则块元素移10px。
设置margin-right:-10px,则欲将后面的块元素向拉进10px。因为块级元素是自己占一行的,没有后面的元素,所以没有看到任何效果。



    3)内横向流,控制框内部宽度。使不定宽子块级元素的width + padding-left + padding-right + border-left + border-right + margin-left +margin-right=父元素的宽。当加数出现负数,那其他加数的正数数值将增大,使和不变。增大的部分内横向流会填满它。
    给一个定宽的块级框设置左负边距会让他左移,设置右负边距对他没有影响。原理是上面讲的外横向流。
    给一个不定宽的块级框设置正边距会让他的宽度减小,设置负边距会让他的宽度增加:

设置margin-left正值 ,要拉开与左边元素的距离,则border-right不动,而块框自己一行左边是没有元素的,只能自己缩短以空出这个距离。
设置margin-right正值 ,要拉开与右边元素的距离,则border-left不动,而块框自己一行右边是没有元素的,只能自己缩短以空出这个距离。
设置margin-left负值 ,要缩短与左边元素的距离,则border-right不动,而块框自己一行左边是没有元素的,套不了近乎就伸着左手出去弥补这个负距离。
设置margin-right负值 ,要缩短与右边元素的距离,则border-left不动,而块框自己一行右边是没有元素的,套不了近乎就伸着右手出去弥补这个负距离。



2、行级框

    行级框只有一个横向流,因为纵向的margin值对于行内级框来说无效的
    无论是direction: ltr 还是direction: rtl,水流方向都是往





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值