前端
远方_ry
我们还年轻,长长的人生可以受一点风浪!
展开
-
better-scroll相应鼠标滚轮滚动
在PC端使用BScroll时无法响应鼠标的滚轮事件,只需要配置mouseWheel即可原创 2020-07-10 11:12:08 · 1998 阅读 · 2 评论 -
Web Storage学习(一)
Web Storage提供了存储器的缓存机制,使得浏览器可以安全地存储键值对。基本概念:1. Storage类型:提供了访问特定域名下的会话存储或本地存储的功能。方法:clear(): 删除所有项。getItem(name): 根据指定的name获取对应的值。setItem(name,value):为指定的name设置相应的值。removeItem(name):删除name对应的...原创 2019-10-14 23:51:25 · 169 阅读 · 0 评论 -
CSS单位
1.px:绝对单位,页面按照精确像素展示2.em:相对单位,相对于当前元素大小来计算3.rem:相对单位,相对于<html>元素大小来计算4.vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%5.vh:viewpoint height,视窗高度,1vh等于视窗高度的1%6.vmin:vw和vh中的较小者7.vmax:vw和vh中的较大者...原创 2019-08-14 11:09:57 · 90 阅读 · 0 评论 -
左侧定宽,右侧自适应两栏布局
CSS两栏布局(左侧定宽,右侧自适应)方法一:float + margin-left/*css*/.left1{ width: 100px; background-color: red; float:left;}.right1{ background-color: green; margin-left: 100px;}//HTML&l...原创 2019-08-07 18:11:12 · 129 阅读 · 0 评论 -
JS中的数组去重
var arr = [1,2,5,8,6,3,2,1];//1.运用set结构特点:存储的数据没有重复的,结果为对象,再用Array.from()转换成数组var set = new Set(arr);console.log([...new Set(arr)]);//[1, 2, 5, 8, 6, 3]console.log(Array.from(set));//[1, 2, 5, ...原创 2019-08-20 11:07:23 · 130 阅读 · 0 评论 -
把一个URL解析成一个对象
第一种方法:原生JSvar url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";var str = url.split("?")[1];var item = str.split("&");var obj = {};for(var i=0;i<item.length;i++){ var...原创 2019-08-20 19:21:44 · 767 阅读 · 0 评论 -
let,const,var的区别
let是ES6新规定的一种声明变量的方法,用来取代ES5中var命令,消除var声明变量的不合理,不严谨之处。const用来声明常量。let使用规则1.let声明的变量不存在变量提升的问题,必须遵循 "先声明,后使用"否则会报错。但用var声明不会出现报错。2.let声明的变量,存在块级作用域。let声明的变量只在所声明的代码块内有效,块级作用域{},包括if和for3.let不允...原创 2019-08-20 19:24:15 · 3492 阅读 · 0 评论 -
JS中数组的方法
1.创建方法var arr = [1,2,3];//字面量 var arr = new Array(1,2,3)//构造函数实例化2.join()数组转字符串arr.join('')//以''里的分隔符链接成字符串 console.log(arr.join(''));//1233.push(),pop(),shift()和unshift()添加和删除arr.push(4)...原创 2019-08-16 21:19:55 · 79 阅读 · 0 评论 -
JS中的数据类型
一.数据类型1.原始数据类型:Null,Undefined,Boolean,String,Number2.引用数据类型:Object,Array,Function二.面试常考1.Null和Undefined的区别Undefined:未定义,表示一个变量不含值,非人为因素Null:空对象,用来清空变量,人为因素相同点:if判断中都将会被转换成false不同点:...原创 2019-08-16 21:27:06 · 102 阅读 · 0 评论 -
CSS实现多种图案
1.圆形原理:上下左右都是圆角且为宽高一半 .circle{ width: 100px; height: 100px; background-color: red; border-radius: 50%; }2.椭圆形原理:块级元素为宽高比为2:1的矩形,border-radius为宽度的一半除以高...原创 2019-08-13 10:35:32 · 217 阅读 · 0 评论 -
DOM0级事件和DOM2级事件
DOM0级事件分为两种,一种是在标签内添加执行语句:<button id = "button1" onclick="console.log('123')">点击</button>一种是定义执行函数<button id="button1">点击</button><script>var btn = document....原创 2019-08-13 19:55:45 · 298 阅读 · 0 评论 -
元素常见的居中方式
1.行内文字居中,未设置高度,定位,浮动的情况下失效 text-align:center,水平居中 line-height: 行高,垂直居中2.表格内元素的居中 text-align:center,水平居中 vertical-align:middle,垂直居中3.元素水平居中,父元素和居中元素设置宽 使用外边距:margin:0 auto;...原创 2019-08-06 15:23:30 · 121 阅读 · 0 评论 -
选择器的优先级
选择器的类型1. * (通配符选择器):获取所有子元素2. 类型选择器(标签名选择器):获取所有该种元素3. 类名选择器 (.class):获取所有具有该种类名的元素4. id选择器(#id):获取所有具有该id值得元素5. 组合选择器:选择器之间用空格隔开6. 后代选择器:从父元素一直到子元素选择器,如#div ul li7. 群组选择器:具有相同样式的选择器,用逗号...原创 2019-08-06 14:14:35 · 272 阅读 · 0 评论 -
!Doctype的作用,严格模式和混杂模式的区别,以及如何触发两种模式
!Doctype的作用1.<!DOCTYPE>声明叫做文档类型DTD,它的作用就是用来标识浏览器使用哪种文档类型,让浏览器知道以何种方式解析文档。2.必须位于HTML文档的第一行,处于<html>标签之前,但是不属于HTML文档标签。3.声明文档的解析类型(document.compatMode),是为了避免浏览器的怪异模式。严格模式和混杂模式的区别,以及如...原创 2019-08-03 14:26:26 · 468 阅读 · 0 评论 -
常见元素的属性特点
块级元素:独占一行;不可解析换行符;可设置宽高和上下边距;不设置宽度的情况下和父元素保持一致;<p><div><h1>~<h6><ol><ul><strong>行内元素:多个元素可以一行显示;解析换行符;元素的宽高和上下边距不可设置;不设置宽度的情况下,默认为内容的宽度不可改变;<span&g...原创 2019-07-25 23:01:48 · 382 阅读 · 0 评论 -
DOM结构(DOM树)
DOM文档类型DOM(Document Object Model)主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树,通过节点的操作,来实现对文档内容进行增删改查。1.DOM(Document Object Model):文档对象模型文档:HTML文档 文档对象:页面中的元素 文档对象模型:对象被组织在一个树形结构中,用来表示文档中对象的标准模型就叫DO...原创 2019-08-03 15:57:39 · 7104 阅读 · 0 评论 -
DOM操作影响页面的性能(重排重绘)
1.页面的渲染过程(1)Javascript:通过JS实现动画效果或者操作DOM实现交互(2)Style:计算样式,如果样式有改变将重新计算,并返回给DOM(3)Layout:根据DOM的样式,重新布局(重排)(4)Paint:在多个渲染层上,对新的布局重新渲染(重绘)(5)Composite:将绘制好的多个渲染层合并,显示到页面上在页面生成时,至少进行一次布局和渲染,...原创 2019-08-03 21:11:00 · 3849 阅读 · 1 评论 -
标签嵌套规则,以及HTML转义
1.标签嵌套规则有些标签是固定的嵌套规则,比如ul包含li,ol包含里,dl包含dd和dt 块级元素与块级元素平级,内联元素与内联元素平级 块级元素可以包含内联元素和某些块元素,内联元素不可以包含块级元素只能包含其他内联元素 有几个特殊的元素只能包含内联元素,不能包含块级元素。例如:h1~h6,p,dt 块级元素不能放在p标签 li标签可以包含div标签,因为li和div标签都是装载...原创 2019-08-05 10:28:25 · 219 阅读 · 0 评论 -
float(对块级,行内,内联块元素的影响),如何清除浮动
浮动的影响浮动会使块级元素和内联元素具有内联块元素的特点,块元素可以一行显示,内联元素可以设置宽高。使得元素脱离文档流,按照浮动的方向移动,遇到父级边界或者相邻浮动元素停住:float:left / right / none,子元素脱离文档流,结果会使父元素高度崩塌清除浮动1.为父元素设置高度 优点:兼容性好 缺点:高度未知,可能会导致子元素换行2.ov...原创 2019-08-05 15:48:32 · 1261 阅读 · 0 评论 -
定位详解
position的六种属性及特点1.static:无定位元素出现在正常流中 没有设置定位方式时,默认为static,按照文档的流式定位,将元素放在一个合适的位置 在不同的分辨率下采用流式定位能够很好地自适应,去得相对较好的布局效果流式布局就是页面元素的宽度按照屏幕的分辨率进行调整,而页面的整体布局不变2.inherit:继承父元素3.relative:相对定位4.a...原创 2019-08-05 17:18:52 · 112 阅读 · 0 评论 -
左右定宽,中间自适应三栏布局
三栏布局(左右定宽,中间自适应)方法一:圣杯布局.box1{ padding: 0 150px 0 200px;}.main1,.left1,.right1{ float: left; height: 100px; position: relative;}.main1{ width: 100%; background-color: ...原创 2019-08-07 22:36:57 · 103 阅读 · 0 评论 -
CSS中display为flex和inline-flex的区别
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。display: flex 将对象作为弹性伸缩盒显示display: inline-flex 将对象作为内联块级弹性伸缩盒显示flex效果:没有为父元素设置宽度,所以父元素的宽度为100%,而高度则是由子元素撑开,既高...原创 2019-06-20 10:22:34 · 5203 阅读 · 0 评论