CSS计算选中标签元素
这是一种社交平台的常见需求,比如说在掘金平台中让用户选择感兴趣的标签,通常都是用JS来处理已经选择了的标签数量。今天给出一个css版本:
首先将checkBox隐藏起来:
然后自定义label样式,接着设置CSS计算器。
效果图如下:
如有不会或者不懂没关系加大佬微信ssmp8858领取相关教程
多行文本溢出省略
文本溢出省略是很常见的业务需求,然而大多数都是处理单行文本:
这3个CSS语句的意思是:
那么处理多行文本又是怎么样的?这里提供一个CSS版本:
上面CSS语句的意思是:
- 设置元素为弹性伸缩盒子模型。
- 设置显示文本的行数。
- 设置伸缩盒子元素的子元素排列方式(以上三个要一起使用)
- 设置文本溢出时,用省略符号来代表被裁剪的文本。
效果如下:
但这种方法缺点也很明显,只适用在WebKit内核的浏览器。 增加CSS选择器优先级 在平常开发中,会有不少几率遇到需要增加CSS选择器优先级的场景。如何实现才会更好,比如说需要增强下面这个CSS选择器优先级:
这些都不是最好的方法,因为上述方法会增加了耦合导致可维护性的降低,如果后续父节点类名更改了,或者换成不同的标签,都会影响到样式效果。
最佳方法
- 重复选择器自身
借助存在的属性选择器
这样即提高了优先级,又不会增加耦合度。 全局调整盒模型 Box-sizing的默认值是content-Box,这意味着指定的宽高都只会设置内容盒子的大小。如果设置了内边距或者边框都会使该元素宽高大于指定的宽高值。最笨的办法就是减少width或height的值,这不是一个理想的办法,因为这是通过改值试出来的,而且往往难以解释这个值生成的原因。 设置Box-sizing值为border-Box,这样height和width属性会设置为内容、内边距以及边框的大小总和,这就解决了上述问题。
这样main元素就更好符合预期了,但其他元素还会遇到相同的事情。所以将其设置为全局
这样就能给页面上所有元素与伪元素都设置border-Box了。 但这样还是有些问题,现在很多业务都会使用带样式的第三方组件,就可能会因此破坏其中一些组件的布局,尤其是当第三方组件在开发css的过程中没有考虑到使用者会修改盒模型。 利用继承就能解决上述问题了:
盒模型通常不会被继承,但使用inherit关键字会强制继承。可以在必要时选中第三方组件的顶级容器,将其恢复为content-Box。这样组件的内部元素就会继承该盒模型:
hover伪类与延时实现下拉列表
然而上面的实现有一个小缺陷,如果按钮与菜单之间有空隙,鼠标还没移动到下拉框上时,下拉框就已经收起来了。借助transition增加延时效果就可以解决这个问题。
效果图如下:
使用视口单位定义字号
一般来说,构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸,修改元素的字号就能渲染出不同大小的面板,当然前提是使用相对单位em或者rem。比如说:
根据给页面根元素设置不同字号,响应式地重新定义了整个页面的em和rem。但这属于硬编码的形式,只能响应设定的屏幕尺寸。
我们知道视口单位vm与vh是相对屏幕来说的,如果将视口单位用于设置字号,那比设置宽度还要实用
设置上面属性会发生什么?当屏幕宽度为1440px时,字号就是28.8px了。在一个1920px的屏幕时,字号就变成了38.4px。这样做的好处就是元素能够在这两种大小之间平滑地过渡,不会在某个断点突然改变。 但还是有些问题, 常见的1920px屏幕中,38.4px的字号太大了。而在手机上比如iPhone6上就缩小到了7.5px,那就太小了。 使用CSS的calc函数结合em和vw两个单位就能解决问题:
0.5em保证了最小字号,1vw则确保了字体能随着视口缩放。能保证基础字号从iPhone6里的11.75px一直过渡到1200px屏幕的20px。 占位符交互 具体效果:输入框处于聚焦状态时,输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。
第二,使用.input-label元素代替浏览器原声的占位符
最后,在输入框聚焦以及占位符不显示的时候对
效果如下:
使用mix-blend-mode混合元素
使用mix-blend-mode属性,不仅可以混合图片,还可以把元素的文本和边框与容器的背景图片混合在一起。
为h1增加样式,最终效果为红色的纯背景通栏、亮灰色顶部和底部宽边框。然后应用融合混合模式,整个元素被视为一个图层,和下面的容器里的背景图片混合在一起。