400-685-0732

WJMonitor舆情之声

企业大数据智能舆情监测管理解决方案

全网监测海量数据按需发布监测预警

实时把握舆情动态精准追溯信息源头

获取验证码
企业采购 个人使用
当前位置: 首页 > SEO博客 > web排版时的Margin用法分析(下)

web排版时的Margin用法分析(下)

时间:2013-12-02 15:16:41
继上一篇margin的融合本篇介绍margin的负值用法,在使用margin排版的时候大部分同学用的都是正值进行元素的分割,那么负值有什么特性呢?又有怎么样的用法呢?先来看看margin负值的用法见下图,首先 我们两个div的margin间距是由蓝色的div 也就是下面的d2控制的 marign-top:30px;当我把d1也就是黄色的div的margin-bottom:-20px写上之后 下方的margin就被我们做了差值 变成了10px的大小。如果超过了原有的30px则会出现两个元素的重叠 如图二;


那有朋友就问了 如果是父子级的margin-top 父级是-30px 子级是20px;那么为几?这里就不截图了,说下流程 首先出发的是父子级的融合 -30px和20px相叠加 变成-10px 若是父级和子级都为正数 例如 父10px 子20px 则最终为20px 进行纵向的margin融合;综上所述:margin的纵向是谁的值大 看谁的 负值是拉近两者的距离。
那有些看官有所疑问了?margin的负值有什么用呢?对于负值的最经典的用法在于position元素的居中如下图所示,d1为绝对定位(position: absolute;) 对于绝对定位想要动态的居中(就是在各种屏幕宽度下都是居中)很是困难,我们的处理方式就是 left:50% margin-left:-Npx(n是当前元素宽度的一半);这样就解决了绝对定位下的居中问题了;
分享按钮