木灵鱼儿

木灵鱼儿

阅读:1106

最后更新:2019/11/26/ 23:04:41

margin负值拉伸元素

今天按着书写代码的时候发现一个问题,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
文章被阅读 1106

相关文章

目录树