WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>DIV布局之道二:DIV块的嵌套,DIV盒子模型

DIV布局之道二:DIV块的嵌套,DIV盒子模型

[ 录入者:91ctc | 时间:2012-01-07 05:39:00 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

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

请看如下代码:

CSS部分:

CSS Code复制内容到剪贴板
  1. /*嵌套样式*/  
  2. .contain { width:200pxheight:160pxmargin:20pxpadding:10px 20px 10px 20pxborder:1px solid #FF6600text-align:center}   
  3. .inner_contain { width:150pxheight:30pxborder: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:150pxheight:30pxborder:1px solid #009966margin: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边距的设置是个难点,设置不当极易出现网页错位、变形,所以关于边距,从业者一定要时刻注意。

相关文章:

DIV布局之道一:DIV块的水平并排、垂直并排

学习DIV+CSS要注意些什么,如何学习DIV+CSS布局网页

浅谈网页制作模型,网页盒子模型,DIV盒子模型

网页设计如何入门,如何设计网页

 本讲到此结束,敬请浏览本站后续技术文章。如有疑问请在本站留言

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号