iPhoneX前端适配

这几年手机更新的速度越来越快,手机屏幕也是各式各样,就拿iphoneX来说,这种怪异的刘海屏,如果把普通的浏览器网页照搬到iPhoneX上,有些地方显示会出现一些问题。

好在IOS为其自己怪异的屏幕[……]

阅读全文

css多行隐藏

css3有一个-webkit-line-clamp属性能够实现多行隐藏,但是浏览器兼容性并不好,有没有一种兼容性特别好的css实现方式呢?

在网上,我看到别人提供了一种很好的解决思路,利用float[......]

阅读全文

css设置多行文本溢出显示省略号

控制文本显示行数用到了line-clamp这个属性,你可以戳这里查看line-clamp这个属性的兼容性。可以看到,这个属性在移动端上使用基本上是没有问题的,但是在pc端,就要考虑跨浏览器的问题了。[……]

阅读全文

粘连效果实现

举个例子,如果有两个水滴,当它们靠近的时候,会相互粘连在一起,最后形成一个水滴。那么,如果要实现一个这样的粘连效果,该如何做呢?

比如如下图片中的效果

此时,可以使用SVG中的filter来实[……]

阅读全文

sticky尝鲜

众所周知,css中的position代表的是定位的方式,它有relativeabsolutestaticfixed几个常见的属性。本文要说说它另外的一个属性sticky,所谓的粘性布局。

什么[……]

阅读全文

移动端点击背景变蓝?

在元素上添加cursor: pointer属性后,那么,在移动端上,手指点击该元素区域背景会变蓝。

如果想取消这个效果,可以去除cursor样式,也可以添加如下样式:

-webkit-tap-hi[......]

阅读全文

神奇的table-layout属性

html表格table中有一个很神奇的属性table-layout,当你不指定的时候,它采用的是默认的table-layout:auto方式显示。

为什么说这个属性奇怪呢?举几个栗子。

首先我设置[……]

阅读全文

表格行的文字自动换行

table设置table-layout:fixed,让表格固定宽度,让其自动适应外部宽度。

td设置word-wrap:break-word,文本过长自动换行。