divcss布局:div布局入门学习来源: 发布时间:星期五, 2008年9月26日 浏览:142次 评论:0
为了提高网页的执行速度，大多数网站现在都开始用DIV+CSS来架构前台了，我们也要开始学习一下DIV只是了，要不就落伍了哦，呵呵，div的布局还真有些不容易掌握,其规律还摸不透,先死记硬背一些现象再说吧. 首发 www.
div是一个块级元素，默认情况下，默认情况下将占满父级容器的整行，同级的其他对象将在下一行显示。但是将某个div设置为float后，这个div本身会根据其中内容的需要而调整为内容需要的大小，其后的块级对象将浮动在它旁边显示，运行下面的html代码就可以看到效果。 <!DOCTYPEhtmlPUBLIC\"-//W3C//DTDXHTML1.0Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <htmlxmlns=\"http://www.w3.org/1999/xhtml\"xml:lang=\"en\"lang=\"en\"> <head> <styletype=\"text/css\"> #menu{ background-color:red; float:left; /*clear:both;*/ } #content{ background-color:green; } #submenu{ /*background-color:blue;*/ } </style> </head> <body> <divid=\"menu\"> <divid=\"submenu\">菜单区</div> </div> <divid=\"content\"> 内容区 </div> </body> </html> 为了让content区能够在下一样显示,在浮动的div中设置了clear:both属性,显示结果没有任何变化,再试着将clear:both属性加入到表示content的div中,content区就在下一行显示了.看来,对于已经设置了float特性的对象不能再设置clear特性了. 如果我不是设置menu区的float属性，而是设置menu区内部的div区的float属性，其结果与直接设置外部的menu区的效果完全一样，这就令我非常困惑了，按理说，如果我没设置外部的menu区的float属性，这个menu区自己应该占满一行，其内部的div区再按float属性漂浮在menu区内部，可现在却不是这样的！我接着明确设置了menu区的宽度，这时在ie下看到了我期望的效果，即menu区占据了规定的宽度，其内部的div区按float属性漂浮在了menu区内部，并且content区换行显示了，但是，在firefox下运行的效果却很怪，我就不想在继续追究下去了，这应该是firefox的bug了。实验代码如下： <!DOCTYPEhtmlPUBLIC\"-//W3C//DTDXHTML1.0Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <htmlxmlns=\"http://www.w3.org/1999/xhtml\"xml:lang=\"en\"lang=\"en\"> <head> <styletype=\"text/css\"> #menu{ width:200px; background-color:red; } #content{ background-color:green; /*clear:both;*/ } #submenu{ background-color:blue; float:right; } </style> </head> [Page] <body> <divid=\"menu\"> <divid=\"submenu\">菜单区</div> </div> <divid=\"content\"> 内容区 </div> </body> </html> 1，clear是清除浮动的元素，content没有浮动，所以对menu设定clear后，没有效果，你可以试试将content也浮动，看看会怎么样。 2，menu内的唯一的div浮动了，则对于menu来说，它内部没有不浮动的元素，则它不具有高度，因此下面的content层占据了menu的位置，而menu内浮动的div还是浮动的。 你可以为menu增加一些不浮动的文字（或者高度）来看看，会有什么效果。 这个不是ff的bug，用opera也会是这样的效果。 ie会为浮动的元素计算高度，两边解释方式不同。 0
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
