div+css学习笔记一（转）

div+css学习笔记一

(2011-05-12 07:32:08)

标签： div css 居中 背景图片 ie6 ie7 margin 杂谈

分类： 网页制作

1、IE6中用了float之后导致margin-left/right双倍边距

解决方法加上display:inline;

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间。

2、居中问题：
如果在body中设置了text-align:center，则div在IE中能居中，但是在FF中不能居中，如要在FF中也居中，必须在div中加上margin：0 auto;

(注:margin：0 auto；在IE下是管用的 只是你的DIV要设定宽度。要是DIV不设宽度 IE下居中就得在BODY中写进body{text-align:center;})

3、div加margin-top/margin-bottom不起作用的解决方案

测试的时候ie6和ie7是正常的，而在ie8和firefox里面测试边距没有起到任何的作用。

解决方法：

(1)、把里层div的margin-top/bottom改成外层div的padding-top/bottom,不过,前提是Div没有设置边框
(2)、给要设置margin的div加上float:left;

4、设置padding对背景图片的位置无影响。
<div style="float:left; width:100px; height:100px; border:1px #FF0000 solid; padding-left:50px; padding-top:50px; background: url(bgGradient1.gif) repeat-x;">test1</div>
<div style="float:left; width:100px; height:100px; border:1px #FF0000 solid; margin-left:10px; background: url(bgGradient1.gif) repeat-x; display:inline;">test2</div>
<div style="clear:both; float:left; width:100px; height:100px; border:1px #FF0000 solid; margin-top:10px; background: url(bgGradient1.gif) repeat-x;">test3</div>
效果图：

左上角图片padding使文字的位置发生了变化，但是由图可见，背景图片的开始位置并未发生改变，只是第一个div总的宽度由于设置了padding值变为152px；背景图片又在x轴方向上延伸，所以比其余两个图要长些。

（注：在IE6及以上版本的浏览器，FF中，width和height只是指内容的宽度，不包括padding值和margin值、border值。而在IE6以前版本的浏览器中width的值包括padding值和margin值、border值。）

5、背景颜色占据元素的所有内容区域，包括padding和border，但是不包括元素的margin。它在Firefox, Safari ,Opera以及IE8中工作正常，但是IE6和IE7中，background没把border计算在内。

但是背景图片不会占据border区域，并且pading也不会影响他的位置。但是如果设置背景图片在x或y轴上延伸，会占据padding区域。

当然，有些东西只是个人的理解，如有不对的地方，还请大家多多指教！