前端
benben0729
职业为猿的汪,爱好象、鼠、蛇、蛙
展开
-
css清除浮动的方法
为什么使用浮动?为了实现一些图文环绕的样式效果,和一些布局问题。为什么要清除浮动?浮动的框可以左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”。即为何我们需要清楚浮动。`...原创 2018-09-02 20:19:26 · 153 阅读 · 0 评论 -
css布局-float与postion
今天切页面,想要做一个‘地址列表’居中的效果首先想到的是前面icon使用浮动float,然后地址列表水平居中,但是效果却并不是想要的float浮动,还是会占据空间。后选择使用定位,定位不占空间将icon使用absolute绝对定位到该位置,地址列表水平居中即可。抽象代码如下<style> #top{padding:0 32px;height:88p...原创 2018-08-26 14:17:59 · 176 阅读 · 0 评论 -
export、import、export default区别
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块使用范围require: node 和 es6 都支持的引入export / import : 只有es6 支持的导出引入module.exports / exports: 只有 node 支持的导出export & import// d...原创 2018-11-12 13:15:33 · 162 阅读 · 0 评论 -
javascript 跨域请求
post方法一服务端header('Access-Control-Allow-Origin:*');$data = json_encode(array("id" => "1", "name" => "tom"));echo $data;前端$.ajax({ type: "POST", url: "http://127.0.0.1/~che原创 2018-10-28 15:36:00 · 108 阅读 · 0 评论 -
css text-overflow属性
text-overflow属性规定当文本溢出包含元素时发生的事情。text-overflow: clip|ellipsis|string; clip 修剪文本。ellipsis 显示省略符号来代表被修剪的文本string 使用给定的字符串来代表被修剪的文本。<div style="width:200px; white-space:nowrap;overflow:hi...原创 2018-09-28 19:04:12 · 333 阅读 · 0 评论 -
Css 图片处理
图片等比例缩放img{ max-width:100%; max-height:100%;}背景图#背景图覆盖div{ background:url(img_flwr.gif); background-size:80px 60px; #background-size:cover; background-repeat:no-repe...原创 2018-09-28 19:01:22 · 287 阅读 · 0 评论 -
Css 权重
权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1著作权归作者所有。权重相同,以最后出现的选择器为最后规则不同的权重,权重值高者生效...原创 2018-09-28 19:00:02 · 104 阅读 · 0 评论 -
Css flex属性
flex布局注意:设为flex布局之后,子元素的float,clear和vertical-align属性将会失效基本概念名称 描述 flex container 容器(采用flex布局的元素,举例div1) flex item 容器内的成员(项目,举例div1下的标签) main axis 水平轴 cross axis 垂直交叉轴(纵轴)...原创 2018-09-28 18:58:00 · 949 阅读 · 0 评论 -
css 总结 -display属性
display是前端开发中最常用的属性之一。其主要取值有:none 元素不显示block 块级元素,inline 行级元素inline-block 行内块元素(需要注意的是如果是多个块设置为inline-block,块与块之间会有缝隙,这是空白符造成的,我们只需要在其父元素设置font-size:0即可)flex 弹性布局,align-items justify-content d...原创 2018-09-24 09:30:21 · 209 阅读 · 0 评论 -
css总结 - display
css原创 2018-09-24 09:10:59 · 156 阅读 · 0 评论 -
css总结 -水平居中
居中是我们最常用的布局方式#方法1#父元素指定height和width 子元素margin:0 auto; text-align:center;<div style="height:100px;width100px"> <div style="margin:0px auto;text-align:center">这是水平居中方式一</div>...原创 2018-09-24 09:09:43 · 155 阅读 · 0 评论 -
css总结 -边框的隐藏或去除
在进行页面布局时,边框是我们最常用的的属性之一我们可以通过边框查看元素位置大小等但是有时我们却又不希望看到这些边框,一些元素的默认边框,比如input标签等我们可以选择隐藏或者去除去除边框使用border:none;隐藏边框:border:hidden,但是会占空间在进行布局时需要处理去除input点击边框:outline:none...原创 2018-08-30 10:24:24 · 17350 阅读 · 0 评论 -
css总结 -使用display:inline-block,出现元素高度错位
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致,发生错位。<style>.left{ display:inline-block; height:110px; width:110px;}.right{display:inline-block;height:110px;width:110px;}</style>...原创 2018-08-30 10:15:17 · 10013 阅读 · 3 评论 -
cryptoJS 安装与使用
在线文档https://github.com/brix/crypto-js/blob/master/docs/QuickStartGuide.wiki#AES安装npm install crypto-js#安装之后看到node_modules目录直接放到public目录下使用#主要引入以下这个文件crypto-js/crypto-js.js示例#js端function ...原创 2018-10-28 15:40:39 · 44769 阅读 · 0 评论 -
layui框架安装与使用
安装#使用npm方式安装npm install layui-src#主要要引入以下这两个文件./layui/css/layui.css./layui/layui.js //提示:如果是采用非模块化方式此处可换成:./layui/layui.all.js在线文档layui使用说明文档...原创 2018-10-28 15:42:21 · 8915 阅读 · 0 评论 -
javascript innerHTML与innertext与value区别
innerHTML:innerHTML&nbsp;浏览器会将inneHTML后面的内容作为html来解析。document.getElementById("myspan").innerHTML="&lt;a&nbsp;href='http://www.sina.com'&gt;到新浪&lt;/a&gt;&nbsp;"原创 2018-10-28 15:31:53 · 511 阅读 · 0 评论 -
伪元素
::before/:before:before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。HTML:&lt;h1&gt;World&lt;/h1&gt;CSS:h1:before { content: "Hello ";}::after/:after:after在被元素后插入内容,其用法和特性与:before相似。...原创 2019-02-21 13:33:05 · 177 阅读 · 0 评论 -
跨域资源共享 CORS 详解
跨域资源共享 CORS 详解CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需...转载 2019-02-25 14:16:28 · 159 阅读 · 0 评论 -
前端如何配合服务端进行 CORS 跨域
最近正在用 vue.js + vuex + axios 开发一个后台管理的项目。由于服务端的接口地址与 web 的访问不在同一个域里面,所以必须要处理跨域的问题,通过调研跨域的方法,最终决定使用目前比较流行的 CORS 来处理跨域 ,以下介绍在使用 cors 的时候遇到的那些坑,以及处理方法。 现在所有的浏览器基本上都支持 CORS(IE需要10以上),所以只需要服务器实现 CORS 的接...转载 2019-02-25 14:15:40 · 3078 阅读 · 0 评论 -
text-shadow、box-shadow
box-shadow语法box-shadow: h-shadow v-shadow blur spread color inset;h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊半径spread 可选。阴影的尺寸。color 可选。阴影的颜色。请参阅 CSS 颜色值。inset 可选。将外部阴影 (outse...原创 2019-02-19 16:32:06 · 212 阅读 · 0 评论 -
box-sizing
盒子模型(外层的margin只是为了理解)盒子的宽度 = padding2 +border2+width盒子的高度 = padding2+border2+width这样我们每次在设置一个盒子的时候都需要去计算padding、border。并不直观,box-sizing 就解决了这个问题box-Sizing语法:box-sizing: content-box | border-box | ...原创 2019-02-19 16:31:27 · 222 阅读 · 0 评论 -
transform与transition
transform倾斜#顺时针旋转7°div.rotate_left{ float:left; transform:rotate(7deg);}transition 平滑过渡#语法transition: property duration timing-function delay;property:属性duration :时间#举例#当鼠标放到div 宽度由200p...原创 2019-02-19 16:29:15 · 660 阅读 · 0 评论 -
wepy项目中使用async await
进入项目根目录,安装runtime包npm install wepy-async-function --save修改wepy.config.js加入runtime配置 babel: { "presets": [ "env" ], "plugins": [ ...原创 2019-02-15 09:35:26 · 539 阅读 · 0 评论 -
async与await 关键词
asyncasync的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。其返回值是个promise对象async function timeout() { return 'hello world'}timeout().then(result => { console....原创 2019-02-15 09:31:12 · 216 阅读 · 0 评论 -
背景透明
方法css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)示例<t...原创 2019-02-01 17:32:56 · 184 阅读 · 0 评论 -
js、css外部文件的相对路径问题
如果js、css外部文件有使用到相对路径时,需要注意其相对路径的基准是不一样的。比如说,在index.html中引用到了外部的js和css文件,这两个文件都通过相对路径引用了某一张图片;这些文件所在的目录如下:.├── js| └── index.js├── css| └── index.css├── images| └── bg.jpg└── index.html...原创 2019-01-31 12:57:39 · 231 阅读 · 0 评论 -
css总结 -垂直居中
方法2父元素display:flex; 子元素align-self:center;方法3,也是使用flexdisplay:flex;align-items:center;方法4,表格居中的思想父元素 display:table; 子元素 display:table-cell;vertical-align:middle;方法5:单行文本height:100px...原创 2018-08-24 13:37:52 · 147 阅读 · 0 评论 -
html总结 - a标签空连接
在进行切页面或者说页面设计时,a标签会经常使用到,href属性值通常需要给一个空连接1、<a href="###"></a>2、<a href="javascript:void(0)"></a>3、<a href="javascript:;"></a>注意:不要使原创 2018-08-26 16:39:05 · 8374 阅读 · 0 评论 -
HTML5 之 web存储
HTML5 web存储新增在客户端存储数据两种方法localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储localStorage方法,它存储的数据没有时间限制, 一周一月一年之后,数据都可以访问实例实例一实例二sessionStorage方法,针对session进行存储,当用户关闭浏览器串口后,数据会删除实例一实例二注意:sessionSto...原创 2018-07-07 21:03:28 · 130 阅读 · 0 评论 -
HTML5 属性视频video 音频audio
HTML5视频新增video标签,有两种用法吧,一种是直接在video标签中指定视频地址,一种是在子元素<source>标签中指定<video src="movie.ogg" width="320" height="240" controls=“controls">Your browser does not support the video tag.</video&a原创 2018-07-07 21:01:23 · 998 阅读 · 2 评论 -
常见HTTP状态码
一些常见的状态码为:200 - 服务器成功返回网页301 永久重定向302 临时重定向403 禁止访问404 - 请求的网页不存在500 服务端错误503 - 服务不可用1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 (继续) 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换...原创 2018-07-25 10:22:54 · 151 阅读 · 0 评论 -
js中遍历数组对象的几种方式
第一种:最直接明了的方法for(var i=0;i<arr.length;i++) //TODO Something第二种:使用for...infor (var item in arr) //TODO Something第三种: 使用for ...of 这个需要ES6支持for (let item of arr) //TODO Something...原创 2018-07-07 10:06:05 · 17666 阅读 · 0 评论 -
事件对象和target事件属性
事件对象什么是事件对象呢?当我们触发一个事件时,便会产生一个事件对象,这个对象中包含着这个事件的相关信息,包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时,浏览器通过函数传递过来的。input.onclick = function (evt) { //接受 event 对象,名称不一定非要 event alert(evt); //MouseEvent,...原创 2018-07-09 16:34:23 · 1750 阅读 · 0 评论 -
javascript之offsetHeight/offsetWidth
element.offsetHeight(element.offsetWidth) 是一个只读属性,它返回了该元素的像素高度,包含了边框和内边距(垂直方向),并且返回的是一个整数。如果存在且渲染的话,不包含:before或:after等伪类元素的高度。<!DOCTYPE html><html><head> <title></title>&...原创 2018-07-09 16:16:52 · 417 阅读 · 0 评论 -
javascript巩固
js你可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。有的节点操作可能需要整个页面加载完成才能执行,所以将js代码放在页面底部js代码要写在<scrip...原创 2018-06-20 17:18:02 · 207 阅读 · 0 评论 -
HTML 全局属性
原创 2018-07-08 22:56:33 · 227 阅读 · 0 评论 -
js基础
JavaScript简介JavaScript是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。JavaScript是嵌入到浏览器软件中的,只要有浏览器即可执行js程序。JavaScript是一种面向对象的程序语言。在程序中,对象是由“属性”和“方法”构成。在现实中,男女朋友就是一个“对象”,一个“物体”就是“对象”。注意,JS中的对象只要会用就可以,不需要我们自己开发。跨平台:JS程序可...原创 2018-05-17 19:37:17 · 1289 阅读 · 0 评论 -
HTML基础
html标记不区分大小写 html标记属性可有可无,有的标记没有属性,比如html\head\title等。 双边标记在开始与结束之间,单边标记没有内容 标记之间可以嵌套,但是必须顺序嵌套 <meta http-equiv="content-type"content="text/html;charset=UTF-8" >高速浏览器如何翻译汉字,con...原创 2018-05-17 19:35:40 · 343 阅读 · 0 评论 -
javascript表单验证
用js写一个表单验证首先是HTML部分<div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width=&转载 2018-07-29 15:21:05 · 441 阅读 · 0 评论 -
javascript事件
Js事件: onload:当网页加载完成时,只能给<body>用 onclick:当点击时,所有标记都适用。 onscroll:当拖动滚动条时。 onmouseover:当鼠标放上时。 onmouseot:当鼠标移开时。 onsubmit:当提交表单时。 onreset:当重置表单时 onfocus:当获得焦点时,把光标定位到文本框中(主要用于表单验证)...原创 2018-07-29 15:25:22 · 229 阅读 · 0 评论