彻底弄懂CSS盒子模式之三(浮动的表演和清除的自述)(2)
作者:唐国辉 来源:蓝色经典 发布时间:2007-05-11 16:52:00
标签:float,clear
7.下面这个例子很重要,可以说明浮动元素的很多特性,大家运行代码框后再手动调整浏览器窗口大小,看版面有什么变化,下面我给你解释常见的问题和技巧。
(1)在一个盒子内的浮动对像左右浮动时,它的左右边界不一定就会靠在父对象的内补白上或边框上,上面9个盒子都是左浮动的,但在窗口最大化的情况下,只有第一个盒子和最后一个盒子的左边界靠在父盒子左边内侧。
(2)浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况,那么一个浮动盒子又会不会越到另一个浮动对象上面去呢,实质上它们是不会重叠的,即使用了负边界看起来像重叠在一起。
(3)并排的同一浮动方向的对像在一行中放不下时,可以自动换行。大家在浏览下面代码时,改变一下浏览器窗口,就会看到我所说的情况。
(4)浮动盒子在本文流中出现的位置会影响它的水平浮动位置,就像下面运行框效果,那些盒子并不是紧跟着一起出现的,之间有文本存在,所以结果造成所有等高的盒子并不是同一直线排列出现,而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时,紧接着的同一浮动方向的对象将会被自动换行显示。在下面实例中,如果调整浏览器窗口尽量小时,所有盒子可能会出现全部靠在父盒子左边的情况,因为缩小浏览器同时,盒子右边的文本流高度随之增高。
可见不要小看我浮动,熟练掌握我将会给你排版带来很多意想不到效果哦。
8.再讲一则注意事项,在开始时我不是有说过要给浮动对象设定一个宽度的,不然会有意想不到结果,即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。请大家自行修改下面代码我注释前边的宽(只能删其中一个),测试看看效果就知道怎么回事了。
0
投稿
猜你喜欢
- 你已经在上面取出w打头记录的例子中看到了LIKE的用法。LIKE判定词是一个非常有用的符号。不过,在很多情况下用了它可能会带给你太多的数据,
- 支持CSS属性Safari和WebKit实施大子的CSS 2.1规格所界定的万维网联盟( W3C ) ,以及部分的CSS 3规格。 。这个C
- 上一篇介绍了 HTML5 中 Canvas 的路径,这篇将要介绍一下 Canvas&nbs
- 现在网页的设计都讲究整体统一风格,无论是网页的文字、图像,还是浏览器的滚动条都要求颜色和风
- 1、为什么淘宝的手机频道页面,竟然会有笔记本、数码相机、随身听,甚至是游戏之类的栏目,而且还有一个“数码·生活”栏目是包括以上这些设备的综合
- 发一个数字拼图游戏,有点小疑问前几天写得,其中一段代码还要感谢“簡簡單單愛妳”的提示,不过我还是不太明白, ,有点笨。 $(&qu
- 啥都不说了,直接奉献原代码 代码如下:'==========注意==================================
- 上个周末去书店时碰巧看到了AS3 CookeBook,我记得在apollo的alpha版快出来的时候,7yue就推荐过这个小册子,只不过我已
- 新闻系统、blog系统等都可能用到将动态页面生成静态页面的技巧来提高页面的访问速度,从而减轻服务器的压力,本文为大家搜集整理了ASP编程中常
- WEB程序员的技能要求: Web程序员不光要对 后端程序(如 php,jsp,asp.net)语言知识,对程序设计架构知识,数据库
- 让ASP搭配MYSQL所需要工具mysql-4.1.11-win32 myodbc-3.51.11-1-dll myodbc-3.51.11
- 如何实现在下拉菜单里输入文字? 用这个代码试试看,应该可以的:<script>function pp(){se.opt
- 在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。关键在于keyup
- aspjpeg版本:v1.801 将pic.jpg打上logo.png,可根据图片大小对水印图做适当调整 &
- FSO,正如UFO般令人激动、令人神往,当然更多的亦是让人欢喜让人忧。君不见某空间服务商广告:100MB空间只要60RMB/年,支持数据库,
- Yoho, 大家好,又是我哟~ 首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续
- 很多年前,我们就可以轻易的从很多国营商场、火车车厢、饭馆旅馆中看到墙上挂的那个小本本-意见薄,作为经营方与顾客沟通的
- 问题:在安装SP4补丁的时候,老是报验证密码错误。上网查了一下资料,发现是一个小bug。按照一下操作,安装正常。SQL Server补丁安装
- 在 Web 2.0 时代,开发人员和用户都对基于 Web 的应用程序的可用性和响应性抱有很高的期望。除非是在过去的两年内一直没有关注过这个领
- asp程序运行速度试验实验:1。作相同的分支条件判断:IF 比 SELECT慢。用以下程序测试: