DIV布局之道二:DIV块的嵌套,DIV盒子模型
本文讲解DIV块布局的第二种使用方式:嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块)。
请看如下代码:
CSS部分:
- /*嵌套样式*/
- .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部分:
- <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属性,即:
- .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边距的设置是个难点,设置不当极易出现网页错位、变形,所以关于边距,从业者一定要时刻注意。
DIV布局之道二:DIV块的嵌套,DIV盒子模型的更多相关文章
- DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
- div 布局
转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...
- p标签里面不能嵌套div
先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- IT兄弟连 HTML5教程 使用盒子模型的浮动布局
虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- DIV布局之道一:DIV块的水平并排、垂直并排
DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS+DIV布局应用(2015年06月10日)
Div+css布局应用 一.html元素分类 2.1.顶级元素(Top-level element) 定义 组成html页面最顶级标签 特点 1. 不可设置宽高: 2. 必须在文档流中处于最高级位置: ...
随机推荐
- 浅谈intval()函数用法
<? } } 总结:intval()函数功能1.参数一定是数字否则会报错,2.如果是数字那一定是整数,如果有小点,那会省略掉,3,强调参数可以有“-”值.4.参数第一位不应为0开头,不然会自动转 ...
- 省队集训day6 C
Description 给定平面上的 N 个点, 其中有一些是红的, 其他是蓝的.现在让你找两条平行的直线, 使得在保证 不存在一个蓝色的点 被夹在两条平行线之间,不经过任何一个点, 不管是蓝色 ...
- Swift中使用构建配置来支持条件编译-b
在Objective-C中,我们经常使用预处理指令来帮助我们根据不同的平台执行不同的代码,以让我们的代码支持不同的平台,如: 1 2 3 4 5 6 7 8 9 #if TARGET_OS_IPHON ...
- Ganglia + Nagios 初步实践
参考文档: http://www.bubuko.com/infodetail-715636.html http://www.linuxidc.com/Linux/2014-01/95804p2.htm ...
- Java中匿名类的两种实现方式(转)
使用匿名内部类课使代码更加简洁.紧凑,模块化程度更高.内部类能够访问外部内的一切成员变量和方法,包括私有的,而实现接口或继承类做不到.然而这个不是我说的重点,我说的很简单,就是匿名内部类的两种实现方式 ...
- C51指针的使用
指针就是指变量或数据所在的存储区地址.如一个字符型的变量 STR 存放在内存单元DATA 区的 51H 这个地址中,那么 DATA 区的 51H 地址就是变量 STR 的指针.在 C 语言中指针是一个 ...
- 在Qt中将函数发送到主线程执行
考虑这样一种需求,使用Qt的线程类QThread在后台执行操作(比如说拷贝文件)的时候发生了错误,产生了一个错误信息需要提醒给用户,在后台输出很显然是不够的,因为用户可能根据就没有任何控制台可供程序输 ...
- MFC浅析(4) CObject浅析
MFC CObject浅析 1.CObject简要声明 2.CRuntimeClass结构 3.RUNTIME_CLASS 4.DYNAMIC支持 5.DYNCREATE支持 6.SERIAL支持 C ...
- 关于if语句后面的花括号
两种写法.之前我比较2.总喜欢写了if语句后 不带 花括号.总感觉这样节省空间. 最后偶然看到google推荐的 才 顿悟到 这样虽然可以 但可读性不太好. 参考:https://source.and ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...