难得糊涂。-CSDN博客

原创子元素在父元素内居中

水平居中1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效 2.子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效 <div class="father"> <div class="son"> </div> </div> .father{

2021-11-15 15:13:11 271

高度塌陷：当所有子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。清除浮动方式：给父元素单独定义高度优点：快速简单，代码少缺点：无法进行响应式布局父元素定义overflow:hidden；zoom：1（针对IE6兼容）优点：简单快速，代码少缺点：超出部分被隐藏，布局时候要注意在浮动的元素后面加一个空标签，clear:both;height:0;overflow:hidden 优点：简单快速，代码少，兼容性高缺点：增加空标签，不利于页面优化父元素定义 overflow:

2021-11-15 14:53:14 101

原创 Html5+CSS3新特性

HTML5新增的语义化标签语义化标签优点：1、提升可访问行 2、SEO 3、结构清晰，利于维护Header 页面头部main 页面主要内容footer 页面底部Nav 导航栏aside 侧边栏article 加载页面一块独立内容Section 相当于divfigure 加载独立内容（上图下字）figcaption figure的标题video 视频audio 音频CSS3新增的特性边框：border-radius 圆角边框border-shadow：给框添加阴影（水平位移

2021-11-15 14:36:11 277

原创 Vue环境安装以及VScode插件

一、安装node.js官网：node.js官网下载历史版本：历史版本下载下载完毕后，安装node，建议不要安装到系统盘cmd打开终端输入指令检查安装 node -v二、安装cnpm淘宝镜像，之前使用下载包速度可能会快一些下载完之后检查 cnpm -v，如果出现错误提示，可检查一下电脑环境变量配置，在网上查找配置方法（偷懒）npm install -g cnpm -registry=https://registry.npm.taobao.org三、安装vuenpm install vu

2021-07-21 16:12:01 541 2

原创封装收起展开的过渡动画

创建一个js文件，导出一个组件const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'const Transition = { 'before-enter' (el) { el.style.transition = elTransition if (!el.dataset) el.dataset = {} el.d

2020-11-06 09:56:40 464

原创 vue-cli脚手架配置使用SVG图片

1、安装依赖npm install svg-sprite-loader2、配置vue.config.jsfunction resolve (dir) { return path.join(__dirname, '.', dir)}module.exports = { chainWebpack: config => { config.module.rules.delete('svg') // 删除默认配置中处理svg, // const svgRule = confi

2020-09-10 14:01:45 465

原创输入框校验规则

oninput="value=value.replace(/[^0-9A-Z]/g,'')" //数字与大写字母oninput="value=value.replace(/[^\d]/g,'')" //数字

2020-07-30 16:33:25 1298

原创数组对象改变对象属性名

this.multipleSelectionNew = JSON.parse( JSON.stringify(this.multipleSelection).replace( /goodsName/g, "productName" ) );

2020-04-09 11:03:58 553

原创对象多层嵌套，如何将对象转换为数组？

我们先看一下对象嵌套的格式这里有三个对象，分别往里面嵌套，现在我们要把每个next对象取出来组成数组data(){ return{ catalogArr: [],//类目数组 catalogObj: {},//嵌套对象 }}getCatalog(arr){ // 这里传入的arr是为整个嵌套对象push的一个数组 // 如：arr.push(catalogObj) a...

2020-03-30 10:23:16 3523

原创 vue-cli3.0配置开发环境与生产环境变量

第一步：在根目录创建两个文件，文件名分别为 .env.development和.env.production第二步：分别编辑这两个文件在不同的环境下设置不同的环境变量.env.development，这是开发环境下的URLVUE_APP_URL_DEVELOPMENT = 'https://www.baidu.com'.env.production，这是生产环境下的URLVUE_A...

2020-01-15 11:09:16 1541

原创 vue-cli3.0怎么取消eslint校验

我们在使用vue-3.0脚手架写项目的时候，有一个很让人恼火的问题就是eslint校验规则，明明代码没有问题，就是不给你运行，接下来就让我们来解决这个问题第一步：在项目根目录创建vue.config.js文件module.exports = { lintOnSave: false //如果为false，就是取消eslint规则的检查}保存，重启项目，搞定！！！！就一步哈哈哈哈！！当初...

2020-01-10 10:09:13 2128 2

原创 vue简单封装axios插件

第一步：在src文件夹下创建utils文件夹，该文件夹专门用来放工具，创建request.js文件，与axios有关的逻辑封装在request.js中第二步：开始封装axios// 导入axiosimport axios from 'axios'// 导入vueximport store from '@/store'// 创建一个axios实例const instance = a...

2020-01-10 09:47:13 206

原创解决！！前端项目打包后生成的chunk-vendors文件过大，导致加载太慢

话不多说，直接使用插件解决这个问题！第一步：先下载这个插件npm install --save-dev compression-webpack-plugin第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码const path = require('path');const webpack = require...

2020-01-09 21:03:51 57200 19

weixin_43850586的博客