DIV布局之道二：DIV块的嵌套，DIV盒子模型

本文讲解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边距的设置是个难点，设置不当极易出现网页错位、变形，所以关于边距，从业者一定要时刻注意。

转载于:https://www.cnblogs.com/minghualiyan/p/3559953.html

DIV布局之道二：DIV块的嵌套，DIV盒子模型相关推荐

DIV布局之道四：clear:both清除DIV两侧浮动详解
我们要实现图中表格实现的效果,使用DIV+CSS该如何实现呢? 众所周知,要实现如上效果,我们写一个两行两列的表格,使得表格第二行两个单元格合并即可实现上图效果,可以使用如下代码实现: XML/HTM ...
css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
p标签里面不能嵌套div
先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...
div背景色更改闪烁_HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明
div背景色更改闪烁 One of the most common things you may have to do as a web developer is to change the bac ...
DIV布局之道一：DIV块的水平并排、垂直并排
DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code 复制内容到剪贴板 .lay1 ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...

DIV布局之道二：DIV块的嵌套，DIV盒子模型

DIV布局之道二：DIV块的嵌套，DIV盒子模型相关推荐

最新文章

热门文章