我是浮动的小盒子！！！

blanky01

浏览: 7016 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html+css

生活 CSS 设计模式 XHTML HTML

1.最好给浮动对象设置一下宽度，不然会出现一些意想不到的麻烦.

2.有一个父盒子，它里面有个子盒子，这个子盒子比父盒子的宽度大，这时候如果子盒子浮动，那么在ie6、ie7、ff中的解释如下：

ie6：把父盒子搞大！！才不管它有没有浮动！！只要是盒子就搞！！

ie7：不就是没我宽嘛，我跳出去不就得了，当然我得在你的上一层，还有你后面的那些文字，都得乖乖的在

我脚下。不过我小盒子也不霸道，我肯定按照您的文本流乖乖排列，另外不管我怎么浮动，我的左边还

是得靠着你的左边阿！注意，父盒子大人，可千万别往body右边浮动，不然我就得损失一部分内容，

跑到body外面去了！！

ff：在火狐里我照样跳出去，不过您外面的文本我是不敢冒犯阿，还是在它下面吧。我还是比较听话的，我往

那个方向浮动，就靠着您的哪个边。比如：我往右浮动，我的右边就靠着您的右边，我往左浮动我的左边

就靠着您的左边！您要是跑到body的右边，那我也逃不掉在ie7种的命运啊！

作者：对于父盒子浮动到body右边的问题，如果把body的宽度设置的小一点，小盒子被隐藏的一部分就会

出现了，你发现什么问题了吗？对！body也是盒子，它也是小盒子外面的一个父盒子，小盒子在ie7

和ff中是照跳不误阿！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title> <style type="text/css">  </style> </head> <body> <div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开，同时我设置了一定的左边界，目的是方便看到子盒子越出去的情况 <div id="box2">我是子盒子，我的宽比父级要大，同时我的浮动是folat:right,所以右边靠在父级盒子的右边，而宽于父盒子的部分在大盒子左边越出。</div> </div> <p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> </body> </html>

分享到：

css优先级别（转）

2009-02-11 13:29
浏览 892
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论