div布局的一些特性

转载 2007年10月15日 10:40:00
div的布局还真有些不容易掌握,其规律还摸不透,先死记硬背一些现象再说吧.
div是一个块级元素,默认情况下,默认情况下将占满父级容 器的整行,同级的其他对象将在下一行显示。但是将某个div设置为float后,这个div本身会根据其中内容的需要而调整为内容需要的大小,其后的块级 对象将浮动在它旁边显示,运行下面的html代码就可以看到效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
 #menu {
    background-color:red;
   float:left;
   /*clear:both;*/
  }
 #content{
  background-color:green;

 }
 #submenu {
  /*background-color:blue;*/
 
 }
</style>
</head>
<body>
<div id="menu">
 <div id="submenu">菜单区</div>
</div>
<div id="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了。实验代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
 #menu {
          width:200px;
    background-color:red;
  
  }
 #content{
 background-color:green;
 /*clear:both;*/ 
 }
 #submenu {
  background-color:blue;
 float:right;
 }
</style>
</head>
<body>
<div id="menu">
 <div id="submenu">菜单区</div>
</div>
<div id="content">
 内容区

</div>
</body>
</html>

 

玩转CSS3(一)----CSS3实现页面布局

关于css3的布局方法的总结
  • u012116457
  • u012116457
  • 2014年06月06日 11:31
  • 1345

<div>手绘页面布局(上下左右中)

1、空白页面 我的文件夹 2、添加6个 div 标签 我的文件夹 1 2 3 4 5 6 3、将页面划分为五个部分:banner、left、center、rig...
  • teamlet
  • teamlet
  • 2014年12月30日 21:29
  • 7843

HTML5学习之七div布局和表格布局

div布局效果图如下: div布局代码: Title body{ margin: 0; }...
  • JCY1009015337
  • JCY1009015337
  • 2016年12月04日 16:41
  • 2380

DIV + CSS 实现最经典的布局

我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对...
  • u011340807
  • u011340807
  • 2014年02月14日 16:39
  • 2389

html -- div table布局 -- 加 布局简单例子

html --div table布局
  • yongaini10
  • yongaini10
  • 2016年09月02日 22:32
  • 4790

html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)

参考文章:http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d 参考文章:http://www.cnblogs.com/webmoon...
  • duyelang
  • duyelang
  • 2014年03月05日 17:48
  • 9726

html5 div布局与table布局

div布局:html+css实现简单布局。 #container中height不能写成百分数,必须为具体高度。 div布局 body{ ...
  • csdn9_14
  • csdn9_14
  • 2016年11月15日 21:36
  • 1016

css+ div 实现框架布局

  • zhanglinlang
  • zhanglinlang
  • 2017年01月18日 15:57
  • 2668

DIV 左右布局方案

DIV 左右布局方案
  • Silent_Paladin
  • Silent_Paladin
  • 2017年03月01日 20:59
  • 1527

利用div+css实现几种经典布局的详解,样式以及代码!

一、左右两侧,左侧固定宽度200px,右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; ...
  • kongkongyou
  • kongkongyou
  • 2017年01月15日 14:15
  • 1785
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div布局的一些特性
举报原因:
原因补充:

(最多只允许输入30个字)