相关文章
如何增加流量
网页设计如何让12px以下的文字正常显示
企通互联JavaScript是怎样让互联网变慢的
北京网页设计初学者指南：DHTML中重要的属性方法
北京网页设计Photoshop三招两式做特效：钮扣
网站设计使用XHTML制作网页时注意的要点总结
北京网站制作简易代码描绘网页个性鼠标指针
北京网站建设网页制作时关于收藏夹的操作代码整理
企通互联HTML语言剖析（十）链接标记
网站设计商业和设计的交融——路还很长
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> www.qitongnet.com北京网站制作彻底弄懂CSS盒子模式之三
www.qitongnet.com北京网站制作彻底弄懂CSS盒子模式之三
一、下面请看float的精彩表演，有请。网站制作
大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。因为我的工作对网页设计人员很有用，就像之前align 企通互联帮助你们定位网页元素一样重要，但是我的功能似乎比align强多了。接下来我将现场给你演示我的绝活，看细心点哦。当然也许我一下子不能把我所有的技巧给大家演示，因为有些技巧本人也许一下子记不起来了，那就请那些对我比较了解的人来帮我补充补充啰，比如版主等等啊。 Chinaz_com
先讲一下我主要的工作，我主要是帮助对像在网页中对齐的，一旦我发出float:left或float:right命令，被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding） 、边界( margin ）或者另一个块对象的边缘为止，当然也有一些看起来较特殊的情况，比如被我浮动的元素设置了一个负边界（margin）的时候。我还可以让文字流环绕在被我浮动的对像周围,这也是我的特色。另外要注意的一点是，最好给浮动对象设置一下宽度，不然会出现一些意想不到的麻烦。我主要浮动类型有两种,它们是float:left和float:right,当然我还有一个功能是float:none,不过float:none比较少用，这也是我的默认值，有时也是很有用的，我等一下会讲的。下面我开始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在标准的舞台中,如FF中才能表出来做的,请注意看我的说明,不然你用IE是看不到效果的。 站.长.站
1.我不动声色（我的属性不设置的时候），即：float:none,或者样式中不写这一项时，网页中的元素将按照它们自身的出现方式排列，一般是靠边对齐，先出现的排在前边,下面运行框是DIV先出现，P后出现，所以P排在DIV后面，注意看DIV的右边还有很多空间，但是P的文字不会跟在它的右边去。看 Www_Chinaz_com
中国.站长站
<!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:10px; font-size:14px;}北京网页设计
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:none;/*此对象不浮动，此时对象不允许有文本流环绕*/}北京网站制作
-->网页设计
</style>企通互联
</head>
Www^Chinaz^com
<body>北京网站建设
<div id="box">我现在没有浮动</div>网页设计
<p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p>
中.国.站.长.站
网页设计</body>北京网站建设
</html> Chinaz_com
2.我向盒子发出float:left命令，此时盒子浮动到左边，虽然看起来我的位置与上面例子没有什么变化，但此时跟在我后面的文本可以环绕到浮动盒子的右边了，看下面：网站设计
<!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:10px; font-size:14px;}企通互联
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此对象左浮动，此时对象右边允许有文本流环绕*/}企通互联
-->北京网站制作
</style>企通互联
</head> [中国站长站]
<body>北京网站设计
<div id="box">我现在左浮动（float:left）</div>网站制作
<p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> 中国.站.长站 北京网站制作
</body>网站设计
</html> 中.国.站长站
中国站.长.站
3.我向盒子发出float:right命令，不难想象此时盒子浮动到右边，此时文本将会环绕到此盒子的左边，看下面 Www@Chinaz@com
<!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>北京网站建设 www.qitongnet.com
<style type="text/css">北京网站制作
<!--北京网站建设
* {margin:0px; padding:0px;}企通互联
body {margin:10px; font-size:14px;}北京网站建设
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:right;/*此对象右浮动，此时对象左边允许有文本流环绕*/}北京网页设计
-->北京网站设计
</style>北京网站建设
</head> 中.国.站长站
<body> 北京网页设计企通互联
<div id="box">我现在右浮动（float:right）</div>网站建设
<p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p>
</body>网站制作
</html> 中.国.站长站
哈哈，看我表演了几项是不是开始觉得有点烦了，那么简单无聊的，那下面就给你表演几项特别的，但愿你不是IE的崇拜者，因为下面效果你用IE是看不到效果的，请用像FF那样的标准浏览器来运行代码框或测试吧。 中国站.长.站
4．浮动对象有负边界的情况，这时浮动对象可能会漂浮到其所在父对象外边去，这有点像绝对定位的效果，但又与绝对定位不同，它还能影响它所在地方的文本流 站长.站
<!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:50px; font-size:12px;}网站制作
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; }网站设计
#box2 {background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}北京网站制作
-->网页设计
</style>北京网站设计
</head>
中国站长.站
<body>网页设计
<div id="box">北京网页设计
<div id="box2">margin-top:-15px</div> 北京网站制作网页设计
右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还可以吧，这可不是用相对、或者绝对定位做出来的哦，部分文字还是有环绕效果。如果在上面小盒子输标题，在这大盒子内部输内容，这种类型的网页版面效果还可以的，大家可以举一反三，多做出另外类似的效果来。</div>网站建设
</body>北京网站设计
</html> 中国.站长站
5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的
中国.站.长站
<!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:10px; font-size:12px;}北京网站制作
#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}北京网站设计
#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}网站制作
-->北京网站建设
</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>
Chinaz^com
网站建设</body>北京网站制作
</html> Chinaz~com
6．如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：<div style="clear:both"></div>清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果，现在是没有自适应的情况
中国站长.站
<!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>
Www~Chinaz~com
