彻底弄懂CSS盒子模式之三

来源:蓝色理想时间:07-04-03 点击: 点击这里收藏本文

5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的，请用标准浏览器FF看下面代码效果：

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

6．如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：<div style="clear:both"></div>清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果，现在是没有自适应的情况，请用标准浏览器FF预览和测试代码效果：

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

7.下面这个例子很重要，可以说明浮动元素的很多特性，大家运行代码框后再手动调整浏览器窗口大小，看版面有什么变化，下面我给你解释常见的问题和技巧。

<!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 class="box"></div> 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， <div class="box"></div> CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料； <div class="box"></div> 边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， <div class="box"></div> 现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 <div class="box"></div> 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， <div class="box"></div> CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料； <div class="box"></div> 边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， <div class="box"></div> 现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 <div class="box"></div> <div style="clear:both"></div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（1）在一个盒子内的浮动对像左右浮动时，它的左右边界不一定就会靠在父对象的内补白上或边框上，上面9个盒子都是左浮动的，但在窗口最大化的情况下，只有第一个盒子和最后一个盒子的左边界靠在父盒子左边内侧。
（2）浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况，那么一个浮动盒子又会不会越到另一个浮动对象上面去呢，实质上它们是不会重叠的，即使用了负边界看起来像重叠在一起。
（3）并排的同一浮动方向的对像在一行中放不下时，可以自动换行。大家在浏览下面代码时，改变一下浏览器窗口，就会看到我所说的情况。
（4）浮动盒子在本文流中出现的位置会影响它的水平浮动位置，就像下面运行框效果，那些盒子并不是紧跟着一起出现的，之间有文本存在，所以结果造成所有等高的盒子并不是同一直线排列出现，而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时，紧接着的同一浮动方向的对象将会被自动换行显示。在下面实例中，如果调整浏览器窗口尽量小时，所有盒子可能会出现全部靠在父盒子左边的情况，因为缩小浏览器同时，盒子右边的文本流高度随之增高。

可见不要小看我浮动，熟练掌握我将会给你排版带来很多意想不到效果哦。

9 7 3 1 2 3 4 8 :

把此文章收藏到：　　　　　

相关教程

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册