本文讲解DIV块布局的第二种使用方式：嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”，说的通俗一点就是嵌套（一个大的DIV块内部又包含一个或多个DIV块）。

请看如下代码：

CSS部分：

CSS Code复制内容到剪贴板
  1. /*嵌套样式*/  
  2. .contain { width:200px; height:160px; margin:20px; padding:10px 20px 10px 20px; border:1px solid #FF6600; text-align:center}   
  3. .inner_contain { width:150px; height:30px; border:1px solid #009966}  

HTML部分：

XML/HTML Code复制内容到剪贴板
  1. <div class=“contain”>  
  2.     <div class=“inner_contain”>  
  3.     </div>  
  4.     <div class=“inner_contain”>  
  5.     </div>  
  6.     <div class=“inner_contain”>  
  7.     </div>  
  8. </div>  

这里就是一个使用DIV嵌套的例子，我们看到外围有一个大的DIV嵌套了三个小DIV，其实现的效果如图所示

DIV嵌套应用

IE6和IE7效果

DIV嵌套效果演示

 IE8和火狐效果

注意，这里的预览效果是在IE6和IE7下显示出来的效果，使用火狐和IE8，页面预览效果会不同，这是因为text-align:center这个属性在IE8和火狐下不能够使得内部的DIV块也居中。我们为了让内部的DIV也居中，可以给内部的DIV块使用margin:0px auto属性，即：

CSS Code复制内容到剪贴板
  1. .inner_contain { width:150px; height:30px; border:1px solid #009966; margin:0px auto;}  

这时候，就实现了浏览器兼容。

DIV层可以实现多重嵌套，其内部可以多级嵌套多个DIV，这与表格嵌套类似，熟练使用DIV的嵌套可以很方便实现表格单元格实现的效果，例如一个三行两列的表格，只需要在一个DIV内部嵌套6个DIV即可，当然复杂的表格结构还是不建议使用DIV布局，因为表格主要用于数据处理，所以在布局网页的时候，要根据实际需要来选择布局方式。

DIV嵌套布局网页时候，尤其要注意DIV的外边距（CSS中称为“边距”）和内边距（CSS中称为“补白”，DW中称为“填充”），如图：

DIV盒子模型

这里的阴影部分就是上例中的外边距和内边距的模型图，margin:20px即为外层的DIV边距，padding:10px 20px 10px 20px（上-右-下-左的内边距顺序）即为外层DIV的内边距（补白），DIV边距的设置是个难点，设置不当极易出现网页错位、变形，所以关于边距，从业者一定要时刻注意。

版权声明：本文为minghualiyan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/minghualiyan/p/3559953.html