文章关键字 ‘float’

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

2017年09月19日,星期二

iPhone X造型上有个显著的特质,就是有个明显的刘海。

然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

阅读全文…

准确理解CSS clear:left/right的含义及实际用途

2014年06月9日,星期一

我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。

有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…

阅读全文…

CSS 相对/绝对(relative/absolute)定位系列(四)

2011年08月6日,星期六


本文是相对定位/绝对定位系列之四——relative相对定位篇。前面部分比较随性,以讲故事的形式介绍relative相对定位的一些属性特点。后面为本文重点,讲述的是relative相对定位的最小化影响原则。有demo,有实例,有截图以及必要的源代码展示。总之,希望本文的内容对您的学习有所帮助。

阅读全文…

CSS 相对/绝对(relative/absolute)定位系列(三)

2011年03月20日,星期日


本文是CSS 相对/绝对(relative/absolute)定位系列的第三篇,主要内容是absolute绝对定位的可用性隐藏,absolute绝对定位与等高布局,以及absolute相关的一些有趣的兼容性问题探讨。本文断断续续写了一个星期,所以行文上可能没有一气呵成之感;本周遇到些不顺心的事情,所以言语上也不如之前文章活波。但是,内容上并没有偷工减料,该有的截图还是有的,该有的demo还是有的,必要的代码展示也是有的。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

拜拜了,浮动布局-基于display:inline-block的列表布局

2010年11月3日,星期三


对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。

阅读全文…

我所知道的几种display:table-cell的应用

2010年10月28日,星期四

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。

本文就将介绍使用display:table-cell属性让大小不固定元素垂直对齐,两栏自适应布局,多栏等高布局,以及不太擅长的列表布局等。提供必要的截图以及demo实例页面展示,和一些简单的源代码展示。时间仓促,文字可能略显粗糙,总之,希望能对您的学习有所帮助。

阅读全文…

页面重构“鑫三无准则” 之“无宽度”准则

2010年10月11日,星期一


为了使CSS布局模块化以及增强可扩展性,我曾自己总结了一套约束自己的CSS准则,我自己称之为“鑫三无准则”,即“无宽度”、“无图片”和“无浮动”,这些都是在页面重构中尽量避免的东西。而本文就是要最其中的“无宽度”准则进行一些探讨。
因为纯粹个人的东西,所以可能没有什么适用性,单也可能会对您的学习有所启发,所以这里还是简单分享了。对于一篇观点论述性的文章,一定要大量的图片、数据域实例支持,另外还有必要的帮助理解的demo页面,本文没有多少复杂的代码,所以源代码展示比较少。总之,希望能对您的学习有所帮助。

阅读全文…

:after伪类+content内容生成经典应用举例

2010年09月28日,星期二


content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。
本文就将讲述:after伪类+content内容生成在web页面重构上非常实际的两个应用,一是清除浮动的影响,二是大小不固定图片的垂直居中效果。提供代码展示盒截图,提供demo效果页面,希望能对您的学习有所帮助。

阅读全文…

去除冗余 – 精简您的CSS样式代码

2010年02月5日,星期五

我基本上可以在国内任意的网站上找到冗余的CSS代码,可见CSS代码的冗余是非常普遍的,本文就列举了一些常见的使用无效CSS代码的情况,您可以对照分析看看您的代码是否也存在类似情况。
提供详尽的插图,提供相应的demo,希望能对您有所帮助。

阅读全文…

对overflow与zoom”清除浮动”的一些认识

2010年01月31日,星期日

本文首先以YY的方式将“清除浮动”这个概念用“清除浮动造成的影响”这个更准确的方式表述,然后列举一些具有包裹性的CSS属性,再通过实例证明这些具有包裹性的元素都具有抑制浮动副作用的作用,来证明使用“包裹性”这个概念可以解释为何有些元素可以消除浮动使父标签高度塌陷的问题。最后解释了为何不使用haslayout来解释清除浮动造成的影响。
观点新颖,相信会对您有所启发的。

阅读全文…