热门关键字:   网站安全  黑客攻防  安全漏洞  系统安全  网络安全

教你编写跨浏览器兼容的 CSS 代码

发布时间:2010-06-11 09:30文章来源:网络文章作者:秩名 点击次数:
摘要:作为 Web 设计 师,你的网站在各种 浏览器 中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为, 完美的跨浏览器兼容并不必要 ,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼...

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧

 

理解 CSS 盒子模型

如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器。

CSS 盒子模型负责处理以下事情:

  • 一个 blcok (区块)级对象占据多大的空间
  • 该对象的边界,留白
  • 盒子的尺寸
  • 盒子与页面其它元素的相对位置

CSS 盒子模型有以下准则:

  • Block (区块)对象都是矩形 (事实上所有对象都如此)
  • 其尺寸由 width, height, padding, borders, 以及 margins 决定
  • 如果不设置高度,该盒子的高度将自动适应其包含的内容,加上留白等(除非使用了 float)
  • 如果不设置宽度,一个非 float 型盒子水平上将充满其父容器(扣除父容器的留白)

处理 block 级对象时,必须注意以下事项:

  • 如果一个盒子的宽度设置为 100%,它就不能再设置 margins, padding, 和 borders,否则会撑破其父容器
  • 垂直毗邻的 margin 会引起复杂的坍塌问题,导致布局问题(比如两个垂直毗邻的 Block 对象,上面的对象的 bottom-margin 为 40,下面的对象的 top-margin 为 20,则两个对象的间距将是 40,而不是 60 - 译者)
  • 拥有相对位置和绝对位置的对象,拥有不同的行为


Firefox 的 Firebug 中显示的盒子模型

 

标签分类: CSS 网站开发

上一篇:CSS小技巧:优化你的CSS代码
下一篇:常用的CSS类的规范写法