文章关键字 ‘绝对定位’

CSS fixed固定定位transofrm失效及居中小技巧

2023年02月6日,星期一

封面图

介绍个我认为最好的固定居中定位的CSS实现,以及展示transform内fixed固定定位失效的解决方法,你说不定哪天就会用到。

阅读全文…

使用grid-area等Grid布局属性轻松实现元素层叠效果

2021年02月12日,星期五

重叠grid元素布局

使用Grid布局让元素重叠应该是最佳技术实践了,比margin负值和absolute绝对定位使用更方便,可以使用grid-area和多个其他CSS属性实现,有兴趣可以进来一看究竟。

阅读全文…

CSS中height:100%和height:inherit的异同

2015年02月15日,星期日

不知大家有没有相关CSS中height:100%和height:inherit的有什么异同?是否可以替换使用?height:inherit的价值在哪里?

本文就将回答这一系列问题,同样的,有截图,有demo,还有必要的源代码展示,总之希望本文的内容对您的学习有所帮助。

阅读全文…

小tip: margin:auto实现绝对定位元素的水平垂直居中

2013年11月19日,星期二

如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了,或借助margin负值,或借助CSS3 transformtranslate属性;这里介绍另外一个方法,margin:auto方法……

外甥点灯笼——照旧(舅),有demo有截图有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: 微博新版查看大图前后浏览的另外一种实现

2013年05月17日,星期五

标题小tip打头嘛,说明内容不多。看标题主体嘛估计又是黑新浪的,介绍另外的实现,小东西,喜欢的人自然喜欢。文章前后都有些吐槽,看上去啪啪啪说得很利索,言辞犀利,一气呵成,实际上,是像便秘一样,一点一点挤出来的。文章嘛,又没时间限制的,可以修改斟酌啊什么的。但是对话面试什么的,容不得多想多斟酌,那怎么办呢?还能怎么办,认命,等死,平时多练练呗~~

阅读全文…

可缺省的CSS布局

2013年03月21日,星期四

要赶着回去买菜,直接copy一段文中的话做摘要了~~

你永远不知道产品经理需要什么东西,因此,在页面布局的时候,一定要有强烈的意识:要是产品经理看这里不爽,把这里这部分干掉怎么办?如果干掉了,我是不是只要张个嘴让后台那边把这部分HTML注释或删掉就可以呢!

如果真能做到这样,哪有那么多加班?哪有改动恐惧症?哪有各种不满的吐槽?你应该有更多的时间去学习其他新的或者深的东西,而不是被本可以什么都不要做的改动折腾掉N多的时间和精力。前者久而久之良性循环,疾驰与他人之前;后者原地循环,跑步机上死命奔跑。

一句话,后期维护很轻松。装饰性元素自然必须可缺省,而且一点都不能影响布局;而功能性元素,也应该有强烈的可缺省意识,这样,或组装,或添加,或删除的时候,我们只要响应的HTML拖移、粘贴或删除就可以了。而且,布局可缺省,本身的容错能力也是相当强的。以柔克刚,万变归宗……

阅读全文…

web上渐进使用jQuery Mobile中animate相关CSS

2012年11月2日,星期五


animate虽然是CSS3中随时比较高级的东西,看上去与实际的web项目不搭噶,但是,这里,我要告诉你,在实际web项目中也是可以渐进使用CSS3 animation相关动画的,而且,操作难度以及兼容性处理都是很低的哦!

本文以比较实用的jQuery Mobile框架中开源的animate相关CSS代码为实例,分别展示了其中各种animate效果在实际交互中的应用。大量demo,大量截图以及源代码示意。相信本文的内容会对您的学习有所帮助的!

阅读全文…

不同CSS布局实现与文字鼠标选择的可用性

2012年05月21日,星期一

我们平时因为A原因或B原因,需要复制web页面上的文字内容。常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了。
不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。
这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤陋寡闻,不知道这个标题啥意思,于是想百度之,最快的方式就是选择→复制→搜索。结果,像中了邪,这几个文字TMD就是选不准,老把旁边的“萝莉御姐”一起选中了;然后,这个标题又是链接,不能双击选……

本文重在抛砖引玉,希望对各个同行有所小小意识与启发。

阅读全文…

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

2011年12月27日,星期二

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

阅读全文…

小卖弄:字符上下半截的高亮显示

2011年08月17日,星期三

近日闲适,就随便折腾点东西。本文的内容就比较蛋疼,使用CSS让字符分别上下半截高亮显示。模拟淘宝网排序处的双向排序箭头效果。提供demo页面,必要的截图和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…