Day: May 16, 2015

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

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价 值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。 与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱 脱的一个td标签元素了。 二、display:table-cell与大小不固定元素的垂直居中 使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了,关于此应用,我已经在“大小不固定的图片、多行文字的水平垂直居中”这篇文章中有过介绍。 方便阅读,这里再次展示下代码: /*这里的大小是根据高宽上限128像素图片设置的*/ div{display:table-cell; width:1em; height:1em; border:1px solid… Read More

大小不固定的图片和多行文字的垂直水平居中

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简 单,上手容易,兼容性强,出错率低的方法。inline-block裸标签对齐法,以及透明图片拉伸对齐法。 css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。 一、大小不固定,多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:height:3em; line-height:3em; …… 显示结果如下图: 单行文本垂直居中对齐-鑫空间-鑫生活 ② 多行文字 如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?… Read More

在JavaScript里嵌入大量字符串常量的方法

在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里。数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如: var html = '<div>' + '<p>Hello</p>' + '<p>World'</p>' + '</div>'; 这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱。 其实有个不怎么起眼的小技巧,就能解决这个问题。大家总认为字符串必须在”…”或’…’里面,这点没错。但还有一个地方的字符串也能当 非代码语义保存下来,那就是一个function的toString,把整个函数的代码当字符串输出——其中的注释部分当然也是保留的! 所以我们写个空函数,里面就一个/**/注释,其中就是我们想要的常量内容。toString后加一个正则就可以提取我们想要的! 马上试试: var RES_CODE… Read More

【漫画详解】用iframe障眼法,骗取用户点击

做过Web开发的朋友曾经都有过这么个念头:在自己的页面里内嵌一个其他网站的网页,然后可以用脚本去获取他们页面里的信息,甚至可以。。。 显然,有这么好的事也肯定轮不到你来尝了:)一个叫沙箱模型的东西被发明出来,就是防止有这种想法的人搞破坏。。。所以现在的我们只能远观,不可亵玩也。   不过,这些规定只是针对脚本而已。假如让用户自己乖乖的去点,那当然是没问题的。但有多少人会去点呢!! 所以,我们需要施一些特殊的障眼法,让用户在不经意间,就点了我们想让他点的东西:) 就拿上面那个来说吧,如果直接把这个大页面赤果果的硬塞进网页,无论你怎么提示他点,或者说多少好话,大家见了就烦,就是不点:)   所以说,我们必须得修饰修饰,不然人家见了就吓跑了。首先也是最关键的就是这身材问题,突然冒出个这么肥硕的一个页面,看的人眼花缭乱,不知道 发送什么情况啦。我们要好好修剪一下,把没用的部分统统去掉,只留下我们想要的“精华”。这个简单,只要把框架先放到一个层里面,然后把层的尺寸固定好, 最后调整下框架的偏移位置,朝左上方移,正好让“加关注”完全显示在层里面。(用css的clip属性就更简单了,不过有些浏览器不支持)   这样一来,庞大的微博页面,只露出我们希望用户点的那个“按钮”了。但这几个字还是会让用户知道我们的意图,所以必须去掉。要修改iframe 的内容当然是不可能的,但上面放些文字或图片,那框架就被覆盖,收不到事件了。不过别急,我们仅仅是要让用户看不到“加关注”这几个字而已,并不一定要真 正的去掉。所以,我们只需给iframe设置一个很小很小的透明度,让他“看不见却摸得着”。 最后,就差粉饰粉饰了。我们给div设置一个背景图片,里面画着“关闭广告”,或者“不再提示”之类的,让用户觉得点了有意义的按钮。 若是嫌这个按钮太小,没有吸引用户去点的魅力,那么不难。我们只需用zoom(或transform: scale)属性放大一下iframe就行了,根据放大的比例,调整下裁剪的区域,OK。  … Read More