dearyang

css设置：实现div居中，宽度自适应：

元素设置滤镜

利用SASS/SCSS切换Vue项目主题最近在做的项目使用到了主题切换，我也趁此机会学习了一下SCSS/SASS这门CSS编译型语言，特此研究并带实现一个Vue Demo中实现主题切换。SCSS是SASS兼容CSS的版本，本文内全部使用SCSS一称。✏️大体思路如下：1.使用vuex全局执行命令切换主题 (state - mutations 无须异步)2.遍历主题色并设置混合，在需要的地方插入混合，使用方法查找对应颜色，生成嵌套，写全局类3.利用VueX和v-bind:class

IOS系统input输入框无法输入值页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式。（亲试有效）<input style='-webkit-user-select:text!important;'>或者input { -webkit-user-select:text !important;}...

box-sizingCSS中的box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。在CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。box-sizing 属...

如果不喜欢看分析过程，可以跳到最后看最终兼容方案史前方法：以前实现两端对齐是这样的：<p class="box1">密&emsp;&emsp;码</p><p class="box1">用&emsp;户&emsp;名</p><p class="box1">身&emsp;份&emsp;证&emsp;号</p>效果是这样：然后再慢慢加&emsp 或者

vue v-html 富文本图片溢出，解决图片溢出问题之后会出现附件的图片也是100%显示如图所示：附件前面的图片也是100%解决方案：给富文本中所有图片增加 class富文本JavaScripthandleHtml(rich) { //使用正则表达式匹配所有图片 let reg = RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g); let match = rich.match(reg);.

object-fit属性介绍object-fit是一个css3属性，可以让图片或者视频适应外部容器。目前这个属性除了IE浏览器以外，其他主流浏览器都支持。 属性如下：/* Keyword values */object-fit: fill; object-fit: contain;object-fit: cover;object-fit: none;object-fit: scale-down;/* Global values */object-fit: inherit;obje

css导入方式 1.标签内联2.内部放置3.外部放置4.@import url（）css选择器 1.标签选择器2.id选择器3.class选择器4.组合选择器css优先级 就近原则 标签>id>class>*为了防止不支持css的浏览器将<stylr>...</style>标签间的css规则当成普通字符串,而显示在网页上，应将css的规则代...

没有去除之前：去除之后：具体css代码：/*在Chrome下移除input[number]的上下箭头*/.no-number::-webkit-outer-spin-button,.no-number::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none !important;}.no-number input[type="number"]::-webkit-outer-spin-button

示例：每行5个.flex { display: flex; flex-wrap: wrap}.flex > div { width: 20%;}

1.实现单行文本的溢出显示省略号width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;效果图：2.多行文本溢出显示省略号width: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-c...