CSS跨浏览器开发原则[图文教程]

虽然我也同意每个项目都实现浏览器的完全兼容性，即所有web浏览器（暂且不考虑手机浏览器）用户都能体验相同的完美设计效果是永远都不可能的，但是，我相信大多数情况下近乎完全兼容性却是可以实现的。作为开发人员，我们的目标不应该仅仅停留在让项目在每个浏览器都能运作，而应该尽可能用最少的代码让项目在每个浏览器中都能实现尽善尽美，让今后网站的维护更加轻松。

这篇文章将向大家介绍一些最为重要的CSS 开发原则和技巧，希望能够帮助前端开发的新手和老生用最少的CSS代码实现跨浏览器体验的一致性。

CSS盒模型（ Box Model）

CSS盒模型是网页布局的基础，如果你想要实现跨浏览器布局的一致性，这是第一个必需透彻学习的对象。好在，它并不难掌握而且通常在所有浏览器上的效果都是一样的，除了某些情况下会与IE的版本相关（这个后面会详细谈到）。

CSS盒模型负责计算:

• 一个块级（block-level）元素占用多少空间。
• 边框（border）和/或外边距（margins）是否重叠或崩溃。
• 一个盒的尺寸大小。
• 从某种程度上说，它可决定一个盒与页面中的其他内容的相对位置。

CSS盒模型的基本规则如下:

• 块级（Block-level ）元素基本上是矩形。
• 块元素的尺寸是通过宽、高、填充、边框和外边距来计算的。
• 如果没有指定高度，块元素将会依据它所包含的内容来显示高度加上填充 (除非设置了浮动 floats，见下文)。
• 如果没有指定宽度，就会出现一个非浮动 non-floated盒并以适应父盒的宽度显示，减去填充(下文有更多介绍)。

关于块级元素，需要切记以下几个要点:

• 如果某个盒子（box）的宽度设定为“100%”，它就不能有任何外边距、填充或边框，否则它就会溢出父盒子。
• 垂直相邻外边距可能会导致复杂的崩溃问题而最终造成布局出问题。
• 相对位置的元素和绝对位置的元素是有区别的，这个涉及的东西比较多，这篇文章就不介绍。

在Firefox中使用Firebug显示的盒模型（ box model ）

块级元素Block和内联元素 Inline的区别

经验丰富的开发人员可能觉得这没什么好说的，不过，我觉得这个一个非常重要的问题，要是能够做到透彻理解，你就会说“啊，原来如此” 很多头疼的问题就会迎刃而解，以后对创建跨浏览器布局信心也会大大增强。

下面的图片说明了块级元素block和内联元素inlin的区别：

• Block元素默认情况下会自然横向扩展来填充父容器，因此没有必要设置宽度为“100%”。
• Block元素默认情况下会从父盒的最左边开始低于以往任何块元素(除非使用漂浮或定位元素，见下文)。
• Inline元素无视宽度和高度的设置。
• Inline元素会与文本一起流动，并受排版属性如空格、字体大小和字母间距的影响。
• Inline元素可以使用垂直对齐属性对齐，而block 元素不能。
• Inline元素的下方会自然留出一些空间以容纳破行掉下的文本元素。
• inline元素如果设置为漂浮可以变成块元素。
  生活不易，码农辛苦
  如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠