笔记
Codingwithlife
对人真诚,对事热忱,codeing...
展开
-
reflow(回流)和repaint(重绘)
reflow(回流)和repaint(重绘)简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html)reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(原创 2020-10-06 15:27:00 · 153 阅读 · 0 评论 -
CDN内容分发网络
https://mp.weixin.qq.com/s?src=11×tamp=1601170202&ver=2609&signature=nR717SwfIPvqw2WTG5-NqKur3MGwRHfOCmltnfXEgf3l8pdldOLD*4MGcotztRXQ75d7y0vFHA271nuFY5zANMOtEADC62vS9mSfwvxrXhRTCPi3LOtV20jfoCO9ce67&new=1原创 2020-09-27 09:59:26 · 106 阅读 · 0 评论 -
js正则表达式详细
1、正则表达式准备 —— (转义字符)2、正则表达式3、正则表达式的方法4、正则表达式原创 2020-08-05 19:20:05 · 910 阅读 · 2 评论 -
《温故》系列-----网页布局的细节问题
1.小米官网-搜索栏制作首先:设计图 今天我们主要做出搜索框以及光标停在搜索框弹出的搜索列表,最终实现效果如下:这是具体的html结构<form> <input type="" name="" placeholder="小米10 Pro"> <ul> <li>Redmi 9 五星高品质</li> <li>小米10</li> ...原创 2020-07-15 11:25:29 · 308 阅读 · 0 评论 -
js基础知识篇(1)补充-数组与对象以及js内置对象
1.数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。2.创建数组JS 中创建数组有两种方式(1) 利用 new 创建数组 var 数组名 = new Array() ;var arr = new Array(); // 创建一个新的空数组(2)利用数组字面量创建数组//1. 使用数组字面量方式创建空的数组var 数组名 = [];//2. 使用数组字面量方式创建带初始值的数组var 数组名 = ['佩奇'...原创 2020-07-15 12:47:54 · 739 阅读 · 1 评论 -
js闭包初理解
最近关于js闭包的文章看了好多,主要有两点认识:(1)闭包很重要:前端面试,必问闭包;(2)彻底把闭包搞清楚很不容易。但是我还是想写一下我对闭包的理解,不久之前,我写了函数预编译的文章https://blog.csdn.net/weixin_44164982/article/details/107314659介绍了函数执行期上下文的建立过程。如果有需要了解之前知识的朋友,可以先去看一下。这篇文章主要是通过三个问题实现对闭包的初步理解:question one:什么是闭包?闭包,就是有权访问其原创 2020-07-14 17:10:46 · 252 阅读 · 0 评论 -
理解js中的异常捕获处理机制
目录js中异常(exception)与捕获1、Error对象2、throw3、异常处理机制 (try…catch…finally)4、使用异常处理需要注意的问题js中异常(exception)与捕获代码在运行过程中得到的中间结果与预期的结果不一致,就是异常。一般运行环境会抛出一个提示对象,中断程序运行,这个就是异常机制。换句话说,就是在程序执行过程中,即使程序出错,也能保证不会异常中断的机制。其中包括Error对象、使用throw语句抛出异常、(try...catch....原创 2020-07-14 12:51:34 · 505 阅读 · 0 评论 -
理解预编译过程
预编译的四个步骤预编译四步曲1、创建AO对象(Activation Object)(执行期上下文:函数产生的存储空间库)2、找形参和变量声明,将变量和形参名作为AO属性名,值为undefined3、将实参值和形参统一4、在函数体里面找函数声明,值赋予函数体这里有个小细节:函数声明与函数表达式区别:function a(){} //这是函数声明var a=function a(){} //这是函数表达式具体的过程是这样://不同地方的 console.log(a);原创 2020-07-13 13:01:20 · 815 阅读 · 2 评论 -
js变量提升的深入理解
在深入学习javascript之前,我们必须彻底搞懂它的运行过程。js运行有三个步骤:1.先通篇扫描进行语法分析:这里有两种情况(1)低级语法错误:比如标点符号、单词拼写错误等,这种情况会直接报错,不执行任何代码;(2)逻辑错误:会执行,遇到有错代码处停止执行。2.预编译3.解释执行今天主要搞清楚预编译过程。、在理解预编译过程之前,必须先了解函数提升与变量提升函数提升和变量提升在当前作用域里,JavaScript代码执行之前,浏览器首先会默认的把所有带var和functi原创 2020-07-13 11:41:39 · 154 阅读 · 0 评论 -
js变量作用域链
1.全局变量与局部变量(1)全局变量全局作用域在页面打开时被创建,页面关闭时被销毁 最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的 在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用 全局作用域中声明的变量和函数会作为window对象的属性和方法保存 imply global暗示全局变量:即任何变量,如果变量未经声明就赋值,此变量就为全局对象所有。//变量未经声明赋值,为全局变量所有a= 123;var a=b=123;.原创 2020-07-13 10:23:37 · 330 阅读 · 0 评论 -
用sublime快捷键快速写css代码
一些常见的属性字符颜色:1.color:red;sublime中的快捷键是c,然后tabcolor属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制,不要着急,后几天讲。字号大小:2.font-size:12px;单位必须加,不加不行。font就是“字体”,size就是“尺寸”。px是“像素”。sublime中的快捷键是fos,然后tab背景颜色:sublime中的快捷键是bgc,然后tabbackground就是“背.原创 2020-07-13 09:20:51 · 501 阅读 · 0 评论 -
js基础知识篇(3)--三目运算、基本算法和函数使用的练习
1、三目运算符格式:条件?表达式1:表达式2如果条件为true,返回表达式1的结果 如果条件为false,返回表达式2的结果例如:var num1=prompt("请输入第一个数字:");var num2=prompt("请输入第二个数字:");var max =num1>num2?num1:num2;//如果num1>num2,max=num1,如果num1<num2则max取:后面=num2;document.write(max); 输出结果为...原创 2020-07-12 19:11:28 · 591 阅读 · 0 评论 -
JS基础总结篇(1)---js入门基础详细(语法,基本语句、变量、数据类型转换、流程控制)
1、JS组成2.第一个javascript程序2.1 程序书写的位置2.2 语法规则2.3 注释2.4 JS基本语句2、变量2.1 变量命名2.2 变量的定义和赋值2.3 变量的数据类型2.4 运算符2.5 变量格式转换3、js流程控制原创 2020-07-11 18:18:48 · 618 阅读 · 2 评论 -
CSS选择器与权重计算(详细)
在前端三大基础中,html负责结构,css负责样式,js负责行为。css写在head标签里面,容器style标签。先写选择器,然后写大括号,大括号里面是样式。常见的选择器类型有以下几种:1、标签选择器(无论嵌套多少层都能找到)就是用标签名来当做选择器。1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等2) 不管这个标签藏的多深,都能够被选择上。3) 选择的是所有的,而不是某一个。所以是共性,而不是特性。例如,大多数网站的a标签都设置了去掉了下划线的效..原创 2020-07-09 15:17:00 · 1015 阅读 · 1 评论 -
HTML总结篇(2)
HTML中的块级标签,行内标签,行内块标签块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!其中还有一种结合两种模式有点的显示模式:行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;行内标签:包含a、span、em、strong、b、i、u、label、br;特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行原创 2020-07-09 13:12:53 · 123 阅读 · 0 评论 -
列表标签使用时常见问题
ul无序列表常用来做菜单栏,列表项之间无顺序差别,ul默认排序前面有小黑圆点,但小黑圆点的list-style一般都要去掉,不能在需要小黑圆点的时候考虑用ul,标签的使用不能看样式,语义是最重要的ol有序列表列表项之间是有顺序的,type里面的内容是定义排序的类型,有字母,阿拉伯数字,罗马数字等,type可以取这些值"a",“A”,“Ⅰ”,“1”,“i”,还有排序类型,reversed="rrversed"是倒序排列,默认是正着排列,还有start=“n”,是规定从第n位开始排。自定义列表dd就.原创 2020-07-09 07:15:29 · 276 阅读 · 0 评论 -
hover失效的几种原因与z-index失效原因
今天检查自己写的小米官网,发现轮播图上的左右按钮的不知什么时候hover竟然失效了。然后检查了类名,样式,没发现问题。最后查阅了资料,发现常见的有以下原因:hover前加了空格或使用了中文冒号active,visited,hover,link之间的关系active < hover < visitied / link其意思就是active需定义在hover之后才能起作用,而hover需定义在visited和link之后才会起作用。当然,前提是它们同时存在的时候。就是我之前总结过的hove原创 2020-07-08 22:50:47 · 1830 阅读 · 4 评论 -
CSS hover 改变其他元素状态
在写网站的页面时,我发现很多网站都有展示企业的其他社交工作,例如下载APP的下载码,官方微信和微博等。这些图片的展示基本都是通过hover来实现的。例如:hover改变其他元素状态,可以分为两种情况:改变本身的子元素(最常见,好解决) 改变本身的兄弟元素(不常见)我通过一个例子解释一下这两种情况控制子元素时,我们直接用后代选择器 .class1{position: relative;margin-bottom: 200px;} .class1&...原创 2020-07-08 17:16:20 · 1776 阅读 · 0 评论 -
小米官网头部菜单栏需要注意的问题
观察了小米官网头部,我发现他的#333色背景是通栏的,整个菜单列表是有固定宽度的并且居中,分为左右两块:左边是商城的主要服务项,可以跳转到其他页面;右边是用户账户相关的,(作为简单演示,没做购物车和下载APP的下拉框效果)我是这样做的,首先设置一个父div,设置宽高,和背景颜色,width:100%,背景颜色:#333,然后再用一个div容器装左右两个ul,头部菜单标题用<li><a></a></li>包裹,左边左浮动,右边有浮动实现在同一行显示。原创 2020-07-08 12:15:35 · 504 阅读 · 0 评论 -
2021年最简便使用iconfont矢量图标的方法
通过下载代码的方法,我们需要把下载的本地文件和html、css等网页文件放在一起,才能生效。而且如果要再加新的图标时,本地文件还要更改。这样对于部分伙伴们是比较头疼的(比如我哈哈)所以我们可以用在线链接的方法。首先,在iconfont.cn官网中将所需要的图标添加进我们自己项目,没有项目,就新建一个,然后在项目里选择font-class,在下方选择生成在线链接,例如我生成的是//at.alicdn.com/t/font_1927722_k4bdhttg5c.css,将这个链接直接复制进我们的html代码原创 2020-07-08 12:10:18 · 369 阅读 · 0 评论 -
指缝间的
指缝间的 指缝间的河水解冻的初春二月风呼啦啦的吻过河面划出万千束银光粼粼的涟漪晃的河畔的风景也开始漂移一派墨绿色的冬小麦地头边捧着金黄迎春花的你羊角辫上戴着白梅骨朵的我指缝间的是料峭春寒更是我的无邪你的笑夏木阴阴黄鹂啭的酷暑烈日狂热地灼烧大地怂恿热浪席卷着金黄麦田艳阳碎金一般从树缝跌落停在那泓汩汩溪泉面上你瞳孔里闪烁着整林的葱郁斑斓抱着我在溪边老榕树上把艳阳坐成余晖指缝间的是流过的阴翳更是我的欢颜你的眸天高云淡的皓月清秋潇漓的清冷伴着纷飞黄叶却原创 2020-06-09 17:11:09 · 119 阅读 · 0 评论