彻底弄懂CSS盒子模式之三

[ 来源：不详 | 作者：webflash | 时间：2007-9-11 下午 10:47:51 | 浏览：统计中... ]

．如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：<div style="clear:both"></div>清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果，现在是没有自适应的情况，请用标准浏览器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"><!--* {margin:0px; padding:0px;}body {margin:5px; font-size:12px;}.box {background-color: #66CCFF;width: 200px;border: 1px solid #66CCCC;}.box2 {background-color: #33CC99;margin-right:20px; width: 100px; border: 1px solid #336666;float:left;/*删掉这浮动也可以让父级高度自适应*/}--></style></head><body><div class="box">我是父盒子,我的高没有设定,但是我的子盒子高过我时,在标准浏览器中我的高不能自适应。  <div class="box2">这个盒子是小盒子，它没有设定高度属性，其高度是随里面的文字的加多而自动升高的，但是当它的高度超过父级盒子时，在标准浏览器中并没有把父级撑高，这种情况与上面讲的子级宽度超过父级元素是一样的，但是这种高度自适度常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内加入以下样式：<div style="clear:both"></div>清除掉与其同级小盒子的浮动。  </div><!--<div style="clear:both"></div>去除这里的注释再看看，这样父级盒子的高级就可以自适应了--></div></body></html>

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

经典论坛讨论：
http://bbs.blueidea.com/thread-2732609-1-1.html

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）浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况，那么一个浮动盒子又会不会越到另一个浮动对象上面去呢，实质上它们是

上一页 [1] [2] [3] [4] [5] 下一页

上一篇：彻底弄懂CSS盒子模式之四

下一篇：详解css定位与定位应用

>> 相关文章

	评论内容只代表网友观点，与本站立场无关！查看完整内容
	我来评两句用户名称评分验证码最多500字。当前字数：0