前端
一个柠檬
成为更好的自己
展开
-
前端vue使用WebViewJavascriptBridge和原生交互问题记录(记录第二次调用失败问题:代码中已解决)
// util/bridge.jsfunction setupWebViewJavascriptBridge (name, data, callback) { // 这里若是bridge存在则直接调用native方法并且return if (window.bridge) { window.bridge.callHandler(name, data, callback) ...原创 2019-11-14 11:18:08 · 3218 阅读 · 1 评论 -
样式的层叠
元素声明的样式的权重高于浏览器默认样式浏览器默认样式的权重高于继承的样式层叠样式表:CSS:Cascading Style Sheets属性通用的容易被继承如:font,color等等原创 2017-10-31 10:37:15 · 247 阅读 · 0 评论 -
学会选择器的搭配
后代:.block p { }子元素:.block > p {}后面的兄弟:p ~ div {}紧跟其后的一个兄弟: p + div {}原创 2017-10-30 10:33:31 · 277 阅读 · 0 评论 -
内容超出后显示省略号
text-overflow:ellipsis;//内容超出后显示为省略号 overflow:hidden;//隐藏内容超出父元素高度部分 white-space:nowrap;//规定段落中的文本不进行换行原创 2017-11-01 21:22:14 · 325 阅读 · 0 评论 -
用渐变线做间断线
background-image: linear-gradient(to right, #fb3 40%, #58a 0,#58a 60%, #fb3 0);原创 2017-11-12 13:26:19 · 571 阅读 · 0 评论 -
flexbox 剩余空间分配规则
flexbox 剩余空间分配规则前面我们学习到了 flexbox 布局。通过使用 flexbox 布局,我们可以更轻松实现以往很难实现的页面布局。本文主要讲解 flexbox 布局是如何去分配和计算布局剩余空间的。(本文阅读前要求你对 flexbox 已经有了初步的认知,如果不是很了解,建议先学习前面视频内容。)基础概念为了更好地理解本文内容,我们需要先了解下面一些基础概念转载 2017-11-02 21:38:21 · 21337 阅读 · 2 评论 -
元素层级
原创 2017-11-02 22:12:12 · 273 阅读 · 0 评论 -
深入了解 z-index
层叠上下文上面说到,z-index 默认值 auto 数值上等于0,那设置了 z-index:0 和 默认的 z-index:auto; 有没有区别呢? 答案是有区别的。区别在于设置了 z-index 属性为整数值(包括0)的元素,自身会创建一个层叠上下文。而创建一个层叠上下文之后,其子元素的层叠顺序就相对于父元素计算,不会与外部元素比较。这样说比较抽象,我们来看个例子。class转载 2017-11-02 22:29:17 · 238 阅读 · 0 评论 -
HTML知识体系图谱
转载 2017-11-05 11:33:40 · 790 阅读 · 0 评论 -
非替换元素和替换元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。比如:div 与span的方式不一样。什么是替换元素与非替换元素替换元素:替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如: type="text" 的是,这是一个文本输入框,换一个其他的时转载 2017-11-05 11:37:15 · 175 阅读 · 0 评论 -
JS中const,var,let的区别
今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章。主要内容是:js中三种定义变量的方式const, var, let的区别。在es5中我们都知道,在全局定义变量其实就是等于在全局对象设置属性,全局对象属性与全局变量是等价的。全局变量的赋值和全局属性的赋值是同一件事在es6中修改了这一规定,使用let和const和class声明的全局变量与全局对象不等价1.const定义...转载 2017-11-29 10:06:33 · 286 阅读 · 0 评论 -
box-shadow制作边框模糊
不用border,直接用box-shadow的阴影效果来做边框,然后再用模糊做泛出,原创 2017-11-15 14:23:27 · 1679 阅读 · 0 评论 -
变量(函数)的声明会被提升到当前作用域的最前面
通过 typeof 我们可以看到 hi 现在是个 undefined 了,这是为什么呢?这是因为 JavaScript 解释器中存在一种变量声明被提升(hoisting)的机制,也就是说变量(函数)的声明会被提升到当前作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。这样上面的例子在执行的时候就成了这样的:这样是不是一下就恍然大悟了。所以在实际开原创 2017-11-15 15:38:09 · 656 阅读 · 0 评论 -
linear-gradient是image属性
比如background-image:linear-gradient();border-image:linear原创 2017-11-21 10:23:56 · 681 阅读 · 0 评论 -
document.querySelector以及document.querySelectorAll中的转义符
转载 2017-12-01 00:29:44 · 489 阅读 · 0 评论 -
JavaScript HTMLcollection与数组的区别说明及转化
我们在获取一组页面元素时常会用到getElementsByName()或是getElementsByTagName()方法。其中getElementsByName(name)方法是获取页面中所有具有name属性的元素,但这个方法在IE与标准浏览器中所取到的内容不一样。在IE中getElementsByName(name)方法所取到的元素是其本身就自带有name属性也就是form表单中所列出转载 2017-11-29 10:10:04 · 7847 阅读 · 0 评论 -
模块占满首屏
height:100vh;原创 2017-11-22 11:00:30 · 216 阅读 · 0 评论 -
href和src的差别
虽然一直在用这两个属性,但是一直没有具体的去区分和了解这两个属性的区别,今天就来看看 href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系 src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。 src是source的缩写,是指向外部转载 2017-11-22 19:43:37 · 267 阅读 · 0 评论 -
JavaScript获取节点类型、节点名称和节点值
获得节点类型:nodeObject.nodeType获取节点名称的语法:元素节点HTML标签的名称(大写)属性节点属性的名称文本节点它的值永远是#text文档节点它的值永远是#document获取节点值的语法:nodeObject.nodeValue转载 2017-12-02 10:58:12 · 4012 阅读 · 0 评论 -
property和attribute的区别
1,公认的attribute(特性)会映射到property(属性);2.读写方式不同;所以在读特别的值,如class,style等会有大大的不同getAttribute和setAttribute;原创 2017-11-24 09:54:08 · 217 阅读 · 0 评论 -
学会提交代码到gitlab线上仓库。
1.切换git bash的目录:找到文件夹右键有git bash here;2.登陆: git config --global user.email "you@example.com"git config --global user.name "Your Name"这个email和name后面有个空格要注意。3.git status:查看仓库的状态。原创 2017-10-29 20:11:45 · 7792 阅读 · 0 评论 -
事件类型 最后说下,判断一个前端专业不专业,就问下他开发界面的时候有没有考虑过键盘事件。
https://developer.mozilla.org/zh-CN/docs/Web/Events转载 2017-11-25 10:54:26 · 325 阅读 · 0 评论 -
彻底理解js中this的指向,不必硬背。
http://www.cnblogs.com/pssp/p/5216085.html转载 2017-12-16 15:06:49 · 593 阅读 · 0 评论 -
设置一类里面的非第一个样式
.info-item:not(:first-child) { /* 设置非第一个的上外边距 */ margin-top:10px;原创 2018-03-08 14:37:27 · 336 阅读 · 0 评论 -
伪元素是加在元素内容后面而不是元素后面
伪元素是加在元素内容后面而不是元素后面原创 2018-03-08 22:42:33 · 1043 阅读 · 0 评论 -
css中如何做到容器按比例缩放
核心思想为:提供一个容器,设置容器的高度为0,再设置padding-bottom为56.25%(因为padding的百分比是按照容器宽度计算的,所以由padding来撑开容器高度,而不是height,保证了容器的宽高比例),最后设置视频绝对定位,其宽高为容器的100%.wrap{ height: 0; padding-bottom: 56.25%; /* 16:9 */转载 2018-03-10 15:19:11 · 768 阅读 · 0 评论 -
CSS flex如何均匀排列子元素
高级justify-content: space-between;法直接使用list的before和after伪元素参与布局 ul class="share-list"> li class="share-item">li> li class="share-item">li> li class="share-item">li> ul>转载 2018-03-10 15:54:02 · 17026 阅读 · 0 评论 -
git后修改了本地文件,如何重新还原未修改状态
单个文件 : git checkout + 文件名整个目录 :git checkout .(这个点要加上的)原创 2018-03-05 12:59:41 · 12036 阅读 · 0 评论 -
面试官:三次握手,四次挥手
三次握手第一次第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。第二次第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;第三次第三次握手:...原创 2018-03-18 20:24:06 · 766 阅读 · 0 评论 -
全面解析JavaScript中“&&”和“||”操作符(总结篇)
这篇文章主要介绍了全面解析JavaScript中“&&”和“||”操作符(总结篇)的相关资料,需要的朋友可以参考下1、||(逻辑或),从字面上来说,只有前后都是false的时候才返回false,否则返回true。alert(true||false); // truealert(false||true); // truealert(true||true); //转载 2018-03-14 17:14:04 · 1111 阅读 · 0 评论 -
Windows Bash 查找端口占用和杀死进程
第一步:找到端口对应的进程 PID方法一:列出所有进程netstat -ano然后找到(占用了某个端口的)进程及其对应的 PID(最后一列)方法二:直接根据端口找进程netstat -ano|findstr "8080"最后一列的数字就是 PID 了。第二步:杀死进程假设占用 8080 端口的进程 PID 为 1234TSKILL 1234TSKILL转载 2018-04-20 22:09:44 · 1052 阅读 · 0 评论 -
status 和 state的区别
state所指的状态,一般都是有限的、可列举的,status则是不可确定的。比如readyState -- 就那么四五种值statusText -- 描述性的文字,可以任意onreadystatechange -- 那么四五种值之间发生变化window.status -- 描述性的文字,可以任意来个形象的比方,你体重多少公斤,属于status,但说你体重属于偏瘦、正常还是偏胖,那就是state....原创 2018-05-17 22:21:28 · 4121 阅读 · 0 评论 -
npm --save-dev --save 的区别
npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install--save另一个是 npm install –save-dev,他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则添加到 package.json 文件 devDe...转载 2018-05-13 23:32:57 · 130 阅读 · 0 评论 -
html上传文件类型限制之accept的全部属性值
在上传文件的时候,需要限制指定的文件类型。 [html] view plain copy<input type="file" accept="image/*" /> accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。================================================================...转载 2018-06-22 16:53:42 · 11405 阅读 · 0 评论 -
vue组件is特性
有些元素,比如 ul 里面只能直接包含 li元素,像这样:<ul> <li></li></ul>而不能:<ul> <your-component></ul>这样就不能复用your-component这个组件了,如果要达到我们的目的,我们就要使用is特性像这样:<ul>转载 2018-06-29 15:36:50 · 426 阅读 · 0 评论 -
死链接的含义
转载 2018-06-30 14:53:59 · 523 阅读 · 0 评论 -
JSON的两个方法
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。...原创 2018-06-30 15:02:55 · 1054 阅读 · 0 评论 -
live-server
修改文件浏览器自动刷新,这里可以使用 live-server 很简单就能启动一个看起来很专业的本地服务首先npm live-server -g在项目目录下live-server原创 2018-07-16 11:47:57 · 258 阅读 · 0 评论 -
HTML5新增标签
HTML5新增标签:概要1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代HTML标准)2. HTML5 一些新的规则: 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记(新增了一些语义化的标签: 在HTML4当中,很明显的一个形象就是用DIV来进行任...转载 2018-07-16 22:20:32 · 252 阅读 · 0 评论 -
vue-rousource的使用
1.需要安装vue-resource模块,注意加上 --savenpm install vue-resource --save / cnpm install vue-resource --save2.main.js引入 vue-resourceimport VueResource from 'vue-resource';3.Vue.use(VueResource);4.在组件里面直接使用this....原创 2018-07-10 20:08:04 · 777 阅读 · 0 评论