实战案例：DIV嵌套

 

　缘于页面结构语义化的考虑，我们应该慎用div和span这两个通用元素，只有当划分页面结构模块时才使用div元素，因为模块本身是没有任何语义的，他仅代表一块独立的结构。如果想对段落内部分内联元素或文本应用某种特殊样式时，就可以使用span元素把他们独立封装在一个容器内。

 

div作为布局元素，它与表格一样是可以嵌套的。因为浏览器对于任何元素的解析方式都是一样的，一般从最里层开始，然后不断向外解析。当嵌套层级很深时，将会使浏览器消耗更多的资源对嵌套关系进行解析，势必会影响浏览器的速度。

 

对于一个上下三行的布局结构：

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

为了实现页面固定宽度和居中显示效果，分别给三个div设置css样式就有点麻烦了，我们可以给它嵌套一个div层：

<div id="wrap">    
    <div id="header"></div>
    <div id="main"