Web2.0下XHTML+CSS 设计需要注意的地方小结

Web2.0时代，XHTML+CSS成为了前端开发的主流技术，那么在使用XHTML+CSS进行Web2.0的设计时，我们需要注意哪些方面呢？下面是一份小结：

XHTML+CSS 设计需要注意的地方小结

1. 结构与表现的分离

在XHTML+CSS设计时，结构和样式应该分离开来，避免将样式写在HTML的标签中，这样不仅减少了HTML文件的可读性，也不利于后期维护。正确的做法是将样式统一集中在CSS文件中，与HTML文件分离，可以更加灵活地进行修改样式的操作。

2. 渐进增强与优雅降级

渐进增强（Progressive Enhancement）即从开发最基本的功能开始，逐步向页面添加必要的功能和样式，降低不同浏览器对网页兼容性的要求。优雅降级（Graceful Degradation）则是指尽量将网页的核心功能放在所有浏览器都可以使用的地方，保证网页在无法使用某些功能时仍能够正常运行。

3. 语义化标签的应用

在XHTML标准中，诸如、、

、
、

等标签都有着明确的语义含义，利用这些标签可以使HTML代码更加语义化。适当的运用语义化标签，不仅让代码变得更加易懂易读，也有利于SEO（搜索引擎优化）。

4. 盒模型的理解

在CSS中，盒模型指元素的尺寸由四个部分组成：content、padding、border、margin。为了正确控制盒子的大小，需要理解盒模型的概念，同时需要声明元素的盒模型属性。在XHTML+CSS设计中，有时还需要通过设置盒子的position属性和float属性等来实现不同的布局。

5. 响应式Web设计

随着移动设备的普及，响应式Web设计变得越来越重要。在XHTML+CSS设计中，采用响应式Web设计可以自适应屏幕大小，实现在不同设备上的良好展示效果。例如可以通过设置属性@media screen and (max-width:480px)来指定针对移动设备的样式。

6. 浏览器兼容性问题

不同的浏览器在渲染XHTML+CSS网页时，会存在一些兼容性问题。为了避免出现这些问题，可以使用重置样式表统一不同浏览器的样式，同时使用浏览器前缀（如-webkit-、-moz-、-ms-等）来指定不同浏览器的样式。最好使用不同浏览器的测试工具进行测试，以保证页面在各个浏览器上的兼容性。

示例说明：

下面以样式的分离和盒模型的理解为例进行说明。假设我们已经有了一个HTML文件，其中定义了一个div元素：

<div id="example-box">这是一个示例。</div>

为了将样式和结构分离，我们需要创建一个CSS文件，在其中为该元素定义样式：

/* example.css */
#example-box{
  width: 200px; /* 元素的宽度 */
  height: 100px; /* 元素的高度 */
  background-color: #F00; /* 元素的背景颜色 */
  border: 1px solid #000; /* 元素的边框样式 */
  margin: 10px; /* 元素的外边距 */
  padding: 5px; /* 元素的内边距 */
}

通过这种方式，我们可以将样式和结构彻底分离，避免了把样式混杂在HTML标签中的情况。同时，我们还能更加方便地调整样式的样式，针对不同尺寸的浏览器（如电脑、手机等）进行适配。

接下来，我们来举个例子，说明遇到问题时如何理解盒模型。假设我们又有一个元素：

<div id="box2">一个盒子</div>

并且我们需要将它的宽度设为200px，同时在盒子四周留出20px的空白，同时绿色背景色和粗实边框。

#box2{
  width: 200px; /* 盒子的宽度 */
  height: auto; /* 盒子的高度 */
  background: #5cb85c; /* 盒子的背景颜色 */
  border: 5px solid #d9534f; /* 盒子的边框样式 */
  margin: 20px;  /* 盒子的外边距 */
  padding: 20px; /* 盒子的内边距 */
  box-sizing: border-box; /* 声明盒子采用的盒模型 */
}

需要注意到，在计算盒子的大小时，需要根据盒模型的定义将content、border、padding等尺寸包括在内。在声明盒子采用的盒模型时，需要将box-sizing属性设置为border-box。这样，当我们设置盒子宽度为200px时，盒子的实际尺寸就是200px，包括了20px的外边距、10px的边框宽度和40px的内边距在内。如果不设置box-sizing属性，那么盒子的宽度仅包括了content和padding的尺寸，且其实际尺寸会比设定的宽度大。