随笔分类 - CSS
摘要：
.iphone input::-webkit-input-placeholder { /* WebKit browsers，webkit内核浏览器 */ color: #bec6cd !important; } .iphone input:-moz-placeholder { /* Mozilla
阅读全文
.iphone input::-webkit-input-placeholder { /* WebKit browsers，webkit内核浏览器 */ color: #bec6cd !important; } .iphone input:-moz-placeholder { /* Mozilla
阅读全文
摘要：
/* 通用重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 清除列表的默认样式 */ ul, ol { list-style: none; } /* 去除链接的默认下划线 */ a { text-decoration: n
阅读全文
/* 通用重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 清除列表的默认样式 */ ul, ol { list-style: none; } /* 去除链接的默认下划线 */ a { text-decoration: n
阅读全文
摘要：
css样式优先级(权重)： 内联样式 ：style="z-index: 1001"（最高优先级，除非被一个更具体的内联样式覆盖或具有 !important 的样式覆盖） !important ：z-index: 10000 !important;（最高优先级） id选择器 ：#box（100） 类选
阅读全文
css样式优先级(权重)： 内联样式 ：style="z-index: 1001"（最高优先级，除非被一个更具体的内联样式覆盖或具有 !important 的样式覆盖） !important ：z-index: 10000 !important;（最高优先级） id选择器 ：#box（100） 类选
阅读全文
摘要：
安装less和加载器 npm install less npm install less-loader 配置vue.config.js css: { preprocessorOptions: { less: { charset: false, additionalData: "@import './
阅读全文
安装less和加载器 npm install less npm install less-loader 配置vue.config.js css: { preprocessorOptions: { less: { charset: false, additionalData: "@import './
阅读全文
摘要：
如果你期望鼠标移动到某元素，某元素会上移一段距离，你也许会这么写 .box { position: relative; transition: all 3s; } .box:hover { top: -20px; } 结果上移是上移了，但是过渡效果transition没生效 原因：需要给transi
阅读全文
如果你期望鼠标移动到某元素，某元素会上移一段距离，你也许会这么写 .box { position: relative; transition: all 3s; } .box:hover { top: -20px; } 结果上移是上移了，但是过渡效果transition没生效 原因：需要给transi
阅读全文
摘要：
<template> <div class="demo-container"> <div class="demo-item"> <div class="demo-title">方向指示类图标</div> <div class="demo-content"> <div class="demo-box"
阅读全文
<template> <div class="demo-container"> <div class="demo-item"> <div class="demo-title">方向指示类图标</div> <div class="demo-content"> <div class="demo-box"
阅读全文
摘要：
.scrollable-area { /* 设置溢出行为，使滚动条出现 */ overflow-y: scroll; /* 针对Webkit内核的浏览器 */ &::-webkit-scrollbar { /* 设置滚动条的宽度 */ width: 8px; } /* 滚动条轨道 - 背景颜色/白底
阅读全文
.scrollable-area { /* 设置溢出行为，使滚动条出现 */ overflow-y: scroll; /* 针对Webkit内核的浏览器 */ &::-webkit-scrollbar { /* 设置滚动条的宽度 */ width: 8px; } /* 滚动条轨道 - 背景颜色/白底
阅读全文
摘要：
BFC（Block Formatting Context）即块级格式化上下文，是W3C CSS2.1规范中的一个概念。它指的是浏览器中创建的一个独立的渲染区域，并且拥有一套渲染规则，决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC是一个完全独立的空间（布局环境），让空间里的子元素不会
阅读全文
BFC（Block Formatting Context）即块级格式化上下文，是W3C CSS2.1规范中的一个概念。它指的是浏览器中创建的一个独立的渲染区域，并且拥有一套渲染规则，决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC是一个完全独立的空间（布局环境），让空间里的子元素不会
阅读全文
摘要：
放大缩小css @keyframes scaleAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } 完整代码： <!DOCTYPE html> <
阅读全文
放大缩小css @keyframes scaleAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } 完整代码： <!DOCTYPE html> <
阅读全文
摘要：
1. CSS盒模型。 CSS盒模型是网页布局的基础，每个HTML元素都可以看作是由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的矩形盒子。盒子的实际宽度和高度是这四个部分的总和。 2. CSS的选择器及其优先级。 CSS选择器用于选择你想要样式化
阅读全文
1. CSS盒模型。 CSS盒模型是网页布局的基础，每个HTML元素都可以看作是由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的矩形盒子。盒子的实际宽度和高度是这四个部分的总和。 2. CSS的选择器及其优先级。 CSS选择器用于选择你想要样式化
阅读全文
摘要：
使用:global关键字来改变antd组件的样式，如要改变antd的样式.ant-table-title， 请在.ant-table-title之前再包一层样式，然后在这层样式里面去改变antd的样式就不会影响到其它.ant-table-title： .tableBox { :global { .a
阅读全文
使用:global关键字来改变antd组件的样式，如要改变antd的样式.ant-table-title， 请在.ant-table-title之前再包一层样式，然后在这层样式里面去改变antd的样式就不会影响到其它.ant-table-title： .tableBox { :global { .a
阅读全文
摘要：
假如div里面有多个!important权重的样式类名.a和.b，哪个优先级最高？ <div class="a b"></div> .a { display: block !important; } .b { display: none !important; } 答案：b。 谁的!importan
阅读全文
假如div里面有多个!important权重的样式类名.a和.b，哪个优先级最高？ <div class="a b"></div> .a { display: block !important; } .b { display: none !important; } 答案：b。 谁的!importan
阅读全文
摘要：
哎呦，你怎么这么笨呀，你为什么要把子级样式类名和父级样式类名放在一起？这样子级样式根本就不会生效好嘛，你得把所谓的子级样式放到和父级样式同级里面去。
阅读全文
哎呦，你怎么这么笨呀，你为什么要把子级样式类名和父级样式类名放在一起？这样子级样式根本就不会生效好嘛，你得把所谓的子级样式放到和父级样式同级里面去。
阅读全文
摘要：
css3的gap属性可以帮助你在 1、弹性布局（display：flex） 2、网格布局（display：grid） 3、多列布局（column-count或column-width） 中轻松设置元素之间的空格，而不用自己用margin或者padding逐个去设置； 该属性是row-gap and
阅读全文
css3的gap属性可以帮助你在 1、弹性布局（display：flex） 2、网格布局（display：grid） 3、多列布局（column-count或column-width） 中轻松设置元素之间的空格，而不用自己用margin或者padding逐个去设置； 该属性是row-gap and
阅读全文
摘要：如： .text { color: #fff !important; color: red; } 这里会显示白色字体而不是红色字体。
阅读全文
摘要：原本看到它不识别这个↵符号，我就打算把数据中的↵符号替换成<br >来看看能不能显示（a.rule.replace(/↵/g,'<br >');），结果还是不显示，之后我就设置了这个样式上去就可以显示换行了。 补充一下： 更多white-space可查看这篇文章👉http://t.csdn.cn/
阅读全文
摘要：如题。 2024-06-25 更新： .codeBox /deep/ .el-input-group__append { padding: 0 !important; } 用一个类名包住，然后用deep控制
阅读全文
摘要：如题。
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：前言：项目引入uview，使用uview的image组件时，报错： 20:55:49.932 SassError: Undefined variable: "$u-bg-color". 20:55:49.937 on line 255 of D:\project\mall-uni\uni_modul
阅读全文
