实战案例：DIV嵌套_html/css_WEB-ITnose-html教程-PHP中文网

实战案例：DIV嵌套_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:32:02

原创

1685人浏览过

立即学习“前端免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

　缘于页面结构语义化的考虑，我们应该慎用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"></div>    <div id="footer"></div></div>

登录后复制

实际上这种增加一层div嵌套的方法，肯定会给浏览器的显示带来负担，我们可以将body元素作为一个外套,这样就能充分发挥body的作用，以免造成浪费。

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

登录后复制

又比如：要给上述顶部页眉部分加一个导航条：

<div id="wrap">    <div id="header">        <div id="logo"></div>        <div id="banner"></div>        <div id="nav">            <ul>  <!--导航列表-->                <li></li>    <!--导航列表项-->                <li></li>    <!--导航列表项-->                <li></li>    <!--导航列表项-->            </ul>        </div>     </div>   </div>

登录后复制

上述代码是最优化的么？当然不是，ul元素与div元素一样都是块状元素，一个导航菜单外面嵌套两层元素，势必会产生代码冗余，如果没有被定义的特殊样式，我们完全可以这样写：

<body id="wrap">        <div id="logo"></div>        <div id="banner"></div>        <div id="nav">            <ul>  <!--导航列表-->                <li></li>    <!--导航列表项-->                <li></li>    <!--导航列表项-->                <li></li>    <!--导航列表项-->            </ul>        </div>  </body>

登录后复制

　　这种情况就是最优的。但是，这样做存在一定的风险，可能需要使用更多的css样式来控制整个元素的显示。如果多嵌套一层，对页面布局会有更大的帮助，能节省大量不必要的css控制代码，此时布局的功能重要性就远大于结构的功能性。

立即学习“前端免费学习笔记（深入）”；

总之，在我们大力提倡尽力减少div元素的多次嵌套时，是针对当前网页设计中设计师乱套div元素的现状而说的，但并不是谈套色变，必要的嵌套是应该的，也是必须的！

立即学习“前端免费学习笔记（深入）”；

补充：页面语义化操作：

1、XHTML结构的语义性

立即学习“前端免费学习笔记（深入）”；

2、构建语义化页面操作

立即学习“前端免费学习笔记（深入）”；