HOME
BBS
深山帮帮欢迎您,您可以注册或者
qq登录只需一步,快速开始
深山旅行社网站管理系统开发完成,欢迎各位网友测试! 点这里测试
565449214 给站长留言
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

CSS关于box(盒模式)的一系列问题详解

David\s BLOG 2008-6-2 21:17:12 深山行者 字体:  浏览 4146 我要评论

W3C定义的盒模式如下:

width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时,IE6中box左右的margin会加倍

比如:

以下为详细代码

 

左面的inner的左面margin明显大于5px。 这时候,定义inner的display属性为inline。 外层box自动计算高度的问题 根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。 Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。比如:

 

以下为详细代码

上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就必须增加额外的高度网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。如下:

 

以下为详细代码
因此,外层css要定义overflow属性,内层最后要加上clear属性。
居中问题
需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
你可以这样定义使它横向居中:
#wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; }
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:
在外层用text-align属性。就象这样:
#outer { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; }
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ,
第二个text-align:left;是将#warp中的文字居左。 因此,在有居中元素的css中,外层css要定义text-align:center属性,内层居中用margin:x auto x auto定义,并重新定义text-align。
Ads loading...
相关阅读
( 2008-6-2 21:17:12 )CSS关于box(盒模式)的一系列问题详解
( 2008-3-21 20:06:44 )CSS完美兼容IE6/IE7/FF的通用方法
( 2008-3-16 21:59:35 )谈IE与Firefox的CSS兼容大全
共有0条关于《CSS关于box(盒模式)的一系列问题详解》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 400 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

Ads loading...
更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
Ads loading...
更多>>最新添加文章
asp中Request.ServerVariables能获取的信息整理总结
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
sql语句中怎么按照in语句里的id原有的顺序进行排序输出
通过设置iis的进程池让网站的并发数,性能提升几个档次
asp通过多次获得来取得用户的真实IP
通过XMLHTTP检查网站能否打开
asp利用sina提供的ip库端口来获得当前IP所有的地区,所在国,所在省,所在市,在线解析json
利用aspJpeg组件生成多图片水印组合时给加上透明水印图片
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
深山网吧留言板系统(激情穿越火线)v4.3
这几天是怎么了???
小旋风ASP服务器安装文件下载
深山网吧留言板系统v4.0
计划永远比变化快的得多
用某些事情顶替另外一件事情。
好久没有做过一个东西了
乱涂
Ads loading...