注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飘泊

努力做到全面...

 
 
 

日志

 
 

CSS布局宽度:margin和padding 真实宽度问题【总结】  

2013-06-08 08:06:46|  分类: DIV+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一起来看一个宽度问题,为了一目了然,我举了列子,通过列子,可以清楚的看到区别:

IE 6 ,Firefox ,Opera等
真实宽度=width+padding+border+margin


IE5

真实宽度=width-padding-border

很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的!

不用着急,今天我们就解决这个问题:

首先了解一个概念:

width:280px !important; //这个是正确的width书写方法,请这样写清楚;而width(空格)/**/:300px; //IE6等浏览器/win不解析这句,所以IE6/win仍然认为width的值是280px;而IE5.X/win读到这句,新的数值(300px)覆盖掉了旧的,因为!important标记对他们不起作用。这样就OK了。

现在我们看实例:

【padding布局宽度】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:300px; padding:0 10px 0 10px; background-color:#999966;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

【解释】在IE6,IE7,IE8,FF等浏览器直接获取实际/内容宽度middle280px,真实宽度计算:280PX+10PX+10PX=300PX;

IE5实际/内容宽度是middle280PX;真实宽度计算:320PX-10PX-10PX=300PX;(以下不再说明)

你可能觉得有点绕,没关系,你只要记住IE5宽度书写方式:width(空格)/**/:300px;其他浏览器书写方式:width:280px!important;这两个宽度之间的差值就是你定义的Padding + border 总大小(以下会验证)

学习的最好方法是自己调试,用不同的值去调试,这样你的记忆会更深刻!

【margin布局宽度】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:280px; margin:0 10px 0 10px; background-color:#999966;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等 middle: 实际/内容宽度是280PX,真实宽度是:300PX;
IE5 middle: 实际/内容宽度是280PX,真实宽度是:300PX;

(注释:真实宽度永远都要保持等于300,300PX+200PX+200PX=700PX, 否则DIV就会撑开,我们要讨论的就是在固定宽度300PX不变的情况下不同浏览器的宽度定义,所以以下不会再显示真实宽度值了)

在这里我建议你们下载一个工具IETester,这样可以同时观察在不同IE下的浏览情况。方便学习和实际使用。

【border布局宽度】

<div style="width:700px; margin:0 auto;">
<div style="float:left;width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:300px;border:10px #ff0000 solid; background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等:300PX-border 20px=280PX;

IE5: 280PX(IE6...)+border 20px=300px;

【margin + border】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:280px; margin:0 10px 0 10px; border:#ff0000 10px solid; background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等:300PX-margin 20px - border 20px=260PX;

IE5: 260PX(IE6...)+border 20px=280px;

【margin + border + padding】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:240px!important; width /**/:280px; margin:0 10px; border:#ff0000 10px solid; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等:300PX-margin 20px - border 20px - padding 20px=240PX;

IE5: 240PX(IE6...)+border 20px+padding 20px=280px;

【border + padding】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:300px; border:#ff0000 10px solid; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等:300PX-border 20px - padding 20px=260PX;

IE5: 260PX(IE6...)+border 20px + padding 20px=300px;

【margin + padding 】

<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:280px; margin:0 10px; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>

IE6,IE7,IE8,FF等:300PX-margin 20px - padding 20px=260PX;

IE5: 260PX(IE6...)+padding 20px=280px;

  评论这张
 
阅读(383)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017