css - 随笔分类 - 小方块的世界

前端页面串联卡片的一个思路

摘要：串联卡片的一个思路需求描述做一行固定宽度但是数量不固定的的卡片，卡片前后通过箭头链接，箭头要处在两个卡片中间位置。问题分析首先需要一个卡片的基础组件，然后遍历数据循环渲染组件即可，连接图片的箭头可以在每次渲染卡片之后再渲染一个标签 span 做显示指示箭头之用，只要做出判断，当渲染到最后一个阅读全文

posted @ 2022-08-18 22:12 小方块的世界阅读(244) 评论(0) 推荐(0)

sass全局变量配置和使用示例

摘要：vue2.6 sass全局变量配置安装sass-loader npm install sass-loader@8.0.2 --save-dev vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependDa 阅读全文

posted @ 2022-07-14 17:50 小方块的世界阅读(1205) 评论(0) 推荐(0)

normalize.css

摘要：/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document */ /** * 1. Correct the line height in all browsers. * 2. Pre 阅读全文

posted @ 2022-05-03 23:10 小方块的世界阅读(40) 评论(0) 推荐(0)

reset.css

摘要：/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h 阅读全文

posted @ 2022-05-03 23:06 小方块的世界阅读(22) 评论(0) 推荐(0)

el-select多选以tag展示，超过显示长度以...省略号显示

摘要：问题描述需求：el-select多选以tag展示时，超过显示长度以...省略号显示。注意： ① 一个tag文字过长需要溢出隐藏，超出部分... 显示 ② 多个tag卡片溢出隐藏，超出部分...显示问题分析单行文字溢出隐藏 overflow: hidden; text-overflow: el 阅读全文

posted @ 2021-09-26 10:45 小方块的世界阅读(3005) 评论(0) 推荐(0)

el-table改变某一列的样式

摘要：问题描述 el-table中有些列需要编辑，有些显示文本，需要对编辑的列做特定样式处理问题解决 <el-table :data="tableData" :cell-class-name="cellClsNm" > 属性为editable的一列的td上添加有一个 td-edit-cls的类 cell 阅读全文

posted @ 2021-09-14 19:48 小方块的世界阅读(1654) 评论(0) 推荐(0)

SassError: expected selector

摘要：问题描述 vue-admin项目中使用了/deep/后启动项目报错： ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/tree-sel 阅读全文

posted @ 2021-05-06 23:25 小方块的世界阅读(5213) 评论(0) 推荐(0)

/deep/在chrome89+中出现样式混乱的问题

摘要：问题描述 elementui-admin项目中使用/deep/在chrome89+中出现样式混乱的问题公共样式文件中，使用/deep/，在main.js中引用，chrome89版本以下生效。chrome89+ /deep/选择器失效，导致样式错乱，覆盖的样式失效。问题分析 Chrome 63将删阅读全文

posted @ 2021-03-12 19:25 小方块的世界阅读(420) 评论(0) 推荐(0)

elementui table 闪动以及table不停拉伸的问题

摘要：问题描述使用elementUI的table组件时发现，进入页面加载数据后页面不停闪动问题解决 // el-table渲染页面抖动,全局添加样式 .el-table { width: 99.9% !important; } 可能衍生问题切换路由后table表格加载数据时候table宽度变小或者变阅读全文

posted @ 2021-03-03 21:15 小方块的世界阅读(4596) 评论(0) 推荐(0)

elementUI表格宽度变化后不对齐的问题

摘要：问题描述 elementUI table表格渲染数据时，thead和tbody中的列宽不一致问题解决全局设置以下样式： body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutte 阅读全文

posted @ 2021-02-22 15:24 小方块的世界阅读(1104) 评论(0) 推荐(0)

vue计算动态元素宽度

摘要：问题描述需求要一个列表，列表中所有元素不能换行，每一个元素包括一个table。分析问题可以使用一个ul然后让li浮动，这样的结果是当li过长会换行，为了不让li换行可以动态计算所有长度之和作为ul的长度问题解决 <div class="father"> <ul class="clearfix 阅读全文

posted @ 2021-02-07 12:40 小方块的世界阅读(4028) 评论(0) 推荐(0)

字符串首字母大写的小技巧

摘要：首字母大写js方法 // 方法1 (Vue 2.x 版本中使用过该方法) function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1) } // 方法2 -- 使用replace function capit 阅读全文

posted @ 2020-08-19 22:15 小方块的世界阅读(847) 评论(0) 推荐(0)

如何在页面中使用svg图标

摘要：1.svg图标长啥样注意：图标的宽高无所谓，使用时可以根据需求修改，fill后面是颜色的填充，可修改图标颜色。 2.使用svg图标 2.1将下载好的.svg文件或者自己制作的.svg文件放到项目目录下面。 2.2将 .svg 图标作为背景图使用： 3.为什么使用svg图标？这其实跟使用web字体阅读全文

posted @ 2019-05-01 10:55 小方块的世界阅读(10006) 评论(0) 推荐(1)

多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

摘要：多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content 阅读全文

posted @ 2018-12-05 19:55 小方块的世界阅读(445) 评论(0) 推荐(0)

使用特殊网络符号做复选框

摘要：使用特殊网络符号 ✔ 做复选框阅读全文

posted @ 2018-12-05 19:14 小方块的世界阅读(2286) 评论(0) 推荐(0)

两种好用的清除浮动的小技巧（clearfix hack）

摘要：完美解决清除浮动的两个小技巧阅读全文

posted @ 2018-11-15 23:35 小方块的世界阅读(702) 评论(0) 推荐(0)

清除display:inline-block元素换行符间隙font-size:0;

摘要：font-size:0; 清除display:inline-block元素换行符间隙阅读全文