浏览器兼容性与CSS盒模型应用实践.pdfVIP

盒模型、块状元素与内联元素、CSS选择器

【例子】

要求：

1）宽度、高度均是200像素；

2）颜色为红色#900；

自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下来，跟着

我下面说的一步一步修改。

下面是我的代码：

在IE6和FF中显示效果如下图：

怎么样，比较容易吧~，但是有没有发现，红域离浏览器的顶部和左边的边距IE6

和FF的不一样，有没有发现？这样的话，我们作出来的页面浏览器就不兼容了，效果不一样

了？为什么会这样？

这是因为每个浏览器都有一个内置的CSS文件，当你没有对某个的属性设置的时候，浏

览器就会应用内置的

CSS文件，怎么才能做到浏览器兼容？不着急，你只需要在

CSS文件中，将我们目前应用到得body和div置零就OK了，代码这么写

body,div{padding:0;margin:0;}

当把这句话加上，是不是两款浏览器显示效果一样了吧~如下图

好，我们接着来，现在再加一个条件

3）让红域与浏览器的顶部和左边距离为20像素；

怎么样，有没有思路？没有思路没关系，继续向下看

我们，只需要设置红色方块的外边距就可以了，添加如下

CSS代码：

margin-top:20px;

margin-left:20px;

效果如下图

这样就使红域定位于页面坐标(20,20)处了，与浏览器上边距和左边距都为20像素。

不过上面的这种写法我们可以精简为

margin:20px0020px;

其中的数值顺序是：上右下左。

而margin:20px0;则和margin:20px020px0;是等价的哟~只不过是更加精简而已，这样

Boxmodel,blockvs.inlineelements,CSSselectors

【例子】

要求：

1)Thewidthandheightareboth

200pixels;2)Thecolorisred#900;

Doityourselfandseeifyoucanmakeit?Dontlookatmycodefirst.Ifyoureally

cantmakeit,justdownloaditandmodifyitstepbystepasIsaybelow.The

followingismycode:ThedisyeffectinIE6andFFisasfollows:

Howaboutit?Itseasier~,buthaveyounoticedthatthedistanceweentheredarea

andthetopandleftmarginsofthebrowserisdifferentinIE6andFF?Inthiscase,the

pagebrowserwecreatedwillbeincompatibleandtheeffectwillbedifferent?Whyisthis?

Thisisbecauseeachbrowserhasabuilt-inCSSfile.Whenyoudonotsetthe

propertiesofacertaintag,thebrowserwillapplythebuilt-inCSSfile.

HowcanImakeCSSficompatiblewithbrowser