css3过渡总结 CSS3过渡(Transitions)允许CSS属性在一定的时间区间内平滑地过渡,从一个值转变为另一个值。它能够让网页元素的状态变化更加自然、流畅,给用户带来更好的视觉体验。例如,当一个元素从隐藏状态变为显示状态,通过过渡可以使其淡入,而不是生硬地突然出现。
CSS3 3D 转换介绍 参数:x、y、z分别表示在X轴、Y轴、Z轴方向上的移动距离,单位可以是像素(px)、百分比(%)等。例如,translate3d(100px,50px,20px)将元素在X轴方向移动100px,在Y轴方向移动50px,在Z轴方向移动20px。X轴是水平方向(从左到右为正方向),Y轴是垂直方向(从上到下为正方向),Z轴是垂直于屏幕的方向(从屏幕外指向屏幕内为正方向)。preserve-3d:子元素将在3D空间中进行转换,这使得可以创建复杂的3D结构。
css3网格布局 定义列和行grid-template-columns属性用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。还可以使用fr(fractional unit)单位来创建弹性列。grid-template-rows属性用于定义网格的行轨道。和grid-template-columns类似。网格间距(Gap)grid-column-gap和grid-row-gap属性(已废弃,建议使用gap属性)
css实现响应式详解 常见的值有flex - start(默认值,项目向主轴起点对齐)、flex - end(项目向主轴终点对齐)、center(项目在主轴上居中对齐)、space - between(项目在主轴上均匀分布,两端对齐)和space - around(项目在主轴上均匀分布,每个项目两侧的间隔相等)。可以分别设置行间隙和列间隙,如grid - row - gap和grid - column - gap,也可以使用grid - gap同时设置行和列的间隙(grid - gap: 10px 20px;
meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ meta name=“viewport” content=“width=device-width, initial-scale=1.0” 这段代码在网页设计中扮演着非常重要的角色,尤其是在响应式设计中。
浏览器解析过程 首先先获取HTML文档,然后构建DOM,在构建DOM的过程中如果遇到JS代码,JS代码会阻塞下面DOM的构建,遇到css是会构建cssom,cssom可以和DOM同时构建,互不影响,等js执行完,DOM和cssom会结合生成新的 DOM(渲染树)->布局->绘制,具体流程如下图:
git基本管理 工作区管理git clean命令用来从工作目录中删除所有没有跟踪(tracked)过的文件git clean -n 是一次clean的演习, 告诉你哪些文件会被删除git clean -f 删除当前目录下没有tracked过的文件,不会删除.gitignore指定的文件git clean -df 删除当前目录下没有被tracked过的文件和文件夹git checkout . 将没有放入到暂存区的所有文件恢复git checkout hd.js 放弃指定文件的修改git checkout – h
nrm的安装与使用 nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。安装npm i -g nrm使用1.查看可选源nrm ls2.查看当前使用的源nrm current3.切换源nrm use <registry>4.添加源nrm add <registry> <url>5. 删除源nrm del <registry>6. 测试源速度nrm test <registry>...
git入门 安装Git可以在windows、Mac、Linux全平台系统使用。登录 https://git-scm.com/downloads 下载你系统的Git软件并进行安装。安装成功后可以在终端输入:git --version查看版本。初始配置配置文件为 ~/.gitconfig ,执行任何Git配置命令后文件将自动创建。第一个要配置的是你个人的用户名称和电子邮件地址。这两条配置很重要,每次 Git 提交时都会引用这两条信息,说明是谁提交了更新,所以会随更新内容一起被永久纳入历史记录:git confi
less 入门 变量可以设置变量,同一个变量可以重复被使用。@width: 10px;#header{ width: @width;}编译:header{ width: 10px;}混合混合是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。.test{ width: 10px;}.main{ .test(); height: 10px;}编译:.main{ width: 10px; height: 10px;}嵌套#header{ width: 100p
node.js文件系统 fs 模块提供了许多非常实用的函数来访问文件系统并与文件系统进行交互,无需安装。 作为 Node.js 核心的组成部分,可以通过简单地引用来使用它。下面是常用的api:fs.access(): 检查文件是否存在,以及 Node.js 是否有权限访问。fs.appendFile(): 追加数据到文件。如果文件不存在,则创建文件。fs.chmod(): 更改文件(通过传入的文件名指定)的权限。相关方法:fs.lchmod()、fs.fchmod()。fs.chown(): 更改文件(通过传入的文件名指
javascript异步机制 — call stack 代码在运行过程中,会有一个叫做调用栈(call stack)的概念。调用栈是一种栈结构,它用来存储计算机程序执行时其活跃子程序的信息。(比如什么函数正在执行,什么函数正在被这个函数调用等等信息)。调用栈是JS引擎执行程序的一种机制。程序每调用一层函数(方法),引擎就会生成它的栈帧,栈帧里面保存了函数的执行上下文,然后将它压入调用栈。栈是一个后进先出的结构,直到最里层的函数执行完,引擎才开始将最后加入的栈帧从栈中弹出。函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置
javascript调试 程序调试是我们在开发经常要做的事情,没有调试工具是很难去编写 JavaScript 程序的,你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。在javascript中主要有以下这几种调试方法。console.log()这是一种静态的调试方法,可以在控制台上输出相应的数值,可以给我们看到相应的数值变化。断点调试断点调试是一种动态的调试方法,在复杂的bug面前,这是一种很高效的方法。下面我们假设存在一个累加的bug,然后通过这两种方法来调试bug: 从1累加到10,发现输出
javascript的错误处理 try/catch/finally 语句try/catch/finally语句作为javascript的一种处理异常的方式,基本语法如下代码所示:try{ //可能出错的地方 console.log(a);}catch(error){ //打印错误信息 console.log(error);}finally{ //无论是否出错都会执行的代码 console.log("finally");}错误类型● Error● InternalError
html5新特性 语义标签常见语义标签:标签描述<header></header>定义了文档的头部区域<footer></footer>定义了文档的尾部区域<nav></nav>定义文档的导航<section></section>定义文档中的节(section、区段)<article></article>定义页面独立的内容区域<aside
本地存储localStorage和sessionStorage localStorage和sessionStorage一样都是用来存储客户端临时信息的对象他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。不同浏览器无法共享