xm2by的博客

多个按钮切换时处于选中状态按钮的边框出现重叠问题的解决方法element和ant-design中对于这种多按钮切换时边框重叠问题的解决方法相同，具体如下：在这里插入代码片...

svg中如何让文本溢出时显示省略号最近在使用d3.js实现一个树状组织结构图，遇到如下图所示的问题，要求是文本内容固宽，溢出内容应用省略号代替，如果是使用普通html标签实现的话，是比较简单的，overflow: hidden; text-overflow: ellipsis; white-space: nowrap;即可，但是在使用svg标签进行作图时，将这些css属性应用到<text&...

vue项目中引入特殊字体

修改表单元素的placeholder样式在使用表单元素时，浏览器会自动为表单元素的placeholder设置样式，该样式不一定会满足我们需求，当需要改变placeholder时，可以使用以下选择器进行操作：// chrome浏览器::-webkit-input-placeholder{ // 自定义样式}// IE浏览器，支持IE10以上（含IE10）:-ms-input-pl...

圣杯布局和双飞翼布局圣杯布局和双飞翼布局均是上中下结构，其中，中间部分又分为左中右三部分，左右两侧宽度固定，中间部分宽度自适应；上中下的结构比较简单，使用三个div就可以实现，中间部分的左右两侧内容宽度固定，中间内容宽度自适应，实现起来就比较有技巧性，具体如下：1、圣杯布局：圣杯布局的html结构：<div class="container"> <div clas...

伪类和伪元素的区别伪类是配合常规css选择器来使用的，用来获取元素，通常有一个:；伪元素会在页面中产生容器，用于显示内容或某种效果，它不会出现在DOM中，即不能通过js来操作，仅仅为css层面的渲染注入，通常有两个::；常见的伪类有：:hover、:focus、:link、:active、:visited、:first-child、：nth-child()等；常见伪元素有：::before、...

怪异的display: table-cell使用display：table-cell属性可以很方便的实现其内部元素的水平垂直居中，但在使用的时候会出现以下一些怪异的现象。设置的样式为啥不是我想要的结果demo1：图中div1、div2都设置了display：table-cell属性，具体样式如下：.div1{ box-sizing: border-box; disp...

图片渐进式加载渐进式加载是指图片在加载过程中由模糊到清晰的一个加载过程，需要两张图片实现，一张体积比较小，一张为原图，体积比较小的图片会先加载成功，然后对其进行模糊化处理，直到原图加载成功后，用原图替代体积较小的图。css filter模糊处理：html&lt;div class="placeholder" data-large="https://pic2.zhimg.com/5...

js原生日历参考文献：[1] js实现日历的简单算法 [2] 创建一个js日历（原生JS实现日历）

知乎页面布局知乎页面布局简洁明了，整体居中显示，采用上下结构，上面为顶部，提供导航、搜索、用户功能，下面为页面内容，内容左右分布，左边为主内容，主要是知乎上一些文章的摘要，右边为侧边栏，为用户提供一些服务选项和版权信息；卡片化是知乎页面上的一个特色，几乎所有的内容都是通过放在卡片中呈现给用户。看看知乎首页布局：知乎采用了flex布局，flex布局的特点是写更少的代码，让布局更简单（...

CSS布局那些事儿

自定义文件上传按钮样式&amp;amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot;&amp;amp;amp;gt;的默认样式是这个样子的：Chrome浏览器： IE浏览器： 用一个字来概括，那就是“丑”。  虽然一直都觉得&amp;amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot;&am

display: inline-block&amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;item&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;div class=