没有合适的资源?快使用搜索试试~ 我知道了~
DIVCSS布局:CSS浮动float属性详解.doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 74 浏览量
2022-05-13
12:24:24
上传
评论
收藏 224KB DOC 举报
温馨提示
试读
18页
DIVCSS布局:CSS浮动float属性详解.doc
资源推荐
资源详情
资源评论
DIV CSS 布局:CSS 浮动 oat 属性详解
在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用 Web 标准构建网页以后,
oat 浮动属性是布局中非常重要的属性,我们常常通过对 div 元素应用 oat 浮动来进行布局,不但对整
个版式进行规划,也可以对一些基本元素如导航等进行排列。
我们来看看 oat 属性基本释义:
该属性的值指出了对象是否及如何浮动。当该属性不等于 none 引起对象浮动时,对象将被视作块对象
(block-level),即 display 属性等于 block。也就是说,浮动对象的 display 特性将被忽略。
oat 属性的参数:
none:对象不浮动
left:对象浮在左边
right:对象浮在右边
下面我们通过一些测试来了解可能出现的一些情况,如果 oat 取值为 none 则不会发生任何浮动,块元
素独占一行,紧随其后的块元素将在新行中显示,如下图:
我们看下面的运行效果:
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"
content="text/html; charset=gb2312" /><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; border:1px solid
#000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px
solid #000; margin:10px; background:#999;} </style></head> <body> <div
id="content_a">52CSS.com 这是第一个 DIV</div> <div id="content_b">52CSS.com 这是第
二个 DIV</div> </body> </html>
GGGG[ 可先修改部分代码 再运行查看效果 ]
我们对 content_a 应用向左的浮动。而 content_b 不应用任何浮动。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"
content="text/html; charset=gb2312" /><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; oat:left; border:1px solid#000;
margin:10px; background:#ccc;} #content_b {width:200px;height:80px; border:1px solid
#000; margin:10px; background:#999;}</style> </head> <body>
<divid="content_a">52CSS.com 这是第一个 DIV 向左浮动</div>
<divid="content_b">52CSS.com 这是第二个 DIV 不应用浮动</div> </body></html>
GGGG[ 可先修改部分代码 再运行查看效果 ]
我们看在 IE6 中的效果:
我们看在 FF 中的效果:
在 IE 中,对 content_a 应用向左的浮动后,content_a 向左浮动,content_b 在水平方向仅跟着它的后
面。
在 FF 中,对 content_a 应用向左的浮动后,content_b 在水平方向容器不可见,只留下了文字。这是由
于未清除浮动所造成的现象,关于清除浮动,可以参考这里:http://www.52css.com/article.asp?
id=132 (overow:auto;)这就是 IE 与 FF 对此种情况的不同解决,我们在实际布局中,应该避免这样
的情况发生。
我们同时对这两个容器应用向左的浮动看看发生的现象。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"
content="text/html; charset=gb2312" /><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; oat:left; border:1px solid#000;
margin:10px; background:#ccc;} #content_b {width:200px;height:80px; oat:left;
border:1px solid #000; margin:10px;background:#999;} </style> </head> <body>
<divid="content_a">52CSS.com 这是第一个 DIV 向左浮动</div>
<divid="content_b">52CSS.com 这是第二个 DIV 向左浮动</div> </body></html>
GGGG[ 可先修改部分代码 再运行查看效果 ]
在 IE 中的效果如图:
在 FF 中的效果如图:
在 IE 与 FF 中,他们的效果基本取得了一致。在布局中,我们可应用这类 IE 与 FF 兼容的方法。
我们对 content_b 应用向左的浮动。而 content_a 不应用任何浮动。看看是何效果:
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"
content="text/html; charset=gb2312" /><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; border:1px solid
#000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;oat:left;
border:1px solid #000; margin:10px; background:#999;}</style> </head> <body>
<divid="content_a">52CSS.com 这是第一个 DIV 不应用浮动</div>
<divid="content_b">52CSS.com 这是第二个 DIV 向左浮动</div> </body></html>
GGGG[ 可先修改部分代码 再运行查看效果 ]
在 IE 中的效果如图:
剩余17页未读,继续阅读
资源评论
智慧安全方案
- 粉丝: 3605
- 资源: 59万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功