经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 如何理解负边距

查看: 1409|回复: 3

[求助] 如何理解负边距 [复制链接]

xmlovedoudou　楼主

往事如蜂

银牌会员 

帖子: 1523
体力: 1344
威望: 0

发表于 2010-7-27 10:03:41 |显示全部楼层

这是一列液态一列固定宽度的布局，有点郁闷的是sider是怎么跑上去占了一块地方？

提示：您可以先修改部分代码再运行

另一个例子是把123按顺序显示的流体布局改变成213的浮动布局，不允许添加多余的外包含块。

提示：您可以先修改部分代码再运行

这个虽然好理解些，但是还是对负边距不太清楚。谁能把原理仔细解释下？

[ 本帖最后由 xmlovedoudou 于 2010-7-27 10:05 编辑 ]

再见了，蓝色理想...

西部数码顶级域名注册商39元抢注！

使用道具举报

xmlovedoudou　楼主

往事如蜂

银牌会员 

帖子: 1523
体力: 1344
威望: 0

发表于 2010-7-27 16:32:02 |显示全部楼层

没人理睬么？我是在网上搜索不到才提问的。

再见了，蓝色理想...

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

atlantis2007　

高级会员 

帖子: 156
体力: 615
威望: 0
居住地: 辽宁省大连市

发表于 2010-7-27 16:46:58 |显示全部楼层

213 or 21 布局的是圣杯布局啦，为的是首先让中间的内容先显示出来,

使用道具举报

kllb520　

小强ORG

银牌会员 

帖子: 568
体力: 1731
威望: 12
居住地: 湖南省长沙市

发表于 2010-7-28 17:12:50 |显示全部楼层

margin值的解析规则是margin-left和margin-top的参考线为左边元素/上面元素的参考线，如果没有兄弟元素，就是以父元素的左内侧和上内侧为参考线（内侧即盒模型的content外侧）而margin-right和margin-bottom的参考线为元素本身的border右侧和border下侧为参考线。margin为正值会影响整个盒模型的大小即border以内的盒模型大小+margin值，如果margin为负值，则根据参考线向参考线外面位移。
如附件所示，mainer只是相对于参考线发生了位移（right和bottom当作参考线发生了位移比较好理解），又因为mainer和sider都是流动布局，所以saider会流入mainer的300px间隙
为此写了一篇博文margin值解析小结
有理解不对的地方请大虾们指点。

[ 本帖最后由 kllb520 于 2010-7-28 17:16 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

小强ORG

使用道具举报

返回列表

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-4 15:19 , Processed in 0.112838 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

[求助] 如何理解负边距 [复制链接]

浏览过的帖子

浏览过的版块