摘要:
五、浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是浮动应该做的事情,我称之为“非本职工作”。或许我们并没有过多的深思,把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。举个常见的例子,列表显示,见下面的图,截自淘宝新版首页:我不看代码就知道是用浮动实现的,我用firebug一看,果然是,不仅浮动,而且定宽。ps:要是在几个月以前,我会觉得这实在有待改进,不过现在我的心态宽了,布局思想不同而已,没有孰对孰错之分。我可以确信,浮动这个属性诞生的那天压根没有想到自己会要做这样的事情,本来它以为自己就让文字环绕显示就OK了 阅读全文
摘要:
概念目录个人感悟之CSS代码的情感化思维个人观点之浮动的意义仅仅是文字环绕显示而已个人观点之浮动的本质是“包裹及破坏”个人观点之目前大多数浮动应用都不是浮动应该做的个人观点之浮动其实是个魔鬼、混球一、引言你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观。这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上。你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响)。这种看待代码的方式是我们在不断学习与工作的过程中积累出来的,是在潜意识层面逐渐积累起来的,一切悄然而至,不知不觉。当我们积累到一定阶 阅读全文
摘要:
在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。 我们来看看float属性基本释义: 该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。 float属性的参数: none:对象不浮动 left:对象浮在左边 right:对象浮在右边 ... 阅读全文
摘要:
CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs。 内容基本的浮动原理 浮动是如何进行的 浮动从何处开始 水平浮动堆叠 反向浮动 Clearing Floats 基本的浮动原理任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。任何申明为 float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和" 阅读全文
摘要:
float是什么? float是CSS控制中的定位属性。我们经常在传统印刷产品中看到图片被文本围绕,这种方式一般被称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。举例说明,我们在sidebar这个元素中设置了浮动属性: #sidebar { float: right; } fload 阅读全文