• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

margin负值拉伸元素

227 1

今天按着书写代码的时候发现一个问题,margin负值居然无法拉伸元素,在我的理解里margin四个值都为负值的时候是可以拉伸元素的。

为此我还特意百度了下,也没找到什么有价值的信息,于是自己测试了下。

当元素为block话的时候,也就是正常水平流状态时,使用margin负值是可以拉伸的,但是,当你的元素设置了宽高,那么负值就不能拉伸了。

他会以top和left两个方向做位置偏移。

而:

 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;

这种状态元素也可以看做为一个block元素,正常的水平流状态。也能用margin负值拉伸!

但是,问题除了这个还有一个问题,当时我设置的时候,margin负值,没有拉伸,并且并排的五个div元素全部往中间位移了,如果margin为负值是,他会往top和left移动,为什么会出现所有的div都往中间位移呢,难道不是单一方向吗?

为此我找了半天,找到两个属性:-webkit-box-pack: center;-webkit-box-align: end;

box-pack 表示当父元素的大小大于子元素时,子元素的水平对其垂直对其的方式,center为水平居中,垂直居中,在他的作用下,margin的位移变成了往中心点位移。

box-align 实际效果不那么明显,个人定义就是,当子元素超出父元素时,你就可以看到效果了,end表示最后一个子元素对齐父元素右侧边框而其他的部分都会以此为起点对齐。

0
  • 本文分类:CSS
  • 本文标签:暂无标签
  • 流行热度:已超过 227 人围观了本文
  • 最后更新:2019年11月26日 - 23时04分41秒
  • 发布日期:2019年11月26日 - 22时48分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码