教你编写跨浏览器兼容的 CSS 代码[网站美工]

作为 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 代码[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：