div记录.docx

如二：

content_a应用向左的浮动，而content_b不应用任何浮动

代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

#content_a{width:

200px;height:

80px;float:

left;border:

1pxsolid

#000;margin:

10px;background:

#ccc;

}#content_b{width:

200px;height:

80px;border:

1pxsolid

#000;margin:

10px;background:

#999;}

这是第一个DIV向左浮动

这是第二个DIV不应用浮动

输出结果：

  在IE7中的效果：

在FF中的效果：

在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后面。

在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。

这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里：

 这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。

如三：

同时对这两个容器应用向左的浮动

代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

#content_a{width:

200px;height:

80px;float:

left;border:

1pxsolid

#000;margin:

10px;background:

#ccc;}

#content_b{width:

200px;height:

80px;float:

left;border:

1pxsolid

#000;margin:

10px;background:

#999;}

这是第一个DIV向左浮动

这是第二个DIV向左浮动

输出结果：

在IE7中的效果如图：

在FF中的效果如图：

在IE与FF中，他们的效果基本取得了一致。

在布局中，我们可应用这类IE与FF兼容的方法。

如四：

content_a不应用任何浮动,而content_b应用向左的浮动

代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

#content_a{width:

200px;height:

80px;border:

1pxsolid

#000;margin:

10px;background:

#ccc;}

#content_b{width:

200px;height:

80px;float:

left;border:

1pxsolid

#000;margin:

10px;background:

#999;}

这是第一个DIV不应用浮动

这是第二个DIV向左浮动

输出结果：

在IE7中的效果如图：

在FF中的效果如图：

在IE与FF中均未有太大的变化。

在IE中，应用浮动后的content_b却造成了一个双边距的BUY。

关于IE的双边距BUY请参考这里：

向左浮动会出现何种状态呢？

在向右浮动后，最大的变化就是在HTML中，前面的元素在最右边，后面的元素跑到了最左边。

如五：

两个元素同时应用向右的浮动

代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

#content_a{width:

200px;height:

80px;float:

right;border:

1pxsolid

#000;margin:

10px;background:

#ccc;}

#content_b{width:

200px;height:

80px;float:

right;border:

1pxsolid

#000;margin:

10px;background:

#999;}

这是第一个DIV向右浮动

这是第二个DIV向右浮动

输出结果：

在IE7中的效果如图：

在FF中的效果如图：

同时对两个元素应用向右的浮动基本保持了一致，但请注意方向性，第二个在左边，第一个在右边。

对于其它页面构成元素，浮动的原理基本是一样的。

Div的position属性（四个）

在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。

Position属性有四个可选值，它们分别是：

static、absolute、fixed、relative。

我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

position:

static　无定位（默认情况）

　　该属性值是所有元素定位的默认情况，在一般情况下，我们不需要非凡的去声明它，但有时候碰到继续的情况，我们不愿意见到元素所继续的属性影响本身，从而可以用position:

static取消继续，即还原元素定位的默认值。

　　如：

#nav{position:

static;}

position:

absolute　绝对定位（能够很准确的将元素移动到你想要的位置）

　　使用position:

absolute，能够很准确的将元素移动到你想要的位置，让我将nav移动到页面的右上角。

我们可以这样写：

nav{position:

absolute;top:

0;right:

0;width:

200px;}

　　使用绝对定位的nav层前面的或者后面的层会认为这个层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不影响到其它z方向的层。

所以position:

absolute用于将一个元素放到固定的位置很好用，但是假如需要层相对于四周的层来确定位置就无能为力了。

只能用下面讨论到的相对定位了。

　　这里有个WinIE的bug需要提到，就是假如为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

position:

fixed　相对于窗口的固定定位（IE6不支持CSS中的position:

fixed属性）

　　这个定位属性值是什么意思呢？

元素的定位方式同absolute类似，但它的包含块是视区本身。

在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。

例如，它答应框架样式布局。

在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。

这一点可用于生成流动标题或脚注。

我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

　　请非凡注重，IE6不支持CSS中的position:

fixed属性。

真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

position:

relative　相对定位

　　所谓相对定位到底是什么意思呢，是基于哪里的相对呢？

我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。

既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

假如要让nav层向下移动20px,左移40px:

　　我们可以这样写：

#nav{position:

relative;top:

50px;left:

50px;}

但您需要注重下面的情况，相对定位紧随他的层woaicss是不会出现在nav的下方，而是和nav发生一定的重叠！

例如：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml">

#nav{

width:

200px;

height:

200px;

position:

relative;

top:

50px;

left:

50px;

background:

#ccc;

}

#woaicss{

width:

200px;

height:

200px;

background:

#c00;

}

输出结果：

注意：

position:

relative并不是很好用的，nav已经移走了，相对于原来的位置，向右向左各移了50px。

但我们的另一个容器woaicss什么也没有察觉，当作nav是在原来的位置上（即00的位置，而不是5050），不依不饶的紧跟在nav的后面。

大家在使用时要注重方法与总结经验。

position属性父级对象和同级对象

div+css布局要素：

文档流position属性、父级对象和同级对象。

从学div+css以来，一直对position几个属性的理解不够清晰。

自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。

因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。

那么div+css布局的过程其实就是摆放这些盒子的过程。

最近一周来，专门针对这个问题进行了深入的思考和研究。

结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识，同时让自己对整个div+css布局有了更深入的认识。

因为div实质是一个四方块，被很多业界人士形象的比喻成盒子。

那么div+css布局的过程其实就是摆放这些盒子的过程。

而我觉得控制或者说影响这些盒子的摆放的因素主要有一下几个属性：

position、float、clear、margin、left、top、right、bottom、z-index；另外还要深入理解并确定好“父级对象”及“同级对象”，还有要很好的理解并想象出“文档流”的概念。

下面根据自己的理解对以上元素的作用和彼此间的联系做详细的解释说明。

1、什么是“文档流”？

关于“文档流”有位网友这样解释：

将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素。

我能理解这位网友的意思，其实他的理解和我是一样的，只是他有一点小的失误，就是他把“文档流”定义成一种“行为”了——如何摆放元素。

但很明显，“文档流”是个名词，实质上它指“通过这种行为而产生的一个实体，即展现在浏览者眼前的页面。

”

那么，我们经常看到“正常文档流”和“脱离正常文档流”的字样。

我想要想很清晰的理解这个问题，要从理解“div+css布局”与“table布局”的一个和大的不同说起。

从我的理解而言，table布局是一个二维空间的布局（即一个平面上的布局）；而“div+css布局”是个三维空间的布局（即一个空间上的布局）。

那么“div+css”是如何将平面转换为空间的呢？

这要归功于以下五个属性：

left、right、top、bottom、z-index，可以将right（left）、top（bottom）、z-inde

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

div 记录

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。