自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

HonG

遇到值得帮助的人一定要帮,还有懂得感恩

  • 博客(41)
  • 收藏
  • 关注

原创 rem是什么

rem 是一个长度单位px,绝对长度单位,最常用em,相对长度单位 ,相对于父元素,不常用rem,相对长度单位,相对于根元素,常用语响应式布局

2020-07-29 09:48:50 3695

原创 line-height如何继承

body{ font-size:20px; // line-height : 30px; (p元素line-height:直接继承30px) // line-height : 1.5; (p元素line-height:16乘1.5 = 24px) // line-height:200% (p元素linehgiht:20 乘 200% = 40px)}p{ font-size:16px }写具体数值,如30px,直接继承该值写比例,如2或1.5,则继承该比例写百分比,如200

2020-07-28 15:24:40 313

原创 网页视口尺寸

window.screen.height (屏幕高度)window.innerHeight (网页视口高度)document.body.clientHeight (body高度)

2020-07-28 14:58:55 266

原创 vue中使用过滤器filters的this为undefined

vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法

2020-07-16 16:07:11 1505

原创 css文本超出省略号

单行超出 (记得设置宽度)overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行后超出 (记得设置高度) display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:

2020-07-13 14:44:57 133

原创 JS获取字段在数组内的下标

function getArrayIndex(arr, obj) { let i = arr.length while (i--) { if (arr[i] === obj) { return i } } return -1 }

2020-07-11 11:21:35 1066

原创 uniapp mescroll-uni 下拉刷新 上拉加载

<template> <view class="scroll-container"> <mescroll-uni class="scroll" :fixed="false" :down="downOption" :up="upOption" @down="handleRefresh" @up="handleLoadMore" @init="mescrollInit" >

2020-07-08 17:02:58 1505

原创 css border边框渐变

.active { background: rgba(255, 138, 36, 0.06); border-left: 10rpx solid; border-radius: 0 12px 12px 0; border-image: linear-gradient(#ffa430 0%, #ff8121 100%) 1 10; }

2020-07-03 09:22:26 658

原创 el-table添加表头颜色

:header-cell-style="{background: ‘#E9EEF5’,color: ‘#000’}"

2020-06-29 17:36:31 3333

原创 el-image onload触发问题

因为缓存原因,所以给返回的图片加上时间戳 + ‘?_=’ + new Date().getTime()

2020-06-29 14:34:22 2259 1

原创 html新窗口打开链接

_blank – 在新窗口中打开链接_parent – 在父窗体中打开链接_self – 在当前窗体打开链接,此为默认值_top – 在当前窗体打开链接,并替换当前的整个窗体(框架页)

2020-05-25 21:37:04 837

原创 Vue如何实现双向数据绑定

Object.defineProperty()此方法直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 <input type="text" id="a"> <span id="b"></span> <script> var obj = {}; Object.defineProperty(obj,'name',{ set: function(newValue){ .

2020-05-20 14:24:11 184

原创 JS常用继承

原型继承将父类的实例作为子类的原型构造继承将父类的构造函数在子类执行一次,等于是复制父类的实例属性给子类(没用到原型)实例继承为父类实例添加新特性,作为子类实例返回组合继承通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型ES6 使用class extends继承...

2020-05-18 01:26:05 159

原创 防抖节流

防抖:在规定的间隔时间里,只执行最后一次操作,中途有影响,就重新计时。例:电梯开关门const debounce = (func, wait = 100) => { let timer = 0 return function (...args) { if (timer) { console.log("有人进来,重新计时") ...

2020-04-09 16:12:51 96

原创 var、let、const区别,什么是提升

函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部var 存在提升,我们能在声明之前使。let、const 因为暂时性死区的原因,不能在声明前使用,否则会报错。var 在全局作用域下声明变量会导致变量挂载在 window 上,let和const不会。let a = 10;console.log(window.a) // undefine...

2020-04-06 15:04:39 167 1

原创 浅拷贝和深拷贝

浅拷贝:拷贝所有的属性值到新的对象中,如果属性值是对象的,拷贝的则是地址。Object.assign(): let p1 = { age : 10, jobs:{ first:'xxx' } } let p2 = Object.assign({} , p1); p1.age = 20; p1.jobs.first = 'zzz'; console.log...

2020-04-05 21:59:32 665

原创 JS XMLHttpRequest

XMLHttpRequest 对象用于在后台与服务器交换数据。var xhr = new XMLHttpRequest()xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText) }}x...

2020-04-03 10:24:22 231

原创 JS事件绑定

var demo = document.getElementById('demo')demo.addEventListener('click', function (event) { // event.preventDefault() // 阻止默认行为 // event.stopPropagation() // 阻止冒泡 console.log('clicked')})...

2020-04-03 09:56:30 159

原创 什么是BFC、可以解决哪些问题

BFC:块级格式化上下文 (Block Fromatting Context)解决的问题:避免外边距折叠避免文字环绕包含浮动元素,让浮动元素不会乱跑

2020-03-23 15:12:49 593

原创 实现水平居中、垂直居中的方法

display: flex;justify-content: center;//控制水平方向的居中(可省略,默认主轴是水平)align-items: center;//控制垂直方向的居中position: absolute;top: 50%;left: 50%;margin-top: -height的一半margin-left: -width的一半position: ab...

2020-03-20 09:48:02 241

原创 ES6模块化

使用命名导出export { a, b, c};import { a, b, c} from 'xxx.js';使用默认导出// module "my-module.js"export default function cube(x) { return x * x * x;}import cube from 'my-module.js';console.log(cube(...

2019-12-23 17:40:39 95

原创 git Failed to connect to xxxxx Timed out

解决办法:git config --global --unset http.proxy

2019-12-11 09:53:55 754

原创 圣杯布局和双飞翼布局

两种布局都是:两侧宽度固定、中间宽度自适应,中间部分在DOM结构上优先,优先渲染。圣杯布局:HTML<!-- 最外层容器 --><div class="container"> <!-- 中间 --> <div class="center">center</div> <!-- 左侧 --> <div ...

2019-12-06 10:39:42 267

原创 flex里最后一个元素右对齐

margin-left: auto;

2019-11-27 13:58:49 790

原创 flex布局space-between,元素不足时,最后一行左对齐

给父元素加上&:after { content: ""; width:100px;} width 设置为父元素里的,每个子元素的宽度

2019-11-27 13:56:32 1326

原创 css去除滚动条

::-webkit-scrollbar { width: 0; height: 0; color: transparent;}

2019-11-25 20:21:36 333

原创 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got String.

有些elementUI组件里,要求传入的data必须是什么数据格式,如果为空会报错,只需要在请求回来之前,设为默认初始值即可。

2019-11-19 16:44:25 1634

原创 element el-tree 获取最里层面的子id

<el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current @check="getHalfCheckEvent" ...

2019-11-01 10:05:26 1810

原创 echarts的y轴文字显示不全、y轴文字与轴之间设置间隔

第一步:grid: { left: "55", containLabel: true},left 容器左侧的距离。containLabel 用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。第二步:yAxis:{ offset:50 }对 y轴 进行偏移...

2019-10-25 14:26:10 3548

原创 windows 实用快捷键

Ctrl + W在浏览器中,直接关闭当前浏览页面**Windows + L **直接锁屏**Windows + ++++++(←Backspace 的 左边按键) **放大,放大,再放大!Windows + E直接打开文件资源管理器找文件**Windows + D **直接显示桌面Ctrl + Shift + T浏览器中恢复之前关闭的页面W...

2019-10-24 10:23:22 102

原创 npm install -g, -S, -D, --save, --save -dev

npm install -g 全局安装npm install name -S(npm install name --save) 开发环境 和 生产环境 都会用到在 package-lock.json 的 dependencies 中npm install name -D(npm install name --save -dev) 开发环境用到,生产环境用不到在 package-loc...

2019-10-23 13:49:46 117

原创 前端页面由哪三层构成,分别是什么?作用是什么?

前端页面构成:结构层、表示层、行为层结构层(structural layer):由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。`表示层(presentation layer)由 CSS 负责创建。 CSS对“如...

2019-09-04 09:29:36 2444

原创 微信小程序转发出去的预览图尺寸:

210宽 168高 5:4

2019-09-04 09:26:42 5928

原创 微信小程序使用switchTab跳转后页面不刷新的问题:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)...

2019-09-04 09:22:35 694

原创 清除浮动

清除浮动的方法父元素添加overflow:hidden(不推荐)优点:代码简洁缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素不推荐使用使用after伪元素清除浮动:after{content: “”;display: block;height: 0;clear:both;visibility: hidden;}.clearfix{...

2019-09-04 09:18:55 81

原创 CSS选择器以及优先级

权值:标识当前选择器的重要程度。权值越大优先级越高。`元素选择器 1类选择器 10ID选择器 100内联样式 1000选择器的权值 加到一起,大的优先,权值相同,以后定义为主`优先级(由低到高):在层叠性基础上,如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式`浏览器默认设置样式表(内外部) 就近原则 - 后定义者优先内联方式!important(最高)...

2019-09-04 09:18:18 116

原创 position定位

position的值有哪些?分别是相对于什么定位?staticrelativeabsolutefixedinheritstatic:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。relative:相对于其正常位置进行定位。absolute:如果其父元素设置了定位则根据父元素,如父元素没设置,则根据b...

2019-09-04 09:17:54 103

原创 CSS盒子模型

一个元素的实际计算:content + width + padding + marginbox-sizing: content-box 是W3C盒子模型在标准的盒子模型中,width指content部分的宽度box- sizing: border-box 是IE盒子模型在IE盒子模型中,width指content + padding + border这三个部...

2019-09-04 09:17:18 83

原创 浏览器兼容前缀和浏览器内核

Firefox : -moz-Chrome & Safari : -webkit-Opera : -o-IE : -ms-IE: trident内核Firefox:gecko内核Safari:webkit内核Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit,Goole与Ope...

2019-09-04 09:16:44 256

原创 超出元素的文字用3个点代替

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

2019-09-04 09:12:01 237

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除