css 波动 了解Float的含意

日期:2021-03-13 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

面合理布局有两种方法
1)波动Float
2)精准定位Position

今日就来1个小小的的训练,让大伙儿了解Float的含意

【事例】
规定:
1)两个方块,1个鲜红色#900,1个蓝色#009;
2)鲜红色方块宽度和高宽比均为200像素,蓝色方块
宽度为300像素,高宽比为200像素;
3)鲜红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素;
网页页面实际效果以下:

源码: 事例2.rar

大伙儿应当留意到了,尽管鲜红色方块的宽度其实不是100%,可是蓝色仍未和鲜红色处在同1行,这便是块状元素较为“蛮横霸道”的1点,(即便块状元素的宽度并不是100%,它也不容许别的元素和他同在1行)以便清除这类“霸权”,让鲜红色和蓝色方块都处在1行,如图

 此时就必须拿出大家的利器Float!只必须在鲜红色方块的CSS里边再加“float:left;”,这时候候在IE6中能够看到蓝色方块确实跑到鲜红色方块的后边了,而且处在1行了,可是在FireFox中却变为了以下实际效果:

这时候候就必须留意了,FF中假如前面的地区波动了,后边的那个地区很有将会就会和前面的地区产生重合并移位。
如何才可以处理这个难题,处理这个访问器适配的难题,很非常容易,只必须在蓝色方块的CSS编码中也添加“Float:left;”,难题就处理了,再加试试,看看在FF中蓝色方块是否和鲜红色方块处在1行了~

到这里,大伙儿应当搞清楚Float的功效了吧,便是以便清除块状元素“霸权现实主义”的1把利器!在合理布局网页页面的情况下有时是必须清除块状元素霸权现实主义才可以合理布局好哟,例如KwooJan的blog正中间內容一部分,分成左侧(LEFT)和右侧(RIGHT),便是要用上面这个方式合理布局的哟,以下图


仔细的同学会留意到,在IE6中鲜红色方块间距访问器的左侧距其实不是CSS编码中界定的20像素,而是40像素,以下图:
 

实际上这是IE6的1个BUG,(IE6双倍边距BUG),要是考虑下面3个标准才会出現这个BUG:

1)要为块状元素;
2)要左边波动;
3)要有左外边距(margin-left);

处理这个BUG很非常容易,只必须在相应的块状元素的CSS树形中添加“display:inline;”,编码以下:

拷贝编码
编码以下:

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

如今再看看,是否IE6和FF显示信息1样了呢~

呵呵,这节课也较为非常容易吧,假如大伙儿有不搞清楚的能够留言,我会做进1步解释。
下节课,大家讲讲“波动消除(Clear)”难题!

最后编码: 最后编码.rar (587 Bytes)
精简后的编码CSS载入更快,大伙儿1看就搞清楚了^_^