文章关键字 ‘margin负值’

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

2015年05月21日,星期四

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

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

阅读全文…

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

2013年11月19日,星期二

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

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

阅读全文…

letter-spacing+first-letter实现按钮文字隐藏

2013年07月30日,星期二

图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论、微博转发等可见一斑),text-indent负值为最常用方法,然问题有三……

上周分享,有同行提到另外一个隐藏之法,简称为:font: 0/0 a法,然而也有不足……

我午饭后打瞌睡的时候想到了一个方法,一句话概括就是letter-spacing负值+first-letter伪元素负值实现……

阅读全文…

小tip:FireFox下文本框/域百分比padding bug解决

2012年11月13日,星期二

我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……

阅读全文…

说说CSS学习中的瓶颈

2012年07月26日,星期四

本文内容如题。根据自己的经历,思考以及体会,探讨了CSS学习中的瓶颈,以及如何克服等。有配图示意,有简单的源代码展示,还有对您有所启示的demo页面。总之,希望本文的内容对您的学习有所帮助。

阅读全文…

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

2012年05月21日,星期一

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

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

阅读全文…

去除inline-block元素间间距的N种方法

2012年04月24日,星期二

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2011年12月27日,星期二

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

阅读全文…

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

2011年05月4日,星期三

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

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

阅读全文…

css margin的相关属性,问题及应用

2009年08月25日,星期二

margin为css中非常常用的一个属性,其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述,包括其属性,使用过程中会遇到的问题,以及一些高级应用等。
其中属性将着重分享自己记margin各个参数个数位置含义的方法;
margin常见问题部分将讨论margin双倍边距形成的条件以及推荐的解决方法,讨论margin重叠的问题,简单叙述margin不起作用的一些情况;
margin负值的相关应用将讨论页面背景定位的问题,宽度自适应布局,选项卡中的应用,文字与图片对齐等问题。

阅读全文…