HTML+CSS
关注
分享
扫一扫
乌鲁托拉曼
撒大声地的
展开
-
【ts】ts学习笔记
一、函数重载// 函数重载function add(...rest: number[]):number;function add(...rest: string[]):string;function add(...rest: any):any { let first = rest[0]; if(typeof first === 'number') { return rest.reduce((pre, cur) => pre +cur); } if原创 2020-06-14 17:17:37 · 198 阅读 · 0 评论 -
【性能优化】浏览器的重绘与重排
**浏览器运行机制**1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tr...转载 2020-04-12 18:13:38 · 524 阅读 · 0 评论 -
浅谈对vue生命周期函数的理解
1.什么是vue生命周期？有什么作用？每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我...原创 2018-08-09 17:43:18 · 2606 阅读 · 0 评论 -
前端面试题（三）：css 的 @import 和 link 的区别（转）
差别1 ：适用范围不同 @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。 差别2： 功能范围不同 link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。...转载 2018-08-09 18:07:03 · 336 阅读 · 0 评论 -
【微信小程序】微信小程序入门心得之hello 小程序
1.首先，去微信公众平台（https://mp.weixin.qq.com）注册一个小程序账号2.下载 微信web开发者工具，傻瓜式安装，一路next3.扫码登录 4.新建一个小程序，可以选择一个空目录作为项目目录，微信web开发工具 会自动创建一个类似脚手架的文件，就可以直接开发了。 顺便去注册一个AppID，如果没有的话，可以勾选一个测试账号，如果没有 AppID部...原创 2018-08-08 20:22:11 · 299 阅读 · 0 评论 -
JavaScript实现二叉搜索树、前序遍历、中序遍历、后续遍历
<script type="text/javascript"> function BinaryTree(){ //建立二叉树 var Node=function(key){ this.key=key; this.left=null; this.right=null; ...原创 2018-09-04 17:32:28 · 423 阅读 · 0 评论 -
浅谈CSS3中的box-sizing（content-box与border-box）
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box、border-box。默认值是content-box。 语法格式：box-sizing：content-box | border-box 区别： 1.content-box：padding和border不被包含在定义的width和height之内。 对象的实际宽度=设置的width+原创 2017-12-02 19:46:19 · 23041 阅读 · 0 评论 -
HTTP缓存
【强缓存】 在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器起端响应请求，浏览器端缓存。过程如下：在第一次请求时，服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端，客户端记录修改时间；服务器还会生成一个Etag，并发送给客户端。浏览器后续再次进行请求时： 浏览器缓存主要分为强强缓存（也称本地缓存）和协商缓存（也称弱缓存）。根据上图，浏...转载 2018-09-07 15:00:22 · 399 阅读 · 0 评论 -
【CSS】CSS之层叠性，继承性，优先级
层叠性样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。继承性文字的所有属性都可以被继承-特殊：h1-h6 文字大小不能被继承a标签文字颜色不能被继承优先级默认样式<标签选择器<类选择器<id选择器<行内样式<!important0 1 10 100 ...原创 2019-06-21 21:22:20 · 247 阅读 · 0 评论 -
【移动端】使用js和css3的translate、transition实现的简单轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-06-24 21:11:27 · 2404 阅读 · 0 评论 -
【移动端】学习移动端的滑动手势事件
1.判断滑动的手势条件触发touchmove事件移动的超过一定的距离，如10px， 像滑动了1px，2px这类的距离太小，不能视为滑动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2019-06-24 21:54:47 · 2500 阅读 · 0 评论 -
【移动端】封装一个简单的tap事件鸭
1. tap事件与click事件移动端click事件缺陷移动端也有click事件，但是在移动端为了区别是点击还是滑动（当用户触碰到屏幕的时候，可能是点击，也可能是活动），因此click事件有300ms的延迟。这个延迟在chrome浏览器模拟器中体现不到300ms的效果，只有在真机上才有。响应太慢，影响用户体验tap事件tap事件不是移动端原生事件，而是通过touch相关事件衍生（封...原创 2019-06-24 23:16:35 · 536 阅读 · 0 评论 -
前端面试题（二）：ES6中let，const和 var 三者的区别
let命令基本用法在ES6中，新增了let命令，用于声明变量，用来取代ES5中var命令，消除var声明的变量的不合理，不严谨之处。const用于声明常量。 让我们来看看let和var的区别1.let不存在变量提升使用let声明的变量，不会像使用var那样存在“变量提升“”的现象。所以使用let声明变量，必须遵循“先声明，后使用”的原则。否则会报错console.log(a...原创 2018-06-02 22:18:10 · 8244 阅读 · 3 评论 -
前端面试题（一）：如何解决使用inline-block引起的空白间隙的问题
使用inline-block代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用 inline-block来实现元素的居中效果。但是inline-block会引起元素和元素之间几个像素的间隙（具体间隙大小取决于字体大小）。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。 因为空白字符也是字符，也会引用CSS样式 代码下入&lt;...原创 2018-05-20 21:01:03 · 4296 阅读 · 0 评论 -
【前端面试】js的变量提升
1．JavaScript代码执行分为两个阶段：预解析阶段：在预解析阶段，js会对以var声明的变量，和function开头的语句块进行提升，将var声明的变量和function 提升至代码的最前面。需要注意的时，function整体提升，var 声明的变量只提升变量声明，并不会在提升的同时进行赋值操作执行阶段 - 2.举个例子：alert(a)//undefined...原创 2018-02-25 23:15:00 · 345 阅读 · 0 评论 -
JavaScript数组去掉重复数据总结
1.去掉指定的重复数据var arr = [11,22,11,33,33,22,22,44,55];function delRepeat( arr, val ){ for( var i=arr.length-1; i&amp;gt;=0; i-- ){ if( arr[i] === val ){ arr.splice(i, 1...原创 2018-03-10 10:25:42 · 4936 阅读 · 0 评论 -
使用js数组和事件完成的一个小玩意儿
图片开始半透明的鼠标放上去后代码实现1.样式*{ margin: 0; padding: 0; } .dage{ width: 510px; height: 510px; background: #ccc; margin: 20px auto; ...原创 2018-03-11 23:07:10 · 245 阅读 · 0 评论 -
理解JavaScript中的闭包和闭包中的this指向
一． 什么是闭包？闭包是指可以访问另一个函数作用域中变量的函数。在js中，只有函数内部的子函数才能够读取局部变量。因此可以简单地将闭包理解为： 定义在某个函数中的函数。二、闭包原理：上级作用域无法直接访问下级作用域中的变量，但下级作用域可以访问上机作用域中的变量。例如function fn1(){ var n = 100; function fn2(){ ...原创 2018-02-25 23:25:01 · 5712 阅读 · 4 评论 -
JavaScript函数调用的四种方式以及this指向
1.函数调用模式function fn(){ console.log(this); }fn();//输出window2.方法调用模式 var obj = { test:function(){ console.log(this); }}ob...原创 2018-02-25 22:56:12 · 258 阅读 · 0 评论 -
HTML5废弃的标签
1.可以使用CSS替代的标签在html5之前的一些标签中，有一部分标签纯粹是用做显示效果的标签。二H5延续了内容与表现分离，对于显示效果更多的交给CSS完成。所以在这方面废弃的标签有：<basefont> <big> <font> <s> <strike> <tt> <u>2.不再支持fra原创 2018-03-05 11:25:26 · 2869 阅读 · 0 评论 -
js继承之混入式继承
1.运用场景：假设有两个对象o1，o2，如果要把o2的方法和属性拷贝到o1中，混入式继承是最简便的方法之一2.实现方式：用for…in…的方式遍历o2对象的属性和方法，并将o2的属性和方法赋值给o1代码实现function mixExtend( o1, o2 ){ for( var key in o2 ){ o1[key] = o2[key]; }...原创 2018-03-12 18:02:24 · 1237 阅读 · 0 评论 -
浏览器的标准模式与怪异模式
标准模式和怪异模式的来由在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与...转载 2018-03-18 22:44:09 · 256 阅读 · 0 评论 -
js实现拖拽事件
HTML<body> <div></div></body>CSSdiv{ position: absolute; width: 200px; height: 200px; background: #369 }JSwindow....原创 2018-03-20 16:57:59 · 10051 阅读 · 0 评论 -
JavaScript实现tab栏
HTML&lt;div id="box"&gt; &lt;ul class="clearfix"&gt; &lt;li class="current"&gt;北京邮电&lt;/li&gt; &am原创 2018-04-01 21:20:39 · 227 阅读 · 0 评论 -
DIV+CSS布局之圣杯布局与双飞翼布局
圣杯布局 & 双飞翼布局 简单介绍一下什么是双飞翼布局和圣杯布局： 它们俩都是为了解决三栏布局问题，左右栏宽度固定，中间栏自适应（随着父盒子大小改变而改变）。中间栏要放在中间以优先渲染。它们的布局思想略微有且差别。 废话不多说，代码奉上hTML<body><div class="main"> <div class="cent...原创 2017-12-19 22:59:55 · 495 阅读 · 0 评论