![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端CSS
文章平均质量分 83
李小逗逗
生命不息,进步不止
展开
-
三栏布局的几种实现方式
1、float实现三栏布局给左盒子设置float:left,给右盒子设置float:right,中间盒子设置margin-left和margin-right。需要注意的是,左右盒子要放在中间盒子之前。代码如下:2、absolute实现三栏布局给左右盒子设置position:absolute,给左盒子设置left:0;top:0,给右盒子设置right:0;top:0;给中间盒子设置margin-left和margin-right。代码如下:3、flex实现三栏布局给父元素设置display原创 2022-06-13 13:49:35 · 946 阅读 · 0 评论 -
前端实现超出文字显示展开收起的功能
交互难点:位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时,不显示“展开收起”按钮说实话,之前单独看这个布局,即使借助 JavaScript 也不是一件容易的事啊(需要计算文字宽度动态截取文本,vue-clamp就是这么做的),更别说下面的交互和判断逻辑了,不过经过我的一番琢磨,其实纯 CSS 也能完美实现的,下面就一步一步来看看如何实现吧~文本样式1.多行文本截断<div class="text"> 浮动元素是如..原创 2022-01-06 11:35:29 · 6955 阅读 · 12 评论 -
JavaScript常见的工具函数汇总,正则、数组操作、本地存储、转码、节流防抖等等
工作中常用的工具函数,提高工作效率https://juejin.cn/post/6844904181761835016转载 2020-12-12 09:53:21 · 117 阅读 · 0 评论 -
前端使用mathJax.js展示数学公式无法自动换行的问题
前言:最近使用的一款插件math.js按照正常格式展示各种公式,途中遇到不能自动换行的困扰,一步步排查得知标签class名为mjx-chtml的设置强制不换行white-space: nowrap,那么只需要在你所引用的CSS文件中加一行样式即可话不多说,上代码全局引用并设置mathJaxmessageStyle是公式转化的进度,会显示的页面左下角,用户体验不是很好,SO,我隐藏掉...原创 2020-03-12 16:51:51 · 2277 阅读 · 3 评论 -
利用css实现元素的上下左右居中
前言:关于text-align:center和文字通过height与line-height实现的方式就不再赘述1.未知元素宽高方法一:代码实例:html==><div class="table"><div class="father"><div class="son">子元素居中子元素居中子元...原创 2019-03-06 18:03:43 · 1421 阅读 · 1 评论 -
css三大预处理器(Sass、Less和Stylus)一目了然
1.首先,什么是预处理器呢?A:CSS(Cascading Style Sheet-级联样式表) 预处理器是一种用来为 CSS 增加一些编程特性的语言,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、函数、简单的程序逻辑等一些编程语言中的基本技巧,使得CSS 更为简洁,适应性更强,代码更直观等诸多好处。2.三种css预处理器的对比对比 Less Sass ...原创 2019-03-07 15:35:07 · 2288 阅读 · 0 评论