★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

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

David\s BLOG 2008/6/2 21:17:12 深山行者 字体:  浏览 4729

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。
相关阅读
( 2019/4/16 14:29:04 )asp导出内容到excel表并自定义命名后下载(非打开)
( 2018/4/15 16:01:30 )利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
( 2018/3/20 15:13:15 )asp利用sina提供的ip库端口来获得当前IP所有的地区,所在国,所在省,所在市,在线解析json
( 2016/6/16 11:49:35 )access数据库做的网站出现.ldb不能删除超过2KB之后就会网站访问不了数据库,提示数据库不存在
( 2015/10/16 19:52:57 )httpd.ini中的RewriteRule、RewriteCond规则了解以有二级域名解析实例
( 2015/9/20 11:01:26 )ASP读取json并输出
( 2014/9/19 9:30:20 )介绍JavaScript里比较和逻辑运算符
( 2014/9/15 16:09:32 )利用javascript简短功能就可以检查form表单中的元素是否已经填写
更多信息>>栏目类别选择
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 兼容
更多>>最新添加文章
sql server中前缀为PK、UK、DF、CK、FK表的意思
网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法
ASP利用fso读取文件夹里所有文件的名字
jquery动态生成的html代码中无法使用jquery事件的解决方法
asp实现获得当前文章的上一篇信息与下一篇信息功能及代码
asp导出内容到excel表并自定义命名后下载(非打开)
'禁止站外提交页面和数据
asp将中文汉字字符转为unicode编码(\u编码)与把unicode编码转为汉字
更多>>随机抽取信息
在DIV+CSS里面IE5.5的专用标签
购物网上图片放大效果
极酷的,漂亮的页面loading等待页面特效
12个定律原则
让层处于上一个DIV层的右下角
iframe框架自适应高度代码
css里阴影效果滤镜DropShadow颜色数值的详细设置
radio单选按钮组选择详细