div定位布局图解(positionabsoluterelativefied和float浮动)

下载本文档

ID 105031
格式 docx
大小 233.86 KB
约7页
收藏
点赞(0)
海报
举报

/ 7

下载本文档

文本预览下载提示常见问题

div+css用于网页布局似乎已经流行了很久很久了，可固执的我从骨子里似乎对它就有抵触情节，一方面对之轻视，一方面每每遇到它又被其折磨的痛苦不堪。痛定思痛，决定对它潜心研究一下，将其玩弄于股掌之间！网上搜了搜div定位相关的内容，大多是从表面上介绍一些使用上的规律，很少有描述为什么如此的文章。于是，便引发了我想写这样一篇文章的冲动。说到页面元素的定位，就不得不首先提起文档流的概念。关于文档流，我并没有在网络或书籍上找到一个确切的定义。在此，我只能说说我个人对其的认识。所谓文档流，即为页面元素自上而下、从左到右的排列次序，如同线性的流一般。我们在编写页面时，也基本上是按照这样的一个顺序来安置各种元素。如果我们没有对div指定定位方式的话，浏览器就会按照其在文档流中的次序进行显示。如：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="www3.org/1999/xhtml"><head><title>div定位测试</title></head><body><divid="divFirst"style="width:400px;height:50px;background-color:#FF00FF;">这里是divFirst</div><divid="divSecond"style="width:400px;height:50px;background-color:#01DFD7;">这里是divSecond</div><p><fontcolor="#FF0000">*</f在普通的文档流中，div块级元素是自上而下依次排列的</p></body></html>上述代码中，两div并未采取任何的定位方式，浏览器按普通文档流的方式对其显示，以下是显示效果：下面我们就来详细的说说div定位的关键的两个步骤。首先，我们要判断被定位元素是否脱离普通文档流。是否脱离文档流将会影响文档流中其余元素的定位。对于脱离了文档流的元素，其显示已经不再受普通文档流的束缚，而文档流中的其余元素的定位就如同该元素已经不在页面上一样。而对于未脱离文档流的元素，其无论偏移到了页面的何处，实际上占据的仍然是其原来的位置。文档流中的其余元素定位时，也就会相应的留出该元素的位置。在几种定位方式中，position:absolute和float是脱离文档流的，而position:relative不会使被定位的对象脱离普通的文档流。下面我们来举例说明：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="www3.org/1999/xhtml"><head><title>div定位测试2</title></head><body><divid="divFirst"style="width:400px;height:50px;background-color:#FF00FF;">这里是divFirst</div><divid="divSecond"style="width:400px;height:50px;background----本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---color:#01DFD7;position:absolute;top:20px;left:50px;">这里是divSecond</div><divid="divThird"style="width:400px;height:50px;background-color:#FFFF00;">这里是divThird</div></body></html><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="www3.org/1999/xhtml"><head><title>div定位测试3</title></head><body><divid="divFirst"style="width:400px;height:50px;background-color:#FF00FF;">这里是divFirst</div><divid="divSecond"style="width:400px;height:50px;background-color:#01DFD7;position:relative;top:20px;left:50px;">这里是divSecond</div><divid="divThird"style="width:400px;height:50px;background-color:#FFFF00;">这里是divThird</div></body></html>以上两示例代码中，唯一一处区别就是divSecond一个采用absolute定位，另一个采用relative定位。这就会导致很大的不同，见下图：divSecond采用absolute定位的效果divSecond采用absolute定位的效果divSecond采用absolute定位的效果divSecond采用relative定位的效果divSecond采用absolute定位的页面中，原来位于divSecond下的divThird上移将其的位置占据；而采用relative定位的页面中没有出现这样的情况。其次，确定被定位元素偏移的参照物。找准参照物，被定位元素的位置也...

1、当您付费下载文档后，您只拥有了使用权限，并不意味着购买了版权，文档只能用于自身使用，不得用于其他商业用途（如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利）。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供参考，付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等，请点击“举报”。