文章关键字 ‘absolute’

CSS3 transform对普通元素的N多渲染影响

2015年05月21日,星期四

一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0,0)),但是,实际上,对这些元素还是造成了写深远的影响。所谓表面无恙,内心奔溃的真实写照。

本文就列举几个目前我所知的transform影响CSS2.1中普通元素渲染表现的例子……一如既往,有Demo,有截图,有必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助~~

阅读全文…

Chrome absolute绝对定位display/visibility渲染bug

2015年01月10日,星期六

一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!

当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

实验:absolute/display隐藏与回流等性能

2013年01月17日,星期四

有个问题让我耿耿于怀3年,元素应用position:absolute脱离文档流这一过程会不会产生回流?OK,本文就将通过实验来解决这个困扰我多年的疑问。并通过其他一些测试,研究下各种隐藏方法的回流、布局、渲染等性能。
大量的demo页面以及截图展示,总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…

你到了第几层?图片式标题、按钮与隐藏文本

2012年03月9日,星期五

本文标题有故弄玄虚之嫌,说是“图片式标题、按钮与隐藏文本”,其实本意重点是介绍z-index负值以及在文本隐藏中的实际应用。外甥点灯笼——照旧,demo多多,截图多多(还有gif动画演示图哦),源代码展示等等,都有。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

您可能不知道的CSS元素隐藏“失效”以其妙用

2012年02月14日,星期二

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。然而,其中有些隐藏方法会出现“失效”的情况。而这些“失效”的情况往往会有一些和巧妙的应用。本文就是介绍这些“失效”情况并列举了其一些比较巧妙的应用。一如既往,demo页面,截图,必要的代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

absolute元素在text-align属性下的对齐显示

2011年12月27日,星期二

本文简单研究了下CSS中 text-align属性与position属性之间的关系。通过一些实例论述一些观点,并引申出一些实际的应用。截图很详尽,还有必要的demo以及源代码展示。其他就不多说了,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS相对定位|绝对定位(五)之z-index篇

2011年08月9日,星期二

本文是CSS相对定位绝对定位系列的最后一篇,简单讲讲z-index。主要内容是讲目前z-index滥用的一个情况。其次是讲了下自己避免z-index混乱使用而采用的分门别类下的1,2,3应用规则。本文没有demo,没有源代码展示,只有一些截图。内容相对前面几篇要少很多,但也精炼了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2011年08月6日,星期六


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

阅读全文…

小卖弄:开心网标签词观点交互的CSS实现

2011年06月10日,星期五

开心网转帖后面有一个标签式的短评观点交互效果,这种效果的精髓与QQ好友印象是很接近的。但是开心网的实现标签N多,层级也N复杂,且JS实现的交换,并使用了背景图片,缺点多多。本文的内容就是如何使用纯CSS实现类似的效果。本文提供必要的demo页面,页面截图和源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

IE下实现类似CSS3 text-shadow文字阴影的几种方法

2011年05月4日,星期三

IE9浏览器,甚至很可能IE10都不支持text-shadow文字阴影属性,但是人民群众的智慧是无穷无尽的,我们可以使用一些特殊的手段,或是方法实现类似于文字阴影的效果,而本文就将简单展示几种我所知的方法。

一如既往,丰富飞demo页面,相应的源代码展示,截图示例。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…