彭世瑜的博客

文档： https://element.eleme.io/#/zh-CN/component/custom-themeelement-variables.scssmain.js

结合网上诸多无效方法，整理如下注意是vue安装，不是npm！！！vue add style-resources-loader安装过程中选择less修改根目录 vue.config.js 的patterns参数const path = require("path");module.exports = { pluginOptions: { "style-resources-...

实现效果实现代码完整代码/* 遮罩层 */.mo-maskposition;top;bottom;left;right;width;height;;.mo-dialog;height;width;margin;/* 关键属性 */rgba;blur;blur;

css中使用flex布局中子元素高度height没有达到100%希望实现两个盒子左右分布，内容垂直居中对齐。可以看到，左边的盒子高度并没有撑满。去除，单独设置子元素的对齐样式。

【代码】Warning autoprefixer: end value has mixed support, consider using flex-end instead。

reset.css 重置浏览器样式。

一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。发现一个很奇怪的现象：我们本来期待的是两个框对齐，表现却是错位的。所以第一个框的底部和后一个元素中的文字基线对齐了，可以看到，默认情况下并没有实现垂直居中对齐。如果两个元素都没有文本，同样是对齐的。发现并没有居中对齐，有种失效的感觉。如果两个元素都有文本，则是对齐的。方案二：图片元素居中对齐。

我们知道，化学元素需要按照如下的格式才能正确显示，不过会将原有的字体高度撑开。：使元素及其后代元素的顶部与整行的顶部对齐。：使元素及其后代元素的底部与整行的底部对齐。：使元素的基线与父元素的下标基线对齐。：使元素的基线与父元素的上标基线对齐。：使元素的顶部与父元素的字体顶部对齐。：使元素的底部与父元素的字体底部对齐。

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于的元素。警告： 这个属性已被废弃。建议使用 clip-path文档。

因为lib-flexible.js 原本是用来适配移动端的，所以，需要改动一些代码才能适配PC大屏，只能通过整个文件引入，不要通过npm安装，否则每次安装都需要重新修改代码。需要注意的是，这个缩放是基于宽度缩放的，如果屏幕尺寸比例不一致，会导致竖向的内容会缺失，或者出现滚动。在尺寸为1200px的屏幕宽度下，可以还原为代码中设置的尺寸。在尺寸为1400px的屏幕宽度下，可以还原为代码中设置的尺寸。就不一样，进而导致页面元素的尺寸也不一样，实现了缩放效果。这样，在不同的屏幕下，计算出来的根元素。

块级元素，比如 div，其默认宽度是100%。给定一个宽度的时候，可以居中对齐。行内元素（比如文字，span，图片等）的水平居中，其父元素中设置。使用绝对定位实现：子绝父相（子元素绝对定位，父元素相对定位）上面的方法也可以让图片垂直居中。也适用于单行文字、行内元素。

饼状图不能设置grid，而是centercenter 圆心：控制圆的位置radius 饼图的半径 控制显示尺寸。

【代码】echarts坐标轴线、坐标轴刻度线、网格线控制。

ECharts 提供的标记类型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’

【代码】前端：input 标签取消账号填充。

【代码】css：transform实现平移、旋转、缩放、倾斜元素。

那么我们可以得到线的左边距是每一项的左边距加上一个值。这个值是每一项的宽度减去线的宽度的结果再除以二。使用css和js实现一个tab切换的效果。// 计算下划线位置。

存在兼容性问题overflow兼容性最好，也最直观，符合大多数人思路，缺点是需要单独嵌套一层父级clip实现最简洁，也比较好理解，在本案例中最为推荐mask思路和clip一致，实现起来稍微复杂一点，还可以实现更为复杂的渐隐效果，能够掌握更好。

通过比对发现，方式二是一个不错的选择参考Vue触发隐藏input file的方法实例详解写上传文件时，将html中的(选择文件) 元素隐藏，并通过其它方式点击触发。

会启动拼写和语法检查，表现效果就是单词拼写错误会出现红色下划线提示。有时，我们并不需要拼写检查，可以通过配置属性。

css代码实现页面变灰的效果。

同样参考element-ui的css，可以实现如下效果。参考element-ui的css，可以实现如下效果。textarea默认样式和focus样式。input默认样式和focus样式。/* 鼠标hover *//* 鼠标hover *//* 去除默认样式 *//* 去除默认样式 *//* 自定义样式 *//* 自定义样式 *//* 提示文字 *//* 获得焦点 *//* 提示文字 *//* 获得焦点 */

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。文档。

CSS 实现 hover 时文字波浪式变色效果。

文档。

css:网页引入网络字体@font-face

CSS 界的 Babel，能够转译 CSS 代码，通过一些列插件增强浏览器兼容性，并让开发者提前用上新特性测试环境。

table { width: 100% !important;}

参数说明::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。:.

css3动画分类：帧动画过渡动画CSS3动画属性：transitionanimation常用属性transform动画库：swipervue-transitionsvganimate.csstransition过渡语法transition: property duration timing-function delay;属性名称property过渡时间duration时间函数timing-function延迟时间delay2、注意：displ

下载扩展Live Sass Compiler点击VSCode下方的Watch Sass

统一的样式文字水平居中text-align: center;.box{ height: 200px; width: 200px; background-color: #DDDDDD; text-align: center; margin: 20px; padding: 0 20px;}1、单行文本垂直居中设置行高line-height ...

1.table去重叠边框table{ border-collapse:collapse;}2.非table去重叠边框只需要设置div的margin值为边框值的相反数就行div{ border:1px solid #333; margin-right:-1px; margin-bottom:-1px;}参考CSS去重叠边框...

1、基础样式h2{ text-align: center;}.main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between;}.container{ display: flex; width: 320px; heigh...

原本意义：实现文字环绕效果BFC Block formatting context块级格式化上下文具有包裹性属性display：inline-block/table-cellposition:absolute/fixed/stickyverflow:hidden/scroll破坏容器被破坏, 父元素高度塌陷display：noneposition：absolute/fixed/...

Less css预处理语言特性：变量、继承、运算、函数http://lesscss.cn/编译器1、koalahttp://koala-app.com/index-zh.htmlhttps://github.com/oklai/koala2、sublime插件less # 语法高亮less2css # 保存自动生成同名的css文件需要安装node环境+node...

<style>.hot { vertical-align: super; color: red;}</style><span class="hot">hot</span>

使用nginx+django部署项目的时候，为了提高加载速度，我将css，js，image等静态资源在nginx中配置了路径本地测试没有问题，代码提交线上就出问题了，出现了这么个情况：css文件能加载但是没有生效经过查找资料，大概从以下两个方面入手检查：1、考虑css文件引用是否正确2、考虑服务器nginx配置静态文件是否正确打开浏览器console，出现这么一句话Resource...

css 层叠样式表作用： - 颜色 - 位置注释 /* 这是注释 */形式 - 内嵌样式 标签style - 内联样式 head style - 外联样式 单独文件选择器 - id选择器 # - class选择器 . - 标签选择器 - 层级选择器 空格隔开父-子 - 组合选择器 逗号隔开同级元素 ...