有个问题让我耿耿于怀3年,元素应用position:absolute脱离文档流这一过程会不会产生回流?OK,本文就将通过实验来解决这个困扰我多年的疑问。并通过其他一些测试,研究下各种隐藏方法的回流、布局、渲染等性能。
大量的demo页面以及截图展示,总之,希望本文的内容能够对您的学习有所帮助!
“CSS相关”目录存档
实验:absolute/display隐藏与回流等性能
2013年01月17日,星期四小tip: 某简单的字符重叠与图形生成
2012年12月26日,星期三本文比较短,摘要我也懒得写了,就是一个自己觉得不错的方法,跟大家分享下,有demo有截图有源代码示意,希望能对您的学习有所帮助。
残忍:IE10↘IE7-IE9 type=email的完全抛弃
2012年12月13日,星期四有个顽童名叫IE, 其9岁的时候,不举;10岁的时候,可以举。这位叫做IE的顽童,跟纲手婆婆一样,可以向下控制年龄显示,7岁到9岁都可以。但是,为了不让人看穿其真实年龄,当其7~9岁模样的时候,需要不举。不过,身体是同一副,诱人妹子在眼前,不是说不举就不举的……
……
直接把小弟弟咔嚓了,这样,不就举不起来了嘛!!哈哈,我好聪明!!
小tip:FireFox下文本框/域百分比padding bug解决
2012年11月13日,星期二我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……
CSS3背景图片透明叠加属性cross-fade简介
2012年09月29日,星期六据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。
毕竟有IE滤镜这厮,所以前者看上去可能不那么显生;那后者Cross-fade是?
视区相关单位vw, vh..简介以及可实际应用场景
2012年09月24日,星期一好吧,CSS3 3D transform变换,不过如此!
2012年09月7日,星期五
CSS3 3D transform变换对于没有接触过的人而言可能会是件很头疼的事情。首先涉及到N多CSS方法以及CSS函数,如何理解他们头疼;其次,3D效果的实现,需要一定的空间想象能力,但是,不少人的脑袋是会想妹子想男人,怎么办?再者,3D效果的实现还离不开各种角度方位的数学计算,要是勾起了某些人学生时代的数学梦魇,又可如何是好!
相当不少人有这样的境遇,加上自己最近也在学习CSS3 3D transform变换的相关东西。好吧,整理一下,用通俗易懂的方式表达下我对CSS3 3D transform变换的一些理解;分享知识同时,自己也整理和提高了。一举两得,何乐不为。
本文是难得的长篇,很多精心挑选制作的配图,N多帮助理解制作用心的的demo页面,还有必要的源代码展示等。希望本文的内容可以让您学习CSS3 3D transform变换的相关知识更加的轻松!
有趣:256个class选择器可以干掉1个id选择器
2012年08月20日,星期一我突然想起了在微博上看到的一个视频:日本蜜蜂团团围住并热死大黄蜂的那个视频,——虽然小蜜蜂战斗力就是个渣渣,但是,足够多的数量也会搞出一些有趣的现象——热死足以以一敌千的大黄蜂。
但是,在CSS的世界里,居然有类似的“以数量取胜”有趣现象。比方说,这里要展示的:256个级联class选择器 击败 1个id选择器的有趣故事……
小tip: 使用CSS将图片转换成黑白(灰色、置灰)
2012年08月19日,星期日可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;
),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。
本文就将介绍如何是有CSS3的一些新方法实现图片的黑白效果。另外,最后还介绍下一款可以实现各个浏览器下图片黑白的小JS插件。有截图,有demo,有代码示意,希望本文的内容能够对您的学习有所帮助。
说说CSS学习中的瓶颈
2012年07月26日,星期四本文内容如题。根据自己的经历,思考以及体会,探讨了CSS学习中的瓶颈,以及如何克服等。有配图示意,有简单的源代码展示,还有对您有所启示的demo页面。总之,希望本文的内容对您的学习有所帮助。