随笔分类 - Css

修改el-tabs的下划线的transform属性，达到修改滑动距离的效果

摘要：示例：tabs的样式是有边框有间距且有下划线的这种情况，此时点击tab的时候默认下划线滑动距离只能是tab的宽度（横向）或者高度（纵向），不包含边框和间距的距离，所以下划线和tab会错位显示。(以下以纵向tabs为例，tab的高度为36px, 边框为1px, 下边距为10px) 解决方法：修改点击阅读全文

posted @ 2022-06-09 15:14 搬砖的苦行僧阅读(3083) 评论(0) 推荐(0) 编辑

flex-wrap: wrap 之后元素上下间距过大怎么解决？

摘要：原因：当元素设置了flex-wrap:wrap之后会有一个默认属性 align-content: stretch。元素被拉伸以适应容器。解决方法：添加：align-content：flex-start; 使元素位于容器的开头。阅读全文

posted @ 2022-06-09 10:08 搬砖的苦行僧阅读(1645) 评论(1) 推荐(1) 编辑

css写实心正三角和倒三角

摘要：正三角： .upTriangle{ width: 0; height: 0; border-top: 4px solid #FFFFFF; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; border-bottom: 阅读全文

posted @ 2021-05-18 14:03 搬砖的苦行僧阅读(231) 评论(0) 推荐(0) 编辑

css 水平垂直居中的几种常用方法

摘要：1. display 方法（最常用的方法） display: flex; justify-content: center; align-items: center;2. 定位 1）固定宽高(100px) .parent{ position: relative; } .child{ position: 阅读全文

posted @ 2021-04-16 11:06 搬砖的苦行僧阅读(352) 评论(0) 推荐(0) 编辑

给ul => li 中的最后一个li不加伪类after; 或者给最后一个和第一个不加伪类

摘要：最后一个不加伪类： ul li:not(:last-child)::after { content: ''; height: 14px; border: 1px solid #3c423f; position: absolute; top: 4px; right: 0;} 给最后一个和第一个不加伪类阅读全文

posted @ 2021-03-15 17:28 搬砖的苦行僧阅读(723) 评论(0) 推荐(0) 编辑

实现将牌放大缩小的效果css

摘要：* 放大缩小正面 */.front-pai{ width: 200rpx; height: 258rpx; background-color: #e24444; padding-bottom: 14rpx; box-sizing: border-box; position: absolute; to 阅读全文

posted @ 2021-03-04 17:31 搬砖的苦行僧阅读(101) 评论(0) 推荐(0) 编辑

实现翻牌的效果css

摘要：/* 翻的正面 */.front-pai{ width: 200rpx; height: 258rpx; background-color: #e24444; padding-bottom: 14rpx; box-sizing: border-box; position: absolute; top 阅读全文

posted @ 2021-03-04 17:29 搬砖的苦行僧阅读(131) 评论(0) 推荐(0) 编辑

使用多行省略号时，文字重叠的解决方法

摘要：.multiple-lines-ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; /*! autoprefixer: ignore next */ // 阅读全文

posted @ 2021-02-05 17:18 搬砖的苦行僧阅读(1034) 评论(0) 推荐(0) 编辑