
css
1024_Byte
你的双手拥有改变世界的力量
展开
-
Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除(之前项目都是亮色系所以没发现问题)通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素包含这条线的样式所以一直没有找到合理的解决办法只能通过特殊方案去解决这条白线通过设置全视口的高将白线定出table的范围才能暂时解决(或者修改fixed的bottom定位可以解决),但是如果是大屏项目这个仍然不是最优解因此在mounted里设置了根据分辨率问题去自适应的方案 mounted()原创 2022-03-30 18:12:11 · 4610 阅读 · 0 评论 -
CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skewX()梯形按钮组ul,li{ padding:0;margin:0;list-style:none}.ul{ height:30px; width:200px; display:flex; border-bottom:1px solid red;}.ul>li{ height:100%; flex:1; border:1px so原创 2022-01-10 19:22:56 · 1450 阅读 · 0 评论 -
css属性标签选择器
今天在项目中发现组件内包含了一个class选择器查询后发现这种属于属性标签选择器,相对于传统的元素选择器等,可以实现更多的类或标签的选择,甚至直接查询属性,使用起来更加灵活。查询属性/* 存在title属性的<a> 元素 */a[title] { color: purple;}/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */a[href="https://example.org"] { color.原创 2021-09-06 10:58:39 · 604 阅读 · 0 评论 -
display:grid 网格布局的基础使用
css新特性——网格布局我们通过在元素上声明display:grid来创建一个网格容器。一旦我们这样做,这个元素的所有直系子元素将成为网格元素。 它将元素分割成行与列,通过栅格栏的形式弥补了flex布局在响应式方面的缺陷。在这个例子中,这有一个类名为wrapper的div元素作为容器,它内部有五个子元素。<div class="wrapper"> <div>One</div> <div>T...原创 2021-08-20 10:33:51 · 2936 阅读 · 0 评论 -
HTML table标签固定高度,并且显示滚动条
关键设置 /*关键设置 tbody出现滚动条*/21 table tbody {22 display: block;23 height: 80px;24 overflow-y: scroll;25 }26 27 table thead,28 tbod.原创 2021-08-19 16:12:53 · 4299 阅读 · 0 评论 -
elementUI树形组件添加连线和自定义图标
1.elementUI的树形组件官网样例节点之间是没有连线的,想要实现如下图节点之间出现连线需要自己定义树形插件的样式覆盖el-tree内部的样式类首先要给el-tree添加两个样式类一个添加到el-tree本身的class上,另外一个添加到包裹el-tree的外层div,具体的样式代码如下/* 树形结构节点添加连线 */.tree /deep/ .el-tree-node { position: relative; padding-left: 16px;}.tree...转载 2021-05-19 14:42:48 · 1476 阅读 · 1 评论 -
CSS自定义浏览器滚动条样式
滚动条组成::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除...原创 2021-04-15 08:53:11 · 252 阅读 · 1 评论