Wzw的博客

无法直接修改border-bottom的长度，不过可以通过设置伪元素来获得类似的效果。.active { color: #ed9d36; text-align: center;}.active::after { content: ''; width: 50%; height: 1px; display: block; margin: 0 auto; border-bottom: 2px solid #ed9d36; padding: 1px;}...

高度为百分比时，设置里面的元素居中/* 方法一 */.box { height: 25%; display: table;}.box>span { display: table-cell; vertical-align: middle;}/* 推荐使用方法二 */h1 { display: flex; align-items: center;}

最多显示一行、两行注意：需要是块级元素，否则不生效/* 显示两行 */div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }/* 显示一行 */div { overflow: hidden; white-space: nowrap; text-overflow: e

内容超出，可左右滑动在这里只贴出CSS代码，关键是给父元素设置CSS属性。当一个块级元素的内容在水平方向发生溢出时，overflow-x决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。合法值：visible | hidden | scroll | autovisible：内容不会被截断，且可以显示在内容盒外hidden：内容会被截断，且不会显示滚动条scroll：桌面浏览器总是显示滚动条，无论内容是否发生溢出auto：取决于浏览器本身，当内容发生溢出时，桌面浏览器如Edge会显示

设置选中标签样式在筛选列表中，当标签处于活跃时，需给定不同样式<template> <div class="category-selector"> <ul class="sort-type"> <li v-for="(item, index) in sortTypeTag" :key="index"> <a href="javascript:void(0);" @click="changeSortType(it