常用CSS技巧

文字超出换行应该是大家项目中高频的css样式了，它也是非常容易出现样式bug的一个地方。 分享一下我工作中遇到的问题。前几天开发代码的时候，突然收到两个测试提的bug：

背景简介 大家好，我是石小石！最近开发中遇到这样一个需求： hover改变样式，边框由原来的1px变成2px。这太easy了！ 但实际做完后，我们会发现一个问题，样式不够丝滑

日常开发中，我们经常会遇到`hover文本`，显示其全部内容的需求。但是`原生的title属性`有两个很大的缺点

背景简介 在前端开发中，我们经常会遇到这样的一个需求：hover一个svg图片，svg展现不同状态的样式。 大家常见的写法就是引入两个颜色状态的svg，然后通过v-show控制显影 这样实现不是不可以

背景简介 这几天代码评审，领导无意中看到了我本地代码的控制台，被我花里胡哨的console打印内容吸引了！ 老板看见后，说我这东西有意思，花里胡哨的，他喜欢！

需求简介 这几天接了个新项目，需要实现下图中左侧边栏的菜单切换。这种功能其实就是一个折叠面板，实现方式多种多样。 实现上面的功能，无非就是一个v-show的事儿，但没有过渡，会显得非常生硬。想添加一些

需求背景 这几天开发项目，做了一个可滚动的表格，表格用的是公司的组件。正常情况下，一切滚动行为正常。 但，当我通过页面内的操作改变表格高度时，bug出现了！如图，可以清楚的发现，滚动条滚动异常了！有一

在前端开发中，我们经常遇见这样的开发需求，实现多行排布的卡片，这些卡片宽度一般是固定的， 并且在不同大小的屏幕宽度下自动换行。

在前端开发中，我们经常会遇到这样的布局：在一个容器中，排布有两个元素，A元素宽度固定，B元素宽度自适应，如下图： 我们的CSS也能随手捏来 上述代码中，我们使用flex: 1