css
代码
技巧
片段
超实用,喜欢就收藏!
前言生活需要总结,需要不断地发现自己的缺陷然后找到好的方法,改之。古人说好记性不如烂笔头,人终归是会遗忘一些事情的,哪怕它曾经深深地印在你的脑海,久久挥之不去,经过时间的洗涤,一切都会回到最初的那个时刻。
还记得你上次写的令自己引以为豪的css样式吗??,也许你记得,但模糊了不是???所以还是乖乖地拿起你的电脑,愉快地一点点敲下来,记录一遍吧!这篇文章会记录自己时常用到的css片段,使用这些css可以帮助我们解决许多实际问题。
1标题内容浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....
2垂直水平居中在css的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居中(各种方式各有优缺点,但都不能达到兼容性好,破坏力小的目标)。
以下是几种常见的实现方式
绝对定位方式且已知宽高
绝对定位 + 未知宽高 + translate
flex 轻松搞定水平垂直居中( 未知宽高)
当文本的内容超出容器的宽度的时候,我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。
宽度固定,适合单行显示...
宽度不固定,适合多行以及移动端显示
当我们希望给文本制造一种模糊效果感觉的时候,可以这样做
5动画实现简洁loading效果非常简洁的loading效果
6自定义文本选中样式默认情况下,我们在网页上选中文字的时候,会给选中的部分一个深蓝色背景颜色,如果我们想自己定制被选中的部分的样式呢?
7首字下沉要实现类似word中首字下沉的效果可以使用以下代码
8屏蔽Webkit移动浏览器中元素高亮效果在访问移动网站时,你会发现,在选中的元素周围会出现一些灰色的框框,使用以下代码屏蔽这种样式
精彩推荐你该知道滥用div的危害性!前端HTML面试题:测一测你的基础?100+套热门游戏特效源码听说转发文章
会给你带来好运