DIV布局之道二:DIV块的嵌套,DIV盒子模型
2014-02-21 17:54
435 查看
本文讲解DIV块布局的第二种使用方式:嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块)。
请看如下代码:
CSS部分:
CSS Code复制内容到剪贴板
/*嵌套样式*/
.contain { width:200px; height:160px; margin:20px; padding:10px 20px 10px 20px; border:1px solid #FF6600; text-align:center}
.inner_contain { width:150px; height:30px; border:1px solid #009966}
HTML部分:
XML/HTML Code复制内容到剪贴板
<div class="contain">
<div class="inner_contain">
</div>
<div class="inner_contain">
</div>
<div class="inner_contain">
</div>
</div>
这里就是一个使用DIV嵌套的例子,我们看到外围有一个大的DIV嵌套了三个小DIV,其实现的效果如图所示
IE6和IE7效果
IE8和火狐效果
注意,这里的预览效果是在IE6和IE7下显示出来的效果,使用火狐和IE8,页面预览效果会不同,这是因为text-align:center这个属性在IE8和火狐下不能够使得内部的DIV块也居中。我们为了让内部的DIV也居中,可以给内部的DIV块使用margin:0px auto属性,即:
CSS Code复制内容到剪贴板
.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中称为“填充”),如图:
这里的阴影部分就是上例中的外边距和内边距的模型图,margin:20px即为外层的DIV边距,padding:10px 20px 10px 20px(上-右-下-左的内边距顺序)即为外层DIV的内边距(补白),DIV边距的设置是个难点,设置不当极易出现网页错位、变形,所以关于边距,从业者一定要时刻注意。
请看如下代码:
CSS部分:
CSS Code复制内容到剪贴板
/*嵌套样式*/
.contain { width:200px; height:160px; margin:20px; padding:10px 20px 10px 20px; border:1px solid #FF6600; text-align:center}
.inner_contain { width:150px; height:30px; border:1px solid #009966}
HTML部分:
XML/HTML Code复制内容到剪贴板
<div class="contain">
<div class="inner_contain">
</div>
<div class="inner_contain">
</div>
<div class="inner_contain">
</div>
</div>
这里就是一个使用DIV嵌套的例子,我们看到外围有一个大的DIV嵌套了三个小DIV,其实现的效果如图所示
IE6和IE7效果
IE8和火狐效果
注意,这里的预览效果是在IE6和IE7下显示出来的效果,使用火狐和IE8,页面预览效果会不同,这是因为text-align:center这个属性在IE8和火狐下不能够使得内部的DIV块也居中。我们为了让内部的DIV也居中,可以给内部的DIV块使用margin:0px auto属性,即:
CSS Code复制内容到剪贴板
.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中称为“填充”),如图:
这里的阴影部分就是上例中的外边距和内边距的模型图,margin:20px即为外层的DIV边距,padding:10px 20px 10px 20px(上-右-下-左的内边距顺序)即为外层DIV的内边距(补白),DIV边距的设置是个难点,设置不当极易出现网页错位、变形,所以关于边距,从业者一定要时刻注意。
相关文章推荐
- log
- Block 使用总结
- DIV布局之道一:DIV块的水平并排、垂直并排
- Block 使用总结
- Block 使用总结
- [Python]网络爬虫(11):亮剑!爬虫框架小抓抓Scrapy闪亮登场!
- Go Sublime 2 的安装方法
- Oracle 11g 新特性之---Oracle 内存自动管理
- 脸谱为什么认为WhatsApp每个员工值20亿
- SQLite--字段类型处理
- C语言打印汉字表
- android代码学习心得
- DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV
- Android MT6572平台Recent界面背景是高亮的,但是其他平台是灰色的
- solr与tomcat整合
- web导出table数据为excel、doc以及打印数据
- 使用repo下载google源码,跟编译 ,遇到的错误解决
- java修改文件或者目录的最后修改时间
- android编程小技巧集锦
- Javascript的块级作用域