- 博客(52)
- 收藏
- 关注
RSS订阅原创 vue项目实现错误高亮，jquery-highlighttextarea踩坑
安装首先安装依赖“jquery”: “^3.5.1”,“jquery-highlighttextarea”: “^3.2.1”,“jquery-ui”: “^1.12.1”,看了很多库都是基于jq的， 次产品提的需求是要在输入框内实现， 只找到jquery-highlighttextarea满足。配置jquerychainWebpack: config => { config .plugin('provide')
2021-04-19 17:34:43
639
转载 关于axios在vue中解决重复提交
需求例如在搜索框中，并不是你输入一个字就需要渲染一次数据，而是取最后一次的输入内容进行搜索。连续按下 AAAAA ，只取最后一次按下时搜索框的内容（即：AAAAA）进行搜索。 而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相关联的内容本文例子: 检测用户输入的值,监测这个值,然后根据值调用接口查询结果代码：<template> <input type...
2020-03-10 17:30:04
613
原创 DOM节点操作
null>document>html>body>div标签属性文本nodeType123nodeName大写的标签名小写的属性名#textnodeValuenull属性值文本内容父级节点obj.parentNodeobj.parentElement父元素,由于只有标签可以作为父节点效果相同.子级子节点o...
2019-11-29 14:28:04
147
原创 JS内置对象&常用方法&属性
Math:数学对象*Math.PI //获取圆周率*Math.floor(num)//向下取整,parseInt()可代替.*Math.ceil(num) //向上取整*Math.round(num)//四舍五入,如果是.5比较特殊,会往大了取(-1.5返回-1)*Math.abs(num) //取绝对值,传入null返回0,传入非数字字符串返回NaN*Ma...
2019-11-29 14:22:16
163
原创 JavaScript交换两个变量
【1】最省字节法 a=[b,b=a][0];【2】传统法 c=a,a=b,b=c;【3】数值型值可用 a=a+b;b=a-b;a=a-b;【4】恶搞方法1 a={a:b,b:b=a}.a;【5】恶搞方法3 a=a*b;b=a/b;a=a/b;【6】a=[ b][b=a,0]【7】[a,b]=[b,a]【8】a=[b,b=a][+[]]【9】 b = a + 0*(a=b);【10...
2019-11-17 21:14:07
94
原创 JavaScript的组成
ECMAScript：Js语法DOM：文档对象模型 ， 文档：html文档 ，操作html文档 （操作html文档的工具）BOM：浏览器对象模型 ， 操作浏览器的工具DOM——文档对象模型文档对象模型（DocumentObject Model，简称DOM）是W3C组织推荐的处理可扩展标记语言的标准编程接口通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜...
2019-11-17 20:57:10
115
原创 less基础
less是一门css扩展语言,也称为css预处理器.作为css的一种形式的扩展,它并没有减少css的功能,而是在现有的css语法上,为css加入程序语言的特性.它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。less变量@变量名:值;...
2019-11-13 20:00:12
119
原创 媒体查询
媒体查询事css3的新语法.使用@media查询,可以针对不同的屏幕尺寸设置不同的样式.@media mediatype and|not|only (media feature) {mediatype 查询类型,值: all用于所有设备,print用于打印机和打印预览.screen用于电脑,平板,手机显示屏幕.关键字 将媒体类型或者多个媒体特性连接到一起做媒体查询条件.and :可...
2019-11-13 19:49:56
244
原创 flex布局
flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。因为flex布局可以让子元素一行显示，不需要浮动，所以就不需要清除浮动flex布局还可以设置盒子垂直居中，...
2019-11-11 20:49:58
597
原创 移动端常见布局及主流方案
移动端单独制作流式布局（百分比布局）flex 弹性布局（强烈推荐）操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分less+rem+媒体查询布局混合布局响应式媒体查询bootstarp流式布局：流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸...
2019-11-11 20:14:06
845
原创 CSS3盒子模型box-sizing及清除移动端特殊样式
传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + paddingCSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了/*CSS3盒子模型：border-box，边框盒子，理解：从边框开始计算盒子的大小（包...
2019-11-11 20:06:42
1187
原创 移动端技术解决方案
1.移动端浏览器兼容问题移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可2.移动端公共样式移动端 CSS 初始化推荐使用 normalize.css/Normalize.css：保护了有价值的默认值Normalize.css：修复了浏览...
2019-11-11 20:04:59
457
原创 背景缩放background-size
background-size属性规定背景图像的尺寸.background-size:背景图片的宽度 背景图片的高度;单位:长度|百分比|cover|contain百分比以元素自身为基准,cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域.(等比例拉伸,完全覆盖)contain把图像扩展至最大尺寸,以使宽度或者高度完全适应内容区域,等比例拉伸,任意一边先与盒子重合即可....
2019-11-11 20:03:23
253
原创 移动WEB开发-视口设置
1,视口就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口,视觉视口和理想视口.meta标签,设置viewport<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">最...
2019-11-11 19:57:36
160
原创 css3兼容处理
css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理添加对应的浏览器的前缀 常见前缀如下谷歌 -webkit火狐 -mozIE -ms如对 border-radius 进行兼容性处理 -webkit-border-radius: 30px 10px; -moz-border-radius: 30px 10p...
2019-11-06 16:39:43
245
原创 动画 animation
制作动画分为两步：在css中定义动画函数给目标元素调用动画函数动画序列：0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” ...
2019-11-06 16:38:32
362
原创 2D转换（变换）transform
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。缩放：scale移动：translate旋转：rotate倾斜：skew2d移动 translate给元素添加 转换属性 transform属性值为 translate(x,y) 如 transform:translate(50px,50px);translate...
2019-11-06 11:46:44
439
原创 H5新增表单类型和属性
属性值说明type=“email”限制用户输入必须为Email类型type=“url”限制用户输入必须为URL类型type=“date”限制用户输入必须为日期类型type=“time”限制用户输入必须为时间类型type=“month”限制用户输入必须为月类型type=“week”限制用户输入必须为周类型type=“number”...
2019-11-06 11:23:31
855
原创 H5多媒体标签
多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。audio 音频标签格式MIMe-TYPeMP3audio/mpegOggaudio/oggWavaudio/wavsource标签可以通过在多媒体标签内加入source标签，用来指定多...
2019-11-06 11:11:51
192
原创 常用的H5语义化标签
header 头部标签nav 导航标签article 内容标签section 块级标签 （块级标签 啥意思？ ）aside 侧边栏标签footer 尾部标签注意:这种语义化标准主要针对搜索引擎,这些新标签页面内可以多次使用在ie9种需要把这些元素转换为块级元素（在IE9中这些标签被当做行内标签，设置大小不生效）移动端更喜欢使用这些标签...
2019-11-06 10:24:05
968
2
原创 溢出的文字省略号显示
首先设置white-space,强制一行显示.white-space:normal ；默认处理方式white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。超出的部分隐藏 overflow: hidden;text-overflow 文字溢出设置或检索是否使用一个省略标记（…）标示对象内文本的溢出text-ov...
2019-10-25 20:00:49
221
原创 vertical-align垂直对齐
有宽度的块级元素居中对齐是margin:0 auto;文字对齐是text-align:center;vertical-align垂直对齐,只针对行内元素或者行内块元素.通过vertical-align 控制图片和文字的垂直关系,默认的图片会和文字基线对齐.vertical-align:baseline 基线|| top 顶部||middle垂直居中||bottom底部应用场景,图片...
2019-10-25 19:57:03
255
原创 轮廓线--禁止文本域拖拽
轮廓线是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline: outline-color ||outline-style||outline-width常用的写法:outline:0;或者 outline:none; 来清除轮廓线样式.禁止文本域拖拽开发过程中,一般文本域都是禁止拖拽的.resize:none;...
2019-10-25 19:51:28
370
原创 鼠标样式cursor
设置鼠标指针采用何种系统预定义的光标图形.属性值描述default默认pointer小手move移动text文本not-allowed禁止
2019-10-25 19:46:14
91
原创 元素的显示与隐藏
1. 使用display显示display:none 隐藏对象.display:block 除了转换层块级元素,同时还有显示元素的意思.特点: 隐藏后不再保留位置,多用于下拉菜单.2. visibility可见性visibility:visible 对象可视visibility:hidden 对象隐藏特点:隐藏后保留位置(停薪留职),3. overflow 溢出...
2019-10-25 19:43:43
248
原创 使用定位position实现元素居中
在使用绝对定位时要想实现水平居中，可以按照下图的方法：left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -100px;：让盒子向左移动自身宽度的一半。垂直居中同上...
2019-10-24 09:18:29
4298
2
原创 定位(position)
为什么使用定位让子元素移动，吸引用户的眼球。当我们滚动窗口的时候，盒子是固定屏幕某个位置的将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面定位 = 定位模式 + 边偏移(属性定义元素的边偏移：（方位名词）)静态定位(static)静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。静态定位 按照标准流特性...
2019-10-24 09:16:14
131
原创 使用Chrome的开发者工具
基本的结构布局是左边html 右边是 csschrome调试数值可以鼠标点击后面的数值， 按下键盘 上箭头 是 调大 数值， 下箭头是 调小数值Chrome提示的常见布局错误css无显示声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的tml 结构不匹配(重要)通过颜色判断盒子蓝色是 盒子的 宽度高度 青色...
2019-10-24 09:04:34
113
原创 清除浮动
为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。...
2019-10-21 15:04:11
73
原创 浮动(float)
CSS 布局的三种机制CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等浮动让盒子从普通流...
2019-10-21 14:59:14
129
原创 圆角边框和盒子阴影
圆角边框border-radius:length; 其中每一个值可以为 数值或百分比的形式。技巧： 让一个正方形 变成圆圈盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；- 前两个属性是必须写的。其余的可以省略。- 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 ...
2019-10-21 14:51:29
141
原创 嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者解决方案：可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。...
2019-10-21 14:43:06
762
原创 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：尽量...
2019-10-21 14:41:04
402
2
原创 盒子模型（Box Model）
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cells...
2019-10-21 14:39:15
1636
1
原创 CSS 三大特性
CSS层叠性概念：所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠CSS继承性概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将...
2019-10-21 14:27:36
130
原创 CSS 背景(background)
背景颜色(color)background-color:颜色值; 默认的值是 transparent 透明的背景图片(image)background-image : none | url (url) 小技巧： 提倡 背景图片后面的地址，url不要加引号。背景平铺（repeat）background-repeat : repeat 背景图像在纵向和横向上平铺（默认的） |...
2019-10-21 14:11:47
700
原创 标签显示模式（display）
什么是标签显示模式标签以什么样方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。块级元素(block-level)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li&...
2019-10-21 13:45:32
222
原创 css复合选择器
后代选择器概念： 后代选择器又称为包含选择器作用： 用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。.class h3{color:red;font-size:16px;}子元素选择器- 作用： 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。- 其写法就是把父级标签写在前面，子级标...
2019-10-21 13:39:24
147
原创 CSS字体样式属性
font字体1. font-size:大小p {font-size:20px; } 单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。2. font-family:字体p{ font-family:“微软雅黑”;}网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑...
2019-10-20 19:46:15
273
原创 CSS选择器
CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来CSS基础选择器标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用： 标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签优点： 是能快速为页面中同类型的标签统一样式缺点： 不能设计差异化样式。类选择器.类名 { ...
2019-10-20 19:11:09
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人