Css

常常看一些 LOL 较量直播的小伙伴，必定都晓得，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕呈现在一起的时候，弹幕会“奇妙”的躲到人物的上面，看着十分的智能。 简略的一个截图例子： 其实，这里是使用了 CSS 中的 MASK 属性实现的。 mask 简略用法介绍之前在多篇文章都提到了 mask，比拟具体的一篇是 -- 微妙的 CSS MASK，本文不对 mask 的基本概念做过多解说，向下浏览时，如果对一些 mask 的用法感到纳闷，能够再去看看。 这里只简略介绍下 mask 的根本用法： 最根本，应用 mask 的形式是借助图片，相似这样： { /* Image values */ mask: url(mask.png); /* 应用位图来做遮罩 */ mask: url(masks.svg#star); /* 应用 SVG 图形中的形态来做遮罩 */}当然，应用图片的形式后文会再讲。借助图片的形式其实比拟繁琐，因为咱们首先还得筹备相应的图片素材，除了图片，mask 还能够承受一个相似 background 的参数，也就是突变。 相似如下应用办法： { mask: linear-gradient(#000, transparent) /* 应用突变来做遮罩 */}那该具体怎么应用呢？一个非常简单的例子，上述咱们发明了一个从彩色到通明渐变色，咱们将它使用到理论中，代码相似这样： 上面这样一张图片，叠加上一个从通明到彩色的突变， { background: url(image.png) ; mask: linear-gradient(90deg, transparent, #fff);} 利用了 mask 之后，就会变成这样： 这个 DEMO，能够先简略理解到 mask 的根本用法。 ...

明天的知识点 (2021.02.19) —— 第675天 (我也要出题)[html] 画一个五层楼的布局[css] 设置元素为display:flex后，哪些属性会生效呢？为什么？[js] 请解释以下题目会输入的后果（类型转换）[软技能] 网站加载Waiting (TTFB)工夫过长的起因是什么？如何解决？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

iPhone12纯色系搭配工具css3d 、 css变量作为一名小屏党，新年打算动手iphone12mini，于是针对相干信息作了些搜寻，最初决定等明年的13/12s。而在浏览电商平台时，针对手机的色彩搭配也思忖了许久，于是乎撸了个色彩搭配器（非主动）来不便配色。 配色范畴 主色侧边色镜头块色镜头边框色logo色预览跳转预览 技术点三维建模所谓 css3d , 其本质是在利用2维元素去拼装3维状态。操作的对象依然是2维的立体的盒子模型，即只有长（width）宽（height），没有高。如果把手机模型视为一个矩形，那么拼装一部手机至多须要6个立体（上下左右前后）。 <div class="iphone-device"> <!-- 前 --> <div class="iphone-front"></div> <!-- 后 --> <div class="iphone-back"></div> <!-- 侧边-左 --> <div class="iphone-left iphone-side"></div> <!-- 侧边-右 --> <div class="iphone-right iphone-side"></div> <!-- 侧边-上 --> <div class="iphone-top iphone-side"></div> <!-- 侧边-下 --> <div class="iphone-bottom iphone-side"></div></div>设模型长宽高别离为： l:508px;w:239.99952px;h:30px;Transform： 前后两面别离以Y轴旋转0度与180度，并减少z轴间隔为1/2h。左右两面别离以Y轴旋转-90度与90度，并减少z轴间隔为1/2h 和 w-1/2h。下面先以Y轴90度，再以Z轴旋转-90度；上面先以Y轴-90度，再以Z轴旋转-90度，并减少z轴间隔为l 圆角坑骗上一步构建的模型是个纯正的矩形，那么如何实现3d圆角呢？因为咱们仍旧是在编辑立体元素，对于曲面的绘制无奈像3d建模一样利用算法实现无数个线立体拼凑成一个曲面。然而，咱们能够用两个切面的角度来造成视觉坑骗，以达到曲面的成果。 css变量模型实现之后，紧接着就是配色了，配色技术仍然是陈词滥调的 css变量。在根元素上申明所有的色彩变量，对应子元素以 var(--x) 的模式援用。在Vue中，则利用 props 和 computed 属性来实现对象封装。 // index.css.iphone-perspective { ... --main: #bf2a2a; --side: #ede9e8; --cam: #bf2a2a; --camRing: #ede9e8; --logo: #ede9e8; --dur: 12s;}.iphone-front-s,.iphone-back-s,.iphone-front,.iphone-back { ... background: var(--side);}.iphone-brand svg{ ... color: var(--logo);}// PhoneColor.vue<template> <div class="iphone-perspective" :style="extraRoot"> ... </div></template><script> export default { name: "PhoneColor", props: { main: { type: String, default: '#bf2a2a' }, side: { type: String, default: '#ede9e8' }, cam: { type: String, default: '#ede9e8' }, camRing: { type: String, default: '#bf2a2a' }, logo: { type: String, default: '#ede9e8' }, animateSpeed: { type:Number, default: 12 } }, computed:{ extraRoot(){ const { main, side, cam, camRing, logo, animateSpeed = 12 } = this return { '--main': main, '--side': side, '--cam': cam, '--camRing': camRing, '--logo': logo, '--dur': `${animateSpeed}s` } } } }</script>Issue侧边的按钮理论应该与主色配色统一，代码中是懒得画了间接切的图。为了弥补圆角的冗余局部配色，前后各自减少了一个反面用来填色，从而导致了模型在旋转时会呈现穿模的景象。源码Style Code ...

弹性布局通过display:flex/inline-flex开启。开启之后，以后元素为容器元素，它的间接子元素为我的项目元素。容器元素有六个属性：flex-direction/flex-wrap/flex-flow/justify-content/align-items/align-content flex-direction：row/row-reverse/column/column-reverse,管制主轴方向flex-wrap :nowrap/wrap/wrap-reverse,管制是否换行flex-flow ：direction和wrap的合写模式，默认值为 row nowrapjustify-content:我的项目在主轴上的对齐形式align-items：我的项目在穿插轴上的对齐形式align-content：多根轴线的对齐形式，如果只有一根轴线，则不起作用我的项目元素也有六个属性:order/flex-grow/flex-shrink/flex-basis/flex/align-self order:我的项目的排列程序，数值越小越靠前，默认为0flex-grow:我的项目的放大比例，默认为0，代表即便有残余空间，也不放大flex-shrink:我的项目的放大比例，默认为1，代表如果空间有余，会放大flex-basis:在调配残余空间之前，我的项目占据的主轴空间，默认为auto，代表我的项目自身大小。flex:grow shrink basis 的合写模式，默认为 0 1 autoalign-self:我的项目本身的对齐形式，能够使这个我的项目和其余的我的项目对齐形式不同。

一、grid+calc()自适应grid+calc()自适应 二、flex+calc()自适应flex+calc()自适应 三、display：table 宽度自适应display：table 宽度自适应 四、cloumn多栏布局 宽度自适应cloumn多栏布局 宽度自适应 五、absolute方位值+float，自适应的网格absolute方位值+float，自适应的网格 六、float + nth-of-type / nth-childfloat + nth-of-type / nth-child

本文是可视化拖拽系列的第三篇，之前的两篇文章一共对 17 个性能点的技术原理进行了剖析： 编辑器自定义组件拖拽删除组件、调整图层层级放大放大吊销、重做组件属性设置吸附预览、保留代码绑定事件绑定动画导入 PSD手机模式拖拽旋转复制粘贴剪切数据交互公布本文在此基础上，将对以下几个性能点的技术原理进行剖析： 多个组件的组合和拆分文本组件矩形组件锁定组件快捷键网格线编辑器快照的另一种实现形式如果你对我之前的两篇文章不是很理解，倡议先把这两篇文章看一遍，再来浏览此文： 可视化拖拽组件库一些技术要点原理剖析可视化拖拽组件库一些技术要点原理剖析（二）尽管我这个可视化拖拽组件库只是一个 DEMO，但比照了一下市面上的一些现成产品（例如 processon、墨刀），就根底性能来说，我这个 DEMO 实现了绝大部分的性能。 如果你对于低代码平台有趣味，但又不理解的话。强烈建议将我的三篇文章联合我的项目源码一起浏览，置信对你的播种相对不小。另附上我的项目、在线 DEMO 地址： 我的项目地址在线 DEMO18. 多个组件的组合和拆分组合和拆分的技术点相对来说比拟多，共有以下 4 个： 选中区域组合后的挪动、旋转组合后的放大放大拆分后子组件款式的复原选中区域在将多个组件组合之前，须要先选中它们。利用鼠标事件能够很不便的将选中区域展现进去： mousedown 记录终点坐标mousemove 将以后坐标和终点坐标进行计算得出挪动区域如果按下鼠标后往左上方挪动，相似于这种操作则须要将以后坐标设为终点坐标，再计算出挪动区域// 获取编辑器的位移信息const rectInfo = this.editor.getBoundingClientRect()this.editorX = rectInfo.xthis.editorY = rectInfo.yconst startX = e.clientXconst startY = e.clientYthis.start.x = startX - this.editorXthis.start.y = startY - this.editorY// 展现选中区域this.isShowArea = trueconst move = (moveEvent) => { this.width = Math.abs(moveEvent.clientX - startX) this.height = Math.abs(moveEvent.clientY - startY) if (moveEvent.clientX < startX) { this.start.x = moveEvent.clientX - this.editorX } if (moveEvent.clientY < startY) { this.start.y = moveEvent.clientY - this.editorY }}在 mouseup 事件触发时，须要对选中区域内的所有组件的位移大小信息进行计算，得出一个能蕴含区域内所有组件的最小区域。这个成果如下图所示： ...

1. 先看成品codepen体验 （因为图片大小问题，只截取了一部分。实际效果是始终滚动，不会有动画复位的割裂感。） 2. 问题拆分首先看到这个需要的时候，感觉比拟难做，次要是上面的起因：须要斜着滚动，且须要有限，再就是icon错位排列的问题。 起初思考了下，对这个问题进行了拆分： 编写容器及icon等的 css排列好icon并且丢到一个wrapper中将整个wrapper歪斜30度为wrapper增加有限的横向滚动动画话不多说，开始写代码 3. 开始口头为了不便看边界，对于一些dom增加了边框~ 3.1 创立容器容器是一个固定大小的比拟好写 .box { height: 666px; width: 1182px; border-radius: 36px; border: 1px solid; overflow: hidden; text-align: center; font-size: 30px;}3.2 而后撸个icon进去这里就不应用图片来做了，对立用这个mock 一下~ .icon { width: 267px; height: 267px; border-radius: calc(267px * 0.23); background-image: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) );}3.3 排列icon到wrapper中咱们把脖子沿逆时针方向旋转30度发现，实际上就是错落有致的摆放着两排icon。 ...

DOM根底DOM查找document object modelDOM是W3C(万维网联盟）的规范，是中立于平台和语言的接口，它容许程序和脚本动静地拜访和更新文档的内容，构造和款式。 对网页进行增删改查的操作。 DOM规范开发：先用简略的，再用简单的补充————以实现成果为目标 外围DOMHTML DOM可操作所有结构化文档的API专门操作HTML文档的简化版DOM API包含HTML和XML仅对罕用的简单的API进行了简化万能不是万能繁琐简略罕用DOM操作查找节点读取节点信息批改节点信息创立新节点删除节点 罕用DOM办法getElementById()getElementsByTagName()getElementsByClassName()appendChild()removeChild()replaceChild()inserBefore()creatAttribute()creatElement()creatTextNode()getAttribute()setAttribute() 按id属性，准确查找一个元素对象var elem=document.getElementById("id")效率十分高强调：getElementById只能用在document上何时：只用于准确查找一个元素问题：不是所有元素都有id 例子：<ul id="myList"> <li id="m1">首页</li> <li id="m2">企业介绍</li> <li id="m3">分割咱们</li></ul> var ul=document.getElementById('myList');console.log(ul);按标签名找var elems=parent.getElementByTagName("tag")查找指定parent节点下所有标签为tag的子代节点强调：1.可用在任意父元素上2.不仅查间接子节点，而且查所有子代节点3.返回一个动静汇合即便只款待一个元素，也返回汇合必须用[0]，取出惟一元素问题：岂但找间接，而且找所有子代。 例子：<ul id="myList"> <li id="m1">首页</li> <li id="m2">企业介绍</li> <li id="m3">分割咱们</li></ul> var ul=document.getElementById('menuList');var list=ul.getElementByTagName('li');console.log(list);通过name属性查找**document.getElementByName('name属性值')能够返回DOM树中具备指定name属性值的所有子元素汇合。 例子：<form id="registerForm"> <input type="checkbox"name="boy"/> <input type="checkbox"name="boy"/> <input type="checkbox"name="boy"/></form>var list=document.getElementByName('boy');console.log(typeof list);通过class查找查找父元素下指定class属性的元素var elems=parent.getElementByClassName("class")有兼容性问题：IE9+ 例子：<div id="news"> <p class="mainTitle">新闻标题1</p> <p class="subTitle">新闻标题2</p> <p class="mainTitle">新闻标题3</p></div>var div=document.getElementById('news');var list=div.getElementByClassName('mainTitle');console.log(list);通过css选择器查找元素选择器类选择器id选择器后辈选择器子代选择器群组选择器 只找一个元素：var elem=parent.querySelector("selector")强调：selector反对所有css中选择器如果选择器匹配的有多个，只返回第一个 找多个元素：var elem=parent.querySelectorAll("selector")强调：selector API返回的是非动静汇合 DOM批改批改属性外围DOM:四个操作读取属性值：2种1.先获取属性节点对象，再取得节点对象的值var attrNode=elem.attributes[下标/属性名]var attrNode=elem.getAttributeNode(属性名） attrNode.value————属性值 2.间接取得属性值var value=elem.getAttribute("属性名"); 批改属性值elem.setAttribute("属性名",value); var h1=document.getElementById("a1");h1.setAttributeNode("name",zzx);//获取到名字批改内容判断是否蕴含之中的属性：var bool=elem.hasAttribute("属性名") //ture或false或document.getElementById('bt1').hasAttribute('onclick'); //获取id为bt1的元素判断有无onclick属性 移除属性：elem.removeAttribute('属性名') <a id="alink"class="slink"href="javascript:void(0)"onclick="jump()">百度搜寻</a>var a=document.getElementById('alink');a.removeAttribute('class');批改款式内联款式：elem.style.属性名强调：属性名：去横线，变驼峰比方：css：background-color变为backgroundColor list-style-type变为listStyleType DOM增加增加元素的步骤：1.创立空元素2.设置要害属性3.将元素增加到DOM树 创立空元素var elem=document.creatElement("元素名"）如：var table=document.creatElement('table');var tr=document.creatElement('tr');var td=document.creatElement('td');var td=document.creatElement('td'); console.log(table); 设置要害属性要害属性a.innerHTML="go to tmooc"a.href="http://tmooc";go to mooc;要害款式a.style.opacity="1";a.style.cssText="width:100px;height:100px"; //可写多个属性 ...

本文会介绍一些常见几何图形的 CSS 绘制计划，思路参考自 The shapes of CSS 一文以及网上的其它文章，局部中央会做适当的批改和补充。1. 三角形传统 border 实现咱们晓得，如果设置一个盒子的宽高为 0，盒子就会变成一个点。此时再给上下左右四个 border 肯定的宽度和不同的色彩，那么单纯由 border 填充的盒子看起来是这样的： 但内容盒有宽高的时候，四个 border 的对接处就不是一个点，而是一个矩形（图中红色区域），这时候的border 看起来就会和事实中的边框差不多： 因而，要绘制三角形，外围就是设置盒子的宽高为 0，让 border 体现为一个三角形： .delta { width: 0px; height: 0px; border: 50px solid; border-color: #43cea2 #185a9d #ff6b6b #83a4d4;}当然，也能够给盒子一个宽高，只不过这时候咱们就要将其设置为 IE 盒模型（box-sizing:border-box），以确保在始终保持盒子原尺寸的前提下，通过减少 border 的宽度使 border 向盒子外部聚拢： .delta { width: 100px; height: 100px; box-sizing: border-box; border: 50px solid; border-color: #43cea2 #185a9d #ff6b6b #83a4d4;}下面两种办法成果一样，接着依据理论状况暗藏其中三个三角形即可。咱们这里只想要显示底下的三角形，所以其它三角形通过通明色暗藏，顶部的三角形则设置 border 宽度为 0 ，防止占用空间。 HTML： <div class="delta"></div>CSS： .delta { width: 0px; height: 0px; border: 50px solid transparent; border-bottom-color: #ff6b6b; border-top-width: 0px;}成果如下： ...

一、引言微前端是什么？曾经理解微前端的敌人可自行跳过本节，简略介绍下微前端，微前端是将前端更加细分化的一种技术计划，相似与后端微服务，下图所示3个可独立构建测试部署并可增量降级的不同技术栈利用，能够集成在一个基座利用中一起展现。 微前端是一种多个团队通过独立公布性能的形式来独特构建现代化 web 利用的技术手段及办法策略。微前端架构具备以下几个外围价值： 技术栈无关主框架不限度接入利用的技术栈，微利用具备齐全自主权 独立开发、独立部署微利用仓库独立，前后端可独立开发，部署实现后主框架主动实现同步更新 增量降级在面对各种简单场景时，咱们通常很难对一个曾经存在的零碎做全量的技术栈降级或重构，而微前端是一种十分好的施行渐进式重构的伎俩和策略 独立运行时每个微利用之间状态隔离，运行时状态不共享 演示一个微前端我的项目，其中菜单、地图都是微利用，菜单是vue我的项目，地图是h5我的项目，地图可独立运行，集成到基座中时本来入口的 html 会转换成 div，html 里的 css 会被转换成 style，js 会转换成字符串并通过 eval 函数间接执行。 微前端解决了什么问题？微前端架构旨在解决单体利用在一个绝对长的时间跨度下，因为参加的人员、团队的增多、变迁，从一个一般利用演变成一个巨石利用(Frontend Monolith)后，随之而来的利用不可保护的问题。这类问题在企业级 Web 利用中尤其常见。 如何实现微前端？实现微前端须要解决的技术问题有： 利用接入利用入口利用隔离款式隔离利用通信利用路由为什么抉择qiankun？在利用Single SPA或其它微利用框架构建微前端零碎中遇到的一些问题，如款式隔离、JS沙箱、资源预加载、JS副作用解决等等这些你须要的能力全副内置到了 qiankun 外面到目前为止，曾经大略有 200+ 的利用，应用 qiankun 来接入本人的微前端体系。qiankun 在蚂蚁内外受过了大量线上零碎的考验，所以它是一个值得信赖的生产可用的解决方案。短短一年工夫，qiankun 未然成为最热门的微前端框架之一，尽管源码始终在更新，然而他的核心技术始终是那么几个：JS沙箱、CSS款式隔离、利用HTML入口接入、利用通信、利用路由等，接下来将通过演示demo的形式具体阐明几种技术的设计与实现。 二、JS沙箱隔离的设计与实现2.1 JS沙箱简介JS沙箱简略点说就是，主利用有一套全局环境window，子利用有一套公有的全局环境fakeWindow，子利用所有操作都只在新的全局上下文中失效，这样的子利用好比被一个个箱子装起来与主利用隔离，因而主利用加载子利用便不会造成JS变量的互相净化、JS副作用、CSS款式被笼罩等，每个子利用的全局上下文都是独立的。 2.2 快照沙箱 - snapshotSandbox快照沙箱就是在利用沙箱挂载和卸载的时候记录快照，在利用切换的时候根据快照复原环境。 demo演示 实现代码 // 子利用A mountSnapshotSandbox(); window.a = 123; console.log('快照沙箱挂载后的a:', window.a); // 123 unmountSnapshotSandbox(); console.log('快照沙箱卸载后的a:', window.a); // undefined mountSnapshotSandbox(); console.log('快照沙箱再次挂载后的a:', window.a); // 123// snapshotSandbox.ts// 遍历对象key并将key传给回调函数执行function iter(obj: object, callbackFn: (prop: any) => void) { for (const prop in obj) { if (obj.hasOwnProperty(prop)) { callbackFn(prop); } }}// 挂载快照沙箱mountSnapshotSandbox() { // 记录以后快照 this.windowSnapshot = {} as Window; iter(window, (prop) => { this.windowSnapshot[prop] = window[prop]; }); // 复原之前的变更 Object.keys(this.modifyPropsMap).forEach((p: any) => { window[p] = this.modifyPropsMap[p]; });}// 卸载快照沙箱 unmountSnapshotSandbox() { // 记录以后快照上改变的属性 this.modifyPropsMap = {}; iter(window, (prop) => { if (window[prop] !== this.windowSnapshot[prop]) { // 记录变更，复原环境 this.modifyPropsMap[prop] = window[prop]; window[prop] = this.windowSnapshot[prop]; } });}长处 ...

参考链接：阮一峰css笔记：http://www.ruanyifeng.com/blo... MDN CSS变量教程：https://developer.mozilla.org...浏览器反对水平： 支流古代浏览器反对 根本应用：1、定义：应用 -- 符号申明一个css变量，变量的值能够为任意数值 :root { --main-bg-color: brown;}变量名辨别大小写，且领有作用域，个别css变量全局应用，则放到 :root 中即可2、作用域:root { --color: red;}div { --color: blue;}.box { height: 100px; width: 100px; background-color: var(--color);}<div class="box"></div><p class="box"></p>运行html代码，失去一个蓝色的div和红色的p标签，这是受作用域的影响，和款式的优先级一样，获取变量时拿到的是最精准的作用域下的变量，id > class > 标签 > 全局 利用作用域，咱们能够做这两件罕用的操作：（1）媒体查问批改变量 @media screen and (max-width: 375px) { body { --padding: 5px; }}@media screen and (max-width: 1080px) { body { --padding: 15px; }}（2）js切换类名更换主题色 .white-theme { --bg-color: #fff; --color: #333;}.black-theme { --bg-color: #333; --color: #fff; }通过js切换类名，即可切换不同的变量，须要留神的是，主题类须要在节点最外层，比方body或者app类上，其次须要用到主题色的中央都要应用变量 3、调用变量：应用 var() 函数和变量名调用变量 ...

1.设施像素、css 像素、设施独立像素、dpr、ppi 之间的区别？ 设施像素指的是物理像素，个别手机的分辨率指的就是设施像素，一个设施的设施像素是不可变的。css像素和设施独立像素是等价的，不论在何种分辨率的设施上，css像素的大小应该是统一的，css像素是一个绝对单位，它是相对于设施像素的，一个css像素的大小取决于页面缩放水平和dpr的大小。dpr指的是设施像素和设施独立像素的比值，个别的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会扭转dpr的值。ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。详细资料能够参考： 《什么是物理像素、虚构像素、逻辑像素、设施像素，什么又是 PPI,DPI,DPR 和 DIP》 《前端工程师须要明确的「像素」》 《CSS 像素、物理像素、逻辑像素、设施像素比、PPI、Viewport》 《前端开发中像素的概念》 2、layout viewport、visual viewport 和 ideal viewport 的区别？ 相干知识点： 如果把挪动设施上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认状况下把viewport设为一个较宽的值，比方980px，这样的话即便是那些为桌面设计的网站也能在挪动浏览器上失常显示了。ppk把这个浏览器默认的viewport叫做layout viewport。layout viewport的宽度是大于浏览器可视区域的宽度的，所以咱们还须要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visual viewport。ideal viewport是最适宜挪动设施的viewport，ideal viewport的宽度等于挪动设施的屏幕宽度，只有在css中把某一元素的宽度设为ideal viewport的宽度（单位用px），那么这个元素的宽度就是设施屏幕的宽度了，也就是宽度为100%的成果。ideal viewport的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport而设计的网站，不须要用户手动缩放，也不须要呈现横向滚动条，都能够完满的出现给用户。答复： 挪动端一共须要了解三个viewport的概念的了解。第一个视口是布局视口，在挪动端显示网页时，因为挪动端的屏幕尺寸比拟小，如果网页应用挪动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以挪动端浏览器提供了一个layout viewport布局视口的概念，应用这个视口来对页面进行布局展示，个别layout viewport的大小为980px，因而页面布局不会有太大的变动，咱们能够通过拖动和缩放来查看到这个页面。第二个视口指的是视觉视口，visual viewport指的是挪动设施上咱们可见的区域的视口大小，个别为屏幕的分辨率的大小。visual viewport和layout viewport的关系，就像是咱们通过窗户看里面的风光，视觉视口就是窗户，而里面的风光就是布局视口中的网页内容。第三个视口是现实视口，因为layout viewport个别比visual viewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了ideal viewport的概念，ideal viewport下用户不必缩放和滚动条就可能查看到整个页面，并且页面在不同分辨率下显示的内容大小雷同。ideal viewport其实就是通过批改layout viewport的大小，让它等于设施的宽度，这个宽度能够了解为是设施独立像素，因而依据ideal viewport设计的页面，在不同分辨率的屏幕下，显示应该雷同。详细资料能够参考： 《挪动前端开发之 viewport 的深刻了解》 《说说挪动前端中 viewport（视口）》 《挪动端适配常识你到底知多少》 3、position:fixed;在 android 下有效怎么解决？ 因为挪动端浏览器默认的viewport叫做layout viewport。在挪动端显示时，因为layout viewport的宽度大于挪动端屏幕的宽度，所以页面会呈现滚动条左右挪动，fixed的元素是绝对layout viewport来固定地位的，而不是挪动端屏幕来固定地位的，所以会呈现感觉fixed有效的状况。如果想实现fixed绝对于屏幕的固定成果，咱们须要扭转的是viewport的大小为ideal viewport，能够如下设置：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>4、如果须要手动写动画，你认为最小工夫距离是多久，为什么？（阿里） 少数显示器默认频率是60Hz，即1秒刷新60次，所以实践上最小距离为1/60*1000ms＝16.7ms5、如何让去除 inline-block 元素间间距？ 移除空格、应用margin负值、应用font-size:0、letter-spacing、word-spacing详细资料能够参考： 《去除 inline-block 元素间间距的 N 种办法》 6、overflow:scroll 时不能平滑滚动的问题怎么解决？ 以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速个性，所以滑动很流畅。详细资料能够参考： 《解决页面应用 overflow:scroll 在 iOS 上滑动卡顿的问题》 7、有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度。 （1）外层div应用position：relative；高度要求自适应的div应用position:absolute;top:100px;bottom:0;left:0;right:0;（2）应用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。详细资料能够参考： 《有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度(三种计划)》 8、png、jpg、gif 这些图片格式解释一下，别离什么时候用。有没有理解过 webp？ ...

1、介绍一下规范的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？相干知识点： （1）有两种盒子模型：IE盒模型（border-box）、W3C规范盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个局部IE盒模型和W3C规范盒模型的区别：（1）W3C规范盒模型：属性width，height只蕴含内容content，不蕴含border和padding（2）IE盒模型：属性width，height蕴含content、border和padding，指的是content+padding+border。在ie8+浏览器中应用哪个盒模型能够由box-sizing（CSS新增的属性）管制，默认值为content-box，即规范盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中申明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。答复： 盒模型都是由四个局部组成的，别离是margin、border、padding和content。规范盒模型和IE盒模型的区别在于设置width和height时，所对应的范畴不同。规范盒模型的width和height属性的范畴只蕴含了content，而IE盒模型的width和height属性的范畴蕴含了border、padding和content。一般来说，咱们能够通过批改元素的box-sizing属性来扭转元素的盒模型。具体的材料能够参考： 《CSS 盒模型详解》 2、CSS 选择符有哪些？ （1）id选择器（#myid）（2）类选择器（.myclassname）（3）标签选择器（div,h1,p）（4）后辈选择器（h1 p）（5）相邻后辈选择器（子）选择器（ul>li）（6）兄弟选择器（li~a）（7）相邻兄弟选择器（li+a）（8）属性选择器（a[rel="external"]）（9）伪类选择器（a:hover,li:nth-child）（10）伪元素选择器（::before、::after）（11）通配符选择器（*）3、::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 相干知识点： 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在以后标准中引入的，用于辨别伪类和伪元素。不过浏览器须要同时反对旧的曾经存在的伪元素写法，比方:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不容许再反对旧的单冒号的写法。想让插入的内容呈现在其它内容前，应用::before，否者，应用::after；在代码程序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。答复： 在css3中应用单冒号来示意伪类，用双冒号来示意伪元素。然而为了兼容已有的伪元素的写法，在一些浏览器中也能够应用单冒号来示意伪元素。伪类个别匹配的是元素的一些非凡状态，如hover、link等，而伪元素个别匹配的非凡的地位，比方after、before等。4、伪类与伪元素的区别 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来润饰不在文档树中的局部，比方，一句话中的第一个字母，或者是列表中的第一个元素。伪类用于当已有的元素处于某个状态时，为其增加对应的款式，这个状态是依据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，咱们能够通过:hover来形容这个元素的状态。伪元素用于创立一些不在文档树中的元素，并为其增加款式。它们容许咱们为元素的某些局部设置款式。比如说，咱们能够通过::before来在一个元素前减少一些文本，并为这些文本增加款式。尽管用户能够看到这些文本，然而这些文本实际上不在文档树中。有时你会发现伪元素应用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试辨别伪类和伪元素。大多数浏览器都反对这两个值。依照规定应该应用（::）而不是（:），从而辨别伪类和伪元素。然而，因为在旧版本的W3C标准并未对此进行特地辨别，因而目前绝大多数的浏览器都反对应用这两种形式示意伪元素。详细资料能够参考： 《总结伪类与伪元素》 5、CSS 中哪些属性能够继承？ 相干材料： 每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性自身的定义中的默认值）。当元素的一个非继承属性（在Mozilla code里有时称之为reset property）没有指定值时，则取属性的初始值initial value（该值在该属性的概述里被指定）。有继承性的属性：（1）字体系列属性font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust（2）文本系列属性text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color（3）表格布局属性caption-side border-collapse empty-cells（4）列表属性list-style-type、list-style-image、list-style-position、list-style（5）光标属性cursor（6）元素可见性visibility（7）还有一些不罕用的；speak，page，设置嵌套援用的引号类型quotes等属性留神：当一个属性不是继承属性时，能够应用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。答复： 每一个属性在定义中都给出了这个属性是否具备继承性，一个具备继承性的属性会在没有指定值的时候，会应用父元素的同属性的值来作为本人的值。个别具备继承性的属性有，字体相干的属性，font-size和font-weight等。文本相干的属性，color和text-align等。表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。当一个属性不是继承属性的时候，咱们也能够通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。具体的材料能够参考： 《继承属性》 《CSS 有哪些属性能够继承？》 6、CSS 优先级算法如何计算？ 相干知识点： CSS的优先级是依据款式申明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：（1）标签内选择符x,0,0,0（2）ID选择符0,x,0,0（3）class选择符/属性选择符/伪类选择符 0,0,x,0（4）元素和伪元素选择符0,0,0,x计算方法：（1）每个等级的初始值为0（2）每个等级的叠加为选择器呈现的次数相加（3）不可进位，比方0,99,99,99（4）顺次示意为：0,0,0,0（5）每个等级计数之间没关联（6）等级判断从左向右，如果某一位数值雷同，则判断下一位数值（7）如果两个优先级雷同，则最初呈现的优先级高，!important也实用（8）通配符选择器的特殊性值为：0,0,0,0（9）继承款式优先级最低，通配符款式优先级高于继承款式（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了不便记忆，能够认为它的特殊性值为1,0,0,0,0。计算实例：（1）#demo a{color: orange;}/*特殊性值：0,1,0,1*/（2）div#demo a{color: red;}/*特殊性值：0,1,0,2*/留神：（1）款式利用时，css会先查看规定的权重（!important），加了权重的优先级最高，当权重雷同的时候，会比拟规定的特殊性。（2）特殊性值越大的申明优先级越高。（3）雷同特殊性值的申明，依据款式引入的程序，后申明的规定优先级高（间隔元素呈现最近的） (4) 局部浏览器因为字节溢出问题呈现的进位体现不做思考答复： 判断优先级时，首先咱们会判断一条属性申明是否有权重，也就是是否在申明前面加上了!important。一条申明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再呈现雷同权重的申明。如果权重雷同，咱们则须要去比拟匹配规定的特殊性。一条匹配规定个别由多个选择器组成，一条规定的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性能够分为四个等级，第一个等级是行内款式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，第四个等级是元素选择器和伪元素选择器，为0001。规定中每呈现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比拟是从左向右排序的，也就是说以1结尾的特殊性值比所有以0结尾的特殊性值要大。比如说特殊性值为1000的的规定优先级就要比特殊性值为0999的规定高。如果两个规定的特殊性值相等的时候，那么就会依据它们引入的程序，后呈现的规定的优先级最高。对于组合申明的特殊性值计算能够参考： 《CSS 优先级计算及利用》 《CSS 优先级计算规定》 《乏味：256 个 class 选择器能够干掉 1 个 id 选择器》 7、对于伪类 LVHA 的解释? a标签有四种状态：链接拜访前、链接拜访后、鼠标滑过、激活，别离对应四种伪类:link、:visited、:hover、:active；当链接未拜访过期：（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要扭转a标签的色彩，就必须将:hover伪类在:link伪类前面申明；（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的款式（:active），必须将:active申明放到:link和:hover之后。因而得出LVHA这个程序。当链接拜访过期，状况根本同上，只不过须要将:link换成:visited。这个程序能不能变？能够，但也只有:link和:visited能够替换地位，因为一个链接要么拜访过要么没拜访过，不可能同时满足，也就不存在笼罩的问题。8、CSS3 新增伪类有那些？ （1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n能够承受具体的数值，也能够承受函数。（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。（3）elem:last-child选中最初一个子元素。（4）elem:only-child如果elem是父元素下惟一的子元素，则选中之。（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n能够承受具体的数值，也能够承受函数。（6）elem:first-of-type选中父元素下第一个elem类型元素。（7）elem:last-of-type选中父元素下最初一个elem类型元素。（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。（9）elem:empty选中不蕴含子元素和内容的elem类型元素。（10）elem:target抉择以后流动的elem元素。（11）:not(elem)抉择非elem元素的每个元素。（12）:enabled 管制表单控件的禁用状态。（13）:disabled 管制表单控件的禁用状态。(14):checked单选框或复选框被选中。具体的材料能够参考： 《CSS3 新个性总结(伪类)》 《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》 9、如何居中 div？ -程度居中：给 div 设置一个宽度，而后增加 margin:0 auto 属性 ...

一 背景在vue2我的项目上应用less,装置了 less 和 less-laoder之后，编译我的项目的时候提醒上面问题：Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function 二 排查问题在网上搜寻，有文章说是less-loader版本太高了，装置低版本的就没问题啦，比方5.0.0。看了下我以后装置的是less-loader@8.0.0,降级到less-loader@v5.0.0之后也的确好了。然而事件真的那么简略吗？为什么高版本不能够？为什么是5.0.0? 我去看之前跑的没有出问题的我的项目版本是v7.2.0，这个版本也没有问题，起初再仔细搜索发现是高版本的less-loader的配置变了。之前应用less-loader 倡议配置: // webpack.config.jsmodule.exports = { ... module: { rules: [{ test: /.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { strictMath: true, noIeCompat: true } }] }] }};留神用的是options:{}。 然而在8版本，官网给出的是： module.exports = { module: { rules: [ { test: /.less$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "less-loader", options: { lessOptions: { strictMath: true, }, }, }, ], }, ], },};留神这里的是options: {lessOptions:}} ...

此文次要形容 html / css / js / react 即时渲染和网络加载优化方面的常识，webpack罕用优化办法和HTTP Server等优化请关注《 前端性能优化指南(2) 》 如果之后发现有其它要点值得梳理，会持续更新本文... 目录目录➣ HTML/CSS 性能优化方面 1. 网络层面 1）抽离内联款式内联脚本2）defer脚本和async脚本3）压缩HTML/CSS代码资源4）压缩图片/音视频等多媒体资源5）应用雪碧图6）防止空的 src 和 href 值7）防止应用@import来引入css2. 渲染层面 1）缩小页面的回流和重绘2）缩小DOM构造的层级3）尽量不应用table布局和iframe内联网页4）CSS选择器的应用策略5）flex布局的性能比inline-block和float布局都要好6）css的书写程序也会对其解析渲染性能造成影响➣ Javascript 性能优化方面 1. 网络层面 1）压缩JS代码资源2. 渲染层面 1）应用函数节流和函数去抖解决一些函数的高频触发调用2）Js实现动画时应用requestAnimationFrame代替定时器3）应用IntersectionObserverAPI来代替scroll事件实现元素相交检测4）应用Web-Workers在后盾运行CPU密集型工作5）应用事件委托6）一些编码方面的优化倡议➣ React 性能优化方面 1. 网络层面 1）React jsx/js文件压缩2）应用React.lazy和React.Suspense实现代码宰割和懒加载3）应用React.Fragment来防止非必要DOM层级的引入2. 渲染层面 1）应用shouldComponentUpdate防止不必要渲染2）应用PureComponnet实现简略展现组件的主动浅比拟3）应用React.memo缓存和复用组件的渲染后果4）应用Context来共享全局数据5）优化组件宰割策略来解决长列表组件的渲染6）正确理解组件 key 的应用策略7）应用虚拟化渲染技术来优化超长列表组件结语》 思维导图：      前端性能优化是个很大的概念，波及HTTP协定、浏览器渲染原理、操作系统和网络、前端工程化和Js底层原理等各个方面。通过建设思维导图能够让咱们很好的将各个优化方面组织和分割起来。      依照优化原理的不同则能够将其分为网络层面优化和渲染层面的优化，网络层面的优化更多体现在资源加载时的优化，而渲染层的优化更多体现在运行时优化。      例如优化浏览器缓存策略以缩小HTTP申请传输量、图片和其它动态资源的压缩、服务器端启用Gzip压缩、应用CDN、图片懒加载、提早脚本Defer和异步脚本Async等属于网络层面的优化。另一方面，缩小页面的回流和重绘、应用React.Fragment缩小界面dom层级、应用骨架屏、函数节流和去抖、React长列表组件优化、通过事件冒泡机制实现事件委托等就属于渲染层面的优化。 ➣ HTML/CSS 性能优化方面1. 网络层面1）抽离内联款式内联脚本内联资源不利于浏览器缓存，造成反复的资源申请内联资源会造成HTML臃肿，不利于HTTP传输内联资源的下载和解析可能会阻塞导致界面渲染，导致界面白屏内联资源不好治理和保护2）defer脚本和async脚本     HTML在解析时遇到申明的<script>脚本会立刻下载和执行，往往会提早界面残余局部的解析，造成界面白屏的状况。比拟古老的优化形式之一就是将脚本放到HTML文档开端，这样子解决了白屏的问题，可是在DOM文档结构复杂简短时，也会造成肯定的界面脚本下载和执行提早，script标签新属性async和defer能够解决此类问题： defer脚本     提早脚本-申明defer属性的内部<script>脚本下载时不会阻塞HTML的解析和渲染，并且会在HTML渲染实现并且可实际操作之后开始执行(DOMContentLoaded事件被触发之前)，各个脚本解析执行程序对应申明时的地位程序，执行实现后会触发页面DOMContentLoaded事件。 async脚本     异步脚本-申明async属性的内部<script>脚本下载时不会阻塞HTML的解析和渲染，各个脚本的下载和执行齐全独立，下载实现后即开始执行，所以执行程序不固定，与DOMContentLoaded事件的触发没有关联性。 动静脚本加载技术     在脚本执行时动静运行loadScript函数能够实现相似提早脚本和异步脚本的成果：isDefer为真值时脚本的执行程序为脚本地位程序，为假值时成果同于异步脚本。 function loadScript(src, isDefer) { let script = document.createElement('script'); script.src = src; script.async = !isDefer; document.body.append(script); }3）压缩HTML/CSS代码资源     代码资源中存在很多无用的空格和符号等，去除他们带来的效益是可观的，另一方面压缩资源也能起到源代码爱护的作用。古代前端工程化框架个别继承了此类压缩插件，比方webpack框架的uglifyjs插件。 ...

作者：Ahmad shaded译者：前端小智起源：sitepoint点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... CSS Viewport units(视口单位)在过来几年曾经呈现了，随着工夫的推移，越来越多的开发人员开始应用它们。它们的益处在于为咱们提供了一种不须要应用J avaScript 就能以动静的形式调整大小的办法。而且，如果它生效，也有很多备用计划。 在本文中，咱们将学习 CSS Viewport units(视口单位)以及如何应用它们，并用列举一些常见问题及其解决方案和用例，让咱们开始吧。 简介依据CSS标准，视口百分比单位绝对于初始蕴含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位示意根元素宽度的百分比。1vw等于视口宽度的1%。 视口宽度vw单位示意根元素宽度的百分比，1vw等于视口宽度的1%。 假如咱们有一个元素与以下CSS： .element { width: 50vw;}当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px视口高度vh单位示意根元素高度的百分比，一个vh等于视口高度的1%。 咱们有一个元素与以下CSS: .element { height: 50vh;}当视口高度为290px时，70vh计算如下: height = 290*70% = 202px大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。 Vmin 单位vmin示意视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将依据高度计算该值。 咱们以上面的例子为例。 咱们有一个横屏手机，其中有一个元素具备vmin单元。在这种状况下，值将依据视口高度计算，因为它小于宽度。 .element { padding-top: 10vmin; padding-bottom: 10vmin;}这是vmin的计算形式： 正如你所猜想的，计算结果如下所示 padding-top = (10% of height) = 10% * 164 = 16.4px padding-bottom = (10% of height) = 10% * 164 = 16.4pxVmax 单位vmax与vmin相同,该值是vw 和 vh 中的较大值。 ...

html+css高级开发工程师 html简介www维网（环球信息网）简称web分为 Web客户端 和 Web服务器程序WWW能够让 Web客户端（罕用浏览器）拜访浏览 Web服务器上的页面W3C万维网联盟 文件名的命名标准：不能数字结尾，在我的项目中不可用汉字命名。不能呈现特殊字符 html概念： 1.形容网页的语言2.超文本标记语言，由一套标记标签组成3.不是编程语言申明：通知浏览器用什么规范去解析网页 网页的组成部分：结构层，表示层，行为层 标签：概念： 1.由<>突围的关键词2.标签通常成对呈现，分为标签结尾和标签结尾3.有局部标签是没有完结标签，成为单标签，单标签内必须用 / 结尾组成： 标签名 标签内容 标签属性语义化标签：概念：依据标签名就能判断出标签内容作用： 1.网页构造档次更清晰。 2.更容易被搜索引擎收录 3.更容易让屏幕阅读器读出网页内容。注：页面中所有的内容，都要放在 HTML 标签中 标签的内容能够是其余标签题目标签<h1 id="main">题目1</h1><h2>题目2</h2><h3>题目3</h3><h4>题目4</h4><h5>题目5</h5><h6>题目6</h6> 段落标签<p>段落标签<p>十分棒</p></p>换行标签<br/>水平线<hr/>强调标签<em>歪斜</em><i>歪斜</i><strong>强健</strong><b>加粗</b>图片标签<img src="img/dada.png" alt="dada" title="图"/><img src="img/dada.png" alt=""/>超链接<a href="http://www.baidu.com" target="_blank">百度</a><a href="#main">主题</a><a href="mailto:xxxxx@163.com">关上邮箱</a><a href="笔记1.html#footer">跳转到笔记1的底部</a>列表标签<ul> <li> <a></a> </li> <li>2</li> <li>3</li></ul><ol> <li>a</li> <li>b</li> <li>c</li></ol><dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> <dt>第二章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> <dt>第三章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd></dl>表格标签<table border="1" width="800"> <caption>通讯录</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td rowspan="2">dada</td> <td>123456789</td> <td rowspan="2">dada</td> </tr> <tr> <td>123456789</td> </tr> <tr> <td>2</td> <td>dada</td> <td>123456789</td> <td>dada</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="right">共2人</td> </tr> </tfoot></table>表单标签<form action="" method="post"> 用户名：<input type="text" name="username"/><br/> 明码：<input type="password" name="password"/><br/> 性别： <input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女 <br/> 喜好： <select name="like"> <option value="看书">看书</option> <option value="游览" selected="selected">游览</option> <option value="静止">静止</option> <option value="购物">购物</option> </select> <br/> 个人简介： <textarea cols="50" rows="10"></textarea> <input type="button" name="but" value="按钮"> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"></form>无语义标签<div></div><span></span>模块划分常见的企业站，多由头部区，展现图片区域，主题区域，底部信息区域组成css的语法和选择器css概念：CSS 全称为层叠样式表，它次要是用于定义HTML内容在浏览器内的显示款式。引入形式：1.内部款式引入 link @import2.外部款式 代码通常寄存在<style></style>标签内3.内联款式语法：css 款式由选择符和申明组成，而申明又由属性和值组成 选择符{属性:值}例：p{color:red;} 选择符：又称选择器，指明网页中要利用款式规定的元素选择器：标签选择器类选择器id选择器通配符选择器后辈选择器子元素选择器群组选择器伪类选择器背景：背景色彩 background-color背景图片 background-image背景图片地位 background-position背景图片反复 background-repeat背景图片定位 background-attachment:scroll/fixed简写：background:#ff0000 url(bg01.jpg) no-repeat fixed center重点：link和@import的区别（无款式闪动问题FOUC）@import是 CSS 提供的语法规定，只有导入样式表的作用；link是HTML提供的标签，不仅能够加载 CSS 文件，还能够定义 RSS、rel 连贯属性等。 ...

1.文档流文档即一个网页，文档流处在网页的最底层，它示意的是页面中的一个地位，咱们所创立的元素默认都处在文档流当中。通过浮动和定位能够脱离文档流。元素在文档流中的特点 块元素：1.块元素会在文档流中独占一行，块元素会至上而下排列。2.块元素在文档流中的宽度默认值为auto（主动），即为父元素的100%。3.块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为0，有内容的话，内容多少它就多少。 内联元素：1.内联元素在文档流中只占本身大小，默认从左向右排列。如果一行中无奈包容所有内联元素，则会换行，持续自左向右排列。2.在文档流中，内联元素的宽和高都默认被内容撑开。 2.浮动-float属性float属性能够使元素浮动，从而脱离文档流。可选值： none：默认值，元素默认在文档流中排列。right：元素立刻脱离文档流，向页面的右侧浮动。left：元素立刻脱离文档流，向页面的左侧浮动。特点介绍： 当一个元素设置浮动后（非none值）；元素立刻脱离文档流，元素脱离文档流后，它本来的地位将会失去，后边的元素会立刻顶上。元素浮动后，会尽量向页面的右上（right）或左上（left）浮动，直到遇到父元素的边框或者其余浮动元素，而且在浮动元素的额上边本来有一个块元素，该块元素没有浮动，浮动元素不会超过该块元素，即不会越界上一行。浮动元素也不会超过它的上一个浮动元素，最多和上一个同一行（地位不够会转行），不会因为上上个浮动元素后还有块地位，因容不下上个浮动元素而空出，却能容下本浮动元素，而跨上一个取上上个边上。 浮动的元素不会笼罩文字，文字会盘绕在元素的四周。所以咱们能够通过设置浮动来做一个文字的成果，就文字所在的块元素不必固定大小，让文字自在撑开。个别没有设置固定宽度和高度的块元素，其宽度是默认占满一行（父元素的100%），然而被设置浮动后，它的宽度和高度都会默认被内容撑开。没有内容即为0.内联元素脱离文档流后会变成块元素。3.高度塌陷问题在文档流中，父元素的高度是默认（未固定高度即默认）被子元素撑开的。子元素的高度也就是父元素的高度。然而有一种状况，当子元素设置浮动后，其齐全脱离文档流。这时会导致子元素无奈撑起父元素的高度（子元素脱离文档流后不会保有原来空间），于是父元素高度塌陷。父元素高度塌陷后，其余元素就会向上挪动，导致页面凌乱。 如图：原来未设置浮动： 设置浮动后：显著父元素边框重合了，父元素高度塌陷 4.高度塌陷问题解决方案在开发中要避免出现高度塌陷问题，咱们尽管能够把父元素高度写死以防止高度塌陷问题，然而当父元素高度被写死后，父元素的高度就不能主动适应子元素的高度了。所以不举荐将父元素高度写死。解决办法：开启BFC原理：依据W3C规范，页面中的元素都有一个暗藏的属性Block formatting context(块级格式化背景)，简称BFC。该属性能够关上或者敞开，默认状况下是敞开的，咱们要关上它（无奈间接关上）。当开启元素的BFC当前，元素将会具备如下的个性： 1.父元素的垂直外边距不会和子元素重叠2.开启BFC的元素不会被浮动元素所笼罩3.开启BFC的元素能够蕴含浮动的子元素开启BFC的办法： 设置元素浮动；   应用该办法开启BFC，尽管能够撑开父元素，然而会使父元素宽度失落（因为父元素浮动），而且会导致下边的元素上移，无奈解决问题。设置元素相对定位；（前面具体说；） 设置元素display为inline-block；   能够解决问题，然而会使父元素宽度失落。不举荐应用。将元素的overflow设置为一个非visible的值。（举荐应用，应用hidden副作用最小）扩大： 在ie6及以下不反对BFC，要兼容ie6就要应用另一个ie6这些版本的暗藏属性-----hasLayout；与BFC相似，最好的开启办法就是设置zoom值，zoom示意放大元素（只被ie反对），值为一就是不放大，其余设置width值也能够开启。zoom:1; 5.革除浮动元素浮动会导致下一个元素向上移，即下一个元素收到了浮动元素的影响，而革除浮动就是打消上一个元素浮动后对本人的影响。革除元素应用clear属性。可选值：none：默认值；不革除浮动；left：革除向左侧浮动元素对以后元素的影响，革除浮动后，上一个元素尽管向左侧浮动，本人自身元素也不会向上挪动。right：革除向右浮动元素对以后元素的影响。both：革除两侧浮动元素对以后元素的影响（实质就是革除对本人影响最大的哪个浮动元素的影响）。 6.解决高度塌陷最终计划（应用clear）1.增加div间接在父元素里的最开端的地位增加一个div，这个div没有设置浮动，就靠这个div来撑开父元素，而后对这个div设置革除浮动，clear:both;,就解决了父元素高度塌陷。这个办法根本没有副作用（w3c举荐）。全浏览器兼容。然而这种办法会向页面中增加多余构造，一个空div。 2.应用css中的after伪类通过after伪类向父元素的开端增加一个空白的块元素，而后对其革除浮动，应用它来解决父元素高度塌陷。和间接增加div原理一样，但不会增加多余的构造，十分举荐应用。 .clearfix:after{/*当前这个clearfix类能够增加到任何高度塌陷的元素中解决问题*/content:"";/*增加一个空元素*/display:block;/*使其变为块元素*/clear:both;/*革除两侧浮动*/}/*更加优良的版本(即思考了高度塌陷又思考了父子元素垂直外边距重叠问题)*/.clearfix:before,.clearfix:after{content:"";/*增加一个空元素*/display:table;/*使其变为块元素*/clear:both;/*革除两侧浮动*/}.clearfix{zoom:1;}毛病：ie6中不反对after伪类，须要hasLayout来解决，要兼容ie6还要写个.clearfix{zoom:1;}； 7.定位定位：将指定的元素摆放到页面的任意地位。也就是说通过定位就能任意的摆放元素。 如何设置？——通过position属性来设置元素的定位。可选值： static：默认值，没有开启定位。relative：开启元素的绝对定位。absolute：开启元素的相对定位。fixed：开启元素的固定定位。(非凡的相对定位)1.绝对定位（输出多个div的技巧：div.box$*3——一回车就能生成class值box1到box3的三个div）当position属性设置为relative值后position:relative;既是开启了绝对定位。留神： 但开启了元素的绝对定位后，不设置偏移量元素是不会有变动的。所以要设置几个无关偏移量的值：left：元素绝对于其定位地位的左侧偏移量。right：元素绝对于其定位地位的右侧偏移量。top：元素绝对于其定位地位的上边的偏移量。bottom：元素绝对于其定位地位的下边的偏移量。（通常就只应用两个偏移量就能对元素进行定位，一个程度方向的，一个垂直方向的） position:relative;left:200px;top:200px;绝对定位是绝对于元素在文档流中原来的地位进行的定位。绝对定位不会脱离文档流，只是地位变动，原来的地位也还留着。绝对定位会使元素晋升一个层级，即与其余元素重合后会笼罩对方。绝对定位不会扭转元素的性质，块还是块，内联还是内联2.相对定位当position属性设置了absolute值后就开启了相对定位。position:absolute;相对定位特点： 开启相对定位，会使元素脱离文档流。开启相对定位后，如果不设置偏移量（其实有默认偏移量，对于真正原点，就是他原来地位的值），元素不会偏移地位，只是下一个元素会因为本元素脱离文档流而往上走。相对定位是绝对与它最近的先人元素（必须也开启了定位）进行定位的。（个别状况下咱们开启了子元素的相对定位，都会开启父元素的绝对定位）如果所有的先人元素都没有开启定位，则会绝对于浏览器的窗口进行定位，例如：左上角的原点（left:0px，top:0px）就是页面窗口的左上角。 相对定位会使元素晋升一个层级。相对定位会扭转元素的性质（因为脱离文档流的起因），内联元素变成块元素，而后块元素默认被内容撑开。3.固定定位当position属性设置fixed值后就开启了固定定位。position:fixed;固定定位也是一种相对定位，它的绝大多数特点都和相对定位一样。非凡点（不一样的中央）： 固定定位仅仅绝对于页面窗口进行定位，不论父元素开没开启定位。固定定位会固定在窗口的某个地位，不会随着窗口滚动条滚动隐没。例子：一些视频，随着你往下翻网页始终保留视频窗口播放，还有就是一些广告始终在你背后，你挪动它也动，始终在原来屏幕哪个地位。ie6不反对，固定定位在那就和相对定位一样。 8.层级1.层级常识如果定位的元素层级一样（都被设置定位，但没有设置层级），则上面的元素盖住下面的元素。通过z-index属性能够设置元素的层级，通过向z-index设置一个正整数作为值，该值就会作为以后元素的层级，层级越高越优先显示。（没有设置的默认低于设置了的）对于没有开启定位的元素不能设置层级，设置了也没用。父元素的层级再高也不会盖住子元素，即子元素永远在父元素下面。 2.通明设置opacity：用来设置元素背景的通明属性。它须要一个0~1之间的数值来设置透明度。opacity:1;不通明；opacity:0;全透明即：0：全透明；1：不通明；0.5：半透明；留神：opacity在ie8及以下不被反对。所以ie8及以下要用其余属性代替；filter滤镜属性，语法如下：filter:alpha(opacity=50);半透明须要一个0~100的值；0：全透明，100不通明，50半透明。 本文章只总结了最罕用的办法属性，但足够应用与上手，更多属性可查看文档。感激浏览，心愿有大佬能指出问题！

css/* content */正文无奈嵌套 旧版浏览器中能够应用<!-- --> 及 //,不举荐 html<!-- 正文 -->留神：不要应用//及/** 正文*/，打包容易呈现问题js可应用： // 正文/**正文*/不可应用： <!-- 正文 --> 参见:(https://developer.mozilla.org...

橘右京的某个哥哥橘左京1.SEO介绍SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种形式：利用搜索引擎的规定进步网站在无关搜素引擎内的天然排名。目标是让其在行业内站在领先地位，获取品牌效益。很大水平上是网站经营者的一种商业行为，将本人或公司排名前移。 2.百度搜寻排名流程1).放出蜘蛛(百度爬虫)2).蜘蛛来抓取数据3).页面的收录4).算法计算得分5).排名 3.搜素引擎爬虫搜索引擎会模拟普通用户，抓取网站无效信息，若网站须要登录才可拜访蜘蛛很难收录除非这种网站流量较多。蜘蛛会有两步操作，来访和返回，来访是蜘蛛到网站上进行数据爬取，爬取实现后会将页面数据返回百度，百度会对页面进行计算，若页面品质不合格，蜘蛛对网站的匍匐次数就会缩小。 4.网络爬虫的治理规定1.每个网址链接都是蜘蛛的入口，当链接长度越长时，蜘蛛拜访越慢，会导致匍匐次数缩小。2.域名尽量抉择英文命名形式。3.晋升网站访问速度，若拜访较慢，则收录概率较低。4.辨认难度的问题，像图片、视频辨认难度较高，个别不会辨认。之所以bilibili视频网站的排名这么高，除了优化问题还有就是因为流量大。5.无效收录，有价值的信息。6.一个页面有15个链接以上更容易被收录。7.拜访日志，访客拜访网站服务器会生成一个文档记录当天数据值。若蜘蛛拜访次数少阐明品质较差。 根目录：wwwlogs->压缩包解压->.log改为txt->用Excel关上 5.如何晋升网站的收录数量百度放出蜘蛛，蜘蛛来到页面获取数据之后会返回到百度，通过一系列计算失去页面是否有价值，若是无价值内容，对百度就是一种差评所以收录几率极小，若页面有价值，百度就会珍藏起来，只有珍藏后能力取得排名的资格，收录数量越多排名机会越大，然而百度有一个收录品质评级，分为无效收录和有效收录，如是有效收录，百度会给予惩办，如降权。 页面可间接提交百度收录就行收录操作。 6.网站权重百度站长平台正式收回布告：百度 pagerank、百度权值是不存在的。但到底是否存在须要进一步求证。若想减少权重，最简略粗犷的形式就是减少网站在搜索引擎的日点击量。 7.高级SEO外围数据计算1.展示量：假如网站排名在第九名，滑倒最上面看到本网站，就算一次展示量。2.点击量：用户在搜索引擎点击本网站3.点击率：点击次数/展示量4.访问量：一天有多少用户拜访过本网站5.跳出率：进入本网站后接着敞开6.停留时间：用户在本网站的停留时间 8.关键词抉择的四大技巧1.指数(百度指数): 应用百度人群的搜寻习惯 抉择关键词500-600指数之间2.相干后果:抉择1000万左右相干后果的关键字3.商业价值4.首页及题目关键词数量（Title） 9.TDKTDK是SEO界的三大标签，排名若存在打分100分，好的TDK占40% T：题目 影响网站在行业网站排名的重要因素之一D：网站形容 依据用户需要书写，决定用户是否想要点击的欲望K：关键字 题目书写规格：关键词1-关键词2-关键词3-品牌词 表述书写规格：60-80字 超出80会以省略号显示，抓住用户需要(1.用户的痛点 2.行业的劣势 3.蕴含关键字) 举例：山东信息科技有限公司具备12年电器零碎行业研发教训，专一打造高质量空压机品牌。主营：空气压缩机、低压空压机、无油空压机等设施研发，平安，耐用保修。 10.高阶栏目打造栏目的作用是疏导用户点击，即足够吸引人，抓住用户的需要。将栏目依据用户需要从重要到不重要顺次排开，以用户需要划分，不得超过九个。 如：网站在搜索引擎中是以得分来排名的，当网站存在肯定用户后拜访栏目，即可带动其余栏目的拜访。如果栏目过多，总分一百分十个栏目得分平均分只能非常，如果有五个栏目，每个栏目可得二十分，再将这二十分顺次划分到文章，就影响到了文章页面的排名，栏目越少，文章栏目排名就可能越靠前。可通过百度搜素的举荐进行栏目的设定。 11.利用锚文本晋升网站收录锚文本的作用： 1）达到站内站外跳转的目标。一个网站的点击率越高阐明网站品质越高，越容易取得排名。2）减少用户停留时间，跳转到新的链接既有了访问量又有了停留时间。3）减少蜘蛛的匍匐。蜘蛛在爬取网站的时候遇到超链接会跳转进去接着爬，蜘蛛存准率较高。 高质量锚文本要求： ①链接文字与跳转页面内容相符②链接文字最好应用排名关键字（TDK中蕴含的文字）③锚文本设置密度不应过多（不超过1%）④不应多个锚文本跳转同一个链接（会造成回链）⑤站在用户需要，若有大量锚文本并且不被点击可能会导致收录排名较差。 12.网站文章书写的技巧1）百度激励原创，但更谋求用户体验，初期网站倡议应用伪原创（修修改改）2）图文联合，倡议配三张图片，减少用户停留时间。3）字数要求，不低于800字，若未达到八百字百度根本不会认可文章内容。4）不可乱写，会影响无效收录 。（无效收录：点击率、停留时间长）5）开掘关键词，应用长尾关键词。 13.高级SEO外链算法外链作用：将链接放至其余网站，咱们网站就从别人网站上取得了用户，从而百度计算咱们文章排名的几率大大增加。能够吸引蜘蛛。 2012年百度推出绿萝算法，专门打击有效，低质外链。 若做外链就要抉择外链平台，搁置咱们的锚文本链接，对链接进行文字描述疏导用户点击(最全的免费电影网站:www.*.),切记不可形容与链接不符造成影响网站整体排名，不可将同样的文字描述发到不同网站，百度绿萝算法会进行检测，对网站排名起到副作用。 14.通过友情链接晋升排名友情链接即为链接调换，挂上对方的网站链接像交朋友一样。作用是可带动网站之间的互动性。若是新站，百度蜘蛛很少会爬取网站，就可通过替换友链来达到优化新网站的目标。 友情链接替换规定： 1）友情链接替换至30个左右，过少会施展不了价值，过多会导致蜘蛛扩散。2）抉择周边行业或同行业3）尽量抉择高权重站点替换4）新站替换链接可抉择一些高质量站点 15.闪电算法-秒排的数据要求百度针对网站加载速度优化规定： ①小于2S(加分项)②2S-3S(不扣不加)③大于3S(扣分) 影响网站加载速度的相干因素：①抉择谬误模板②代码优化问题③过多的CSS④连累加载(超多图片、视频多媒体文件)⑤服务器性能 16.网站SEO域名抉择形式网站优化理论在建站的时候就曾经开始布局，域名间接决定了用户对网站的记忆属性，它分为三局部，前缀、主体、后缀，最重要的就是主体局部，可抉择全拼及缩写，代表公司或产品的域名。 如：www.bilibili.* 在百度搜bilibili B站的域名也会被标红，有助于对网站的排名。 17.H标签的细节优化H标签是HTML的一种代码格局，百度蜘蛛抓取一篇文章会有一个重点，就是H标签，蜘蛛会认为这是等级最高的一种代码标签，优先获取外面的内容（<h1>*</h1>），<h1>个别只有一个,将文章命名为符合实际内容含有关键字的题目。 18.nofollow的实用技巧nofollow的作用是通知蜘蛛不要来爬取链接或对链接调配权重或分数。 写法：< a target='blank_' rel='nowfollow' herf='/index.html'>AAAA< /a > 利用范畴： 1）内部链接 ①他人到你网站删挂外链要给他加nowfollow，否则会蜘蛛跑到他人网站。②若网站存在QQ客服聊天，QQ客服链接也要挂上nowfollow③广告也要挂上nowfollow 2）不须要的页面 ①对于咱们②分割咱们（因为这两种页面不须要排名，可适当依据本人的需要进行调整） 19.网站ALT代码优化alt代码的作用是给图片加以阐明，因为蜘蛛抓取数据的时候辨认图片难度会很高，若蜘蛛很难判断网站的内容可能会不收录或升高排名，这时ALT的作用就凸显进去了，有alt和无alt得分差异会很大。 例：若文章内容是冬季绿萝的养护办法，配图是一张绿萝，咱们就能够给图片命名为绿萝的养护办法或更细腻的一种形容 20.企业网站的优化做网站要谋求到一个点叫做人无我有，人有我优，后期站点是没有流量的只能依附蜘蛛去做优化，前期站点可通过流量，因为有原始用户的积攒。 企业站点分为两类： ①专门提供产品服务的站点 若是多种类型产品，栏目决定了网站优化方向，除了首页外首先应该划分产品类别，将产品类别再具体划分为热门产品，其余栏目可划分产品价格、培修保障、公司保障、产品案例，抓住用户的需要去划分类别。 ②线上提供某种服务需要的站点 例如装修、搬家、开锁等站点，可划分服务分类、服务流程、服务区域、服务价格等。 ...

什么是变量呢？ Sass 中的变量能够用来存储一些信息，并且重复使用。变量能够存储的信息包含字符串、数字、布尔值、色彩值等等。 申明变量Sass 中申明变量须要用到 $ 符号，格局为： $变量名: 变量值;示例：例如上面咱们定义一个变量，并给这个变量赋了一个色彩值： $color:red;.xkd{ color: $color; a{ background-color: $color; }}执行编译命令，编译后的 CSS 代码如下所示： .xkd { color: red;}.xkd a { background-color: red;}定义好变量后，在须要应用到 red 色彩时，就能够间接应用变量名来代替这个色彩值。当然，当初这样看咱们还是不太分明为什么要应用变量，没有看出变量的劣势。然而如果咱们在一个大型项目中，定义变量会很有用，例如咱们可能会在多个中央应用同一个色彩值，如果前期须要对这个色彩值进行批改，那么一个一个去找会很麻烦，而如果定义了变量，就只须要批改变量的值即可。 默认变量Sass 的默认变量须要在值的前面加上 !default 。默认变量个别用来设置默认值，也就是说当某个变量定义了一个默认值，然而又呈现另外一个值时，无论谁先被定义，默认值都会被笼罩。 示例：看上面这段代码： $fsize: 14px;.xkd{ $fsize: 12px!default; font-size: $fsize;}编译成 CSS 代码后： .xkd { font-size: 14px;}上述代码中，咱们先定义了一个全局变量 $fsize 并赋值为 14px ，而后在 .xkd 选择器中给 $fsize 变量赋了一个 12px 的值，按理来说会优先应用 12px，然而因为在 12px 前面加了一个 !default，变成了一个默认值，最初输入的 CSS 代码中，应用的是 14px。 变量的作用域Sass 中反对两种类型的变量，即局部变量和全局变量。默认状况下定义在选择器之外的为全局变量，全局变量的作用域为全局，能够被所有的选择器拜访。定义在选择器内的为局部变量，局部变量的作用域只能在以后层级上有成果。上面咱们通过一个例子来看一下局部变量和全局变量的应用。 示例：$color: #ccc; // 全局变量.one{ $color: #eee; // 局部变量 background-color: $color;}.two{ background-color: $color;}编译成 CSS 代码： ...

变量的申明和应用1. 申明： --variable-name: variable-value;申明变量时，变量名后面要加两根连词线（--）。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。 :root{ --color: red;}2. 应用：应用var(变量名)来应用一个变量 #div { color: var(color)}var()函数还能够应用第二个参数，示意变量的默认值。如果该变量不存在，就会应用这个默认值。 color: var(--foo, #7F583F);第二个参数不解决外部的逗号或空格，都视作参数的一部分。 var(--font-stack, "Roboto", "Helvetica");var(--pad, 10px 15px 20px);3. 变量组合应用能够组合应用：当变量的值是字符串时，能够间接拼接，如下 :root{ --screen-category: 'category' //变量值是字符串}body:after { content: '--screen-category: 'var(--screen-category); // 间接拼接}当变量的值是数值时，必须应用calc()函数计算，就算还是简略的单位拼接 .foo { --gap: 20; /* 有效 */ margin-top: var(--gap)px;}.foo { --gap: 20; margin-top: calc(var(--gap) * 1px);}如果变量值带有单位，就不能写成字符串。 /* 有效 */.foo { --foo: '20px'; font-size: var(--foo);}/* 无效 */.foo { --foo: 20px; font-size: var(--foo);}4. var()函数还能够用在变量的申明 :root { --primary-color: red; --logo-text: var(--primary-color);} 留神，变量值只能用作属性值，不能用作属性名。 ...

 大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！ 明天小编举荐一款轻量级开源的前端框架UIkit，UIkit能够帮忙你疾速的开发和创立前端UI界面，反对LESS、模块化、自定义主题、及响应式设计。 案例展现 上面小编收集几个基于UIkit框架制作的优良网页作品，小编就不上链接了，本人搜寻哈，防止广告嫌疑。 UIkit 代码汇 魔工坊 衫小寨 融聚通 班得瑞全球网 宾果 Altair(后盾) 减肥 LOOP 结尾 本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！ 心愿能与大家独特学习交换,欢送关注我的公众号【Github导航站】。

本文属于 CSS 绘图技巧其中一篇，系列文章： 在 CSS 中应用三角函数绘制曲线图形及展现动画CSS奇思妙想 -- 应用 CSS 发明艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相干属性，制作一些略微简单、酷炫的背景。 通过本文，你将会理解到 CSS background 中更为弱小的一些用法，并且学会利用 background 相干的一些属性，采纳不同的形式，去发明更简单的背景图案。在这个过程中，你会更好的把握不同的突变技巧，更深层次的了解各种不同的突变。 同时，借助弱小的 CSS-Doodle，你将学会如何使用一套规定，疾速创立大量不同的随机图案，感触 CSS 的弱小，走进 CSS 的美。 背景基础知识咱们都晓得，CSS 中的 background 是十分弱小的。 首先，温习一下根底，在日常中，咱们应用最多的应该就是上面 4 种： 纯色背景 background: #000： 线性突变 background: linear-gradient(#fff, #000) : 径向突变 background: radial-gradient(#fff, #000) : 角向突变 background: conic-gradient(#fff, #000) : 背景进阶当然。把握了根本的突变之后，咱们开始向更简单的背景图案进发。我最早是在《CSS Secret》一书中接触学习到应用突变去实现各种背景图案的。而后就是一直的摸索尝试，总结出了一些教训。 在尝试应用突变去制作更简单的背景之前，列出一些比拟重要的技巧点： 突变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient，对于 background 而言，它是反对多重突变的叠加的，一点十分重要；灵便应用 repeating-linear-gradeint（repeating-radial-gradeint），它能缩小很多代码量transparent 通明无处不在尝试 mix-blend-mode 与 mask，创立简单图案的灵魂应用随机变量，它能让一个 idea 变成有数漂亮的图案接下来，开始组合之旅。 应用 mix-blend-modemix-blend-mode ，混合模式。最常见于 photoshop 中，是 PS 中非常弱小的性能之一。在 CSS 中，咱们能够利用混合模式将多个图层混合失去一个新的成果。 ...

摘要：本文涵盖了20个CSS技巧，能够解决许多工作中常见的问题， 让你也成为一个CSS高手。本文涵盖了20个CSS技巧，能够解决许多工作中常见的问题， 让你也成为一个CSS高手。 1、应用CSS重置（reset） css重置库如normalize.css曾经被应用很多年了，它们能够为你的网站款式提供一个比拟清晰的规范，来确保跨浏览器之间的一致性。 大多数我的项目并不需要这些库蕴含的所有规定，能够通过一条简略的规定来利用于布局中的所有元素，删除所有的margin、padding扭转浏览器默认的盒模型。 *{box-sizing:border-box;margin:0;padding:0} 应用box-sizing申明是可抉择，如果你应用上面继承的盒模型模式能够跳过它。 2、继承盒模型 让盒模型从html 继承： html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } 3、应用flexbox布局来防止margin的问题 （Get Rid of Margin hacks width Flexbox） 当你多少次试着去设计栅格布局如：组合或者图片画廊，如果应用浮动的形式，那么就须要去革除浮动和重置外边距来使其分解成所须要行数。为了防止nth-、first-、last-child 问题 ，能够应用flexbox 的space-between 属性值 .flex-container{display:flex;justify-content:space-between;}.flex-container .item{ flex-basis:23%;} 4、应用:not() 解决lists边框的问题 在web设计中，咱们通常应用：last-child nth-child 选择器来笼罩原先申明应在父选择器上的款式。比如说一个导航菜单，通过应用borders 来给每个链接Link创立宰割符，而后再在加上一条规定 解除最初一个link的border .nav li { border-right: 1px solid #666; }.nav li:last-child { border-right: none; } 这是一种很凌乱的形式，它不仅强制浏览器以一种形式渲染，而后又通过特定的选择器来撤销它。这样笼罩款式是不可避免的。然而，最重要的是，咱们能够通过应用：not伪类(pseudo-class) 在你想申明的元素上仅仅只应用一种款式： .nav li:not(:last-child) { border-right: 1px solid #666; } ...

解决长短内容长内容overflow-wrap用来阐明当一个不能被离开的字符串太长而不能填充器包裹盒时，避免溢出，浏览器是否容许单词中断换行。 硬换行：在文本的换行点插入了理论换行符软换行：文本实际上仍在同一行，但看起来被分成了几行。word-break-all:break-all让长英文单词属于软换行~~~~overflow-wrap属性是word-wrap属性，参数：normal | break-word | anywherenormal:只在容许的断字点换行(浏览器放弃默认解决)break-word:在长单词或URL地址外部进行换行，不必思考单词的完整性。anywhere:anywhere和break-word的异同 在失常状态下， anywhere 和 break-word 的体现是一样的，即如果行中没有其余可承受的断点，则能够在任何点断开本来不可断开的字符串（如长单词或URL），并且在断点处不插入连字符。（间断的英文字符如果能够不必断就一直，如果切实不行，就断开，因而相比break-all可能会留白。） anywhere 和 break-word 的不同之处 在 overflow-wrap:anywhere 计算最小内容尺寸的时候会思考软换行，而 overflow-wrap:break-word 不会思考软换行。 Hyphens用来告知浏览器在华航是如何应用连字符连贯单词，能够齐全阻止应用连字符串，也能够管制浏览器什么时候应用，或者让浏览器决定什么时候应用。 .element{ hyphens:auto;}文本截断解决截断是指在句子的开端增加点，以表明有更多的文本内容。 .element{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}多行文本截断解决如果要截断多个行，能够应用line-clamp属性。 .element{ display:-webkit-box; -webit-line-clamp:3; //指定截断~~~~的最大行数 -webkit-box-orient:vertical; overflow:hidden;}如果为元素增加padding,容易失败，导致显示下一行的一部分(应该被截断) 程度滚动截断或连贯一个单词，使代码折行显示，达不到想要的成果 overflow-wrap:break-word; overflow-x:auto; //程度滚动短内容设置一个最小宽度min-width 用例和示例集体资料卡/* 1*/.element{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;~~~~}/* 2*/.element{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}导航项在解决多语言布局时，内容长度会发生变化。最好为导航项设置最小宽度。 文章内容长单词或者链接在溢出导致程度滚动后，能够应用goverflow-wrap或者hyphens 补充内容width属性参数： fill-available 主动填满残余空间，在div没有任何款式的时候，浏览器是赞找主动填充的款式出现的，就是100%width的款式填充的。max-content和min-content是会追随有定宽的最大最小宽度，不会进行膨胀。fit-content,能够实现元素膨胀成果同时，放弃本来的block程度状态，于是就能够应用margin:auto实现元素向内自适应同时的居中成果了。本文只作为学习记录。

前言常常在Codepen上看到大侠们用SVG画出不堪设想的动画，我始终很好奇他们是怎么运作的，总感觉这须要对SVG有足够透彻的理解，并且本人画出那些SVG图案，才有方法让他动起来。 但其实不然，明天教大家一个简略的小技巧，让你疾速实现一个svg动画！ 关上Codepen，点击界面中的build按钮，就能够应用动画构建一个房子，并且让它升起寥寥炊烟！???? codepen 寻找精美的svg图案既然本人画不进去，那咱们就去找现成的库，svg库有很多，如Flaticon、iconfont、Iconfinder或icons8等网站会提供很多收费的svg图案。 剖析svg图案关上devtool察看 svg 图案，你会看到上面的后果： element外头path跟circle都是svg的DOM元素，别离示意svg图案内的线条与圆形。 举个例子????： <path d="M 10 25 L 10 75 L 60 75 L 10 25">下面代码中的d的内容：M代表将笔挪动到(10, 25)，接着L画一条线到(10, 75)，最初回到终点画出一个三角形。 通过devtool，咱们能够看到每个path对应图案的哪个局部： 这时候应该造成思路，既然咱们能够晓得每个元素对应到图案的哪个局部，咱们就能够针对想要套上动画的DOM 元素来操作！ TimelineLite/TimelineMax 工具如果单纯通过id、className 来应用 CSS 或JavaScript 自行处理动画，难度还是颇高，更重要的是，要消耗大量的工夫 所以咱们得借用工具，Timeline(Lite|Max)跟TweenMax是出名的GreenSock Animation Platform（简称GSAP）推出的可创立时间轴（timeline）作为动画或其余时间轴的容器，这使得整个动画管制和准确治理工夫变得简略。 GSAP甚至为咱们提供了Ease Visualizer来展现每种Ease function的成果，更顺带附上代码： codepen 简略几句代码就能达到如下成果： 上手GSAPGSAP的API性能非常弱小????，还有相干社区：官网文档、论坛、TimelineMax中文手册 在一开始的房子构建????中，我次要应用的是TimelineMax的from与staggerFrom，这两个API只须要设定初始值，他会在指定工夫内将补间动画实现： tl.from("#House > rect:nth-child(24)", 1, { scaleX: 0, transformOrigin: "center", ease: Power2.easeOut })这一步咱们将CSS Selector #House > rect:nth-child(24) 这个元素，从scaleX为0开始，以center(核心)为变形终点，利用Power2.easeOut，在一秒内回复到原始状态，并执行补间动画。 ...

译者：前端小智作者：Nastassia Ovchinnikova起源：flatlogic.com点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... Vue 绝对不于 React 的一个长处是它易于了解和学习，且在国内占大多数。咱们能够在 Vue 的帮忙下创立任何 Web 应用程序。 因而，时时理解一些新呈现又好用的Vue 开源我的项目也是挺重要，一方面能够帮忙咱们更加高效的开发，另一方面，咱们也能够典范学习其精髓局部。 接下来看看新出的有哪些好用的开源我的项目。 uiGradients网址： http://uigradients.com/ GitHub： https://github.com/ghosh/uiGr... GitHub Stars: 4.6k 黑白阵列和杰出的UX使是这个我的项目的一个亮点，突变依然是网页设计中日益增长的趋势。 咱们能够抉择所需的色彩，并能够取得所有可能的突变，并获取对应的 CSS 代码， 连忙珍藏起来吧。 CSSFXCSS 适度成果的汇合 网址： https://cssfx.dev GitHub： https://github.com/jolaleye/c... GitHub Stars: 3.5k CSSFX 外面有很多 CSS 过滤成果，咱们能够依据需要抉择特定的动画，点击对应的成果即可看到生成的 CSS 代码，入手搞起来吧。 Sing App Vue Dashboard一个治理模板 网址： https://flatlogic.com/templat... GitHub： https://github.com/flatlogic/... GitHub Stars: 254 事例：https://flatlogic.com/templat... 文档：https://demo.flatlogic.com/si... 这是基于最新 Vue 和 Bootstrap 收费和开源的治理模板，其实跟咱们国内的 vue-admin-template 差不多。咱们不肯定要应用它，但能够钻研学习源码，置信能够学到很多实用的技巧，加油少年。 ...

1. 什么是css hack技术因为目前不同浏览器以及同一浏览器版本的不同导致同一页面源码显示成果不同，为了解决兼容性问题，满足用户应用体验，在满足公众浏览器的根底上为非凡浏览器编辑只有其所能解析的css，使得所有浏览器显示成果大抵统一。 1.1 应用弊病减少代码复杂度，不易保护 1.2 利用场景政府我的项目、学校我的项目等古老设施的开发才应用Hack，而当初的企业我的项目或电商我的项目不须要 2. 四大内核和五大支流浏览器因为浏览器最次要的局部就是浏览器的内核，也称为渲染引擎，次要用来解释网页语法并渲染到网页上，决定了浏览器该如何显示网页内容以及页面的格局信息。同时不同浏览器应用的内核存在不同，而不同内核对网页的语法解释也是不同的。因而相熟内核以及不同浏览器应用的内核状况对网页开发大有用途。 2.1 四大内核Trident（也称IE内核）webkitBlinkGecko2.2 五大支流浏览器IE 微软公司旗下浏览器，以IE和Windows捆绑的模式向市场扩大份额，因而目前装了Windows零碎的电脑都带有IE浏览器。Trident内核，也是俗称的IE内核Firefox Mozilla公司旗下浏览器Gecko内核，俗称Firefox内核Chrome google旗下的浏览器统称为Chromium内核或Chrome内核，以前是Webkit内核，当初是Blink内核Safari 苹果公司旗下的浏览器Webkit内核Opera 挪威Opera Software ASA公司旗下的浏览器最后是本人的Presto内核，起初是Webkit，当初是Blink内核；注: 五大浏览器采纳的都是单内核，而随着浏览器的倒退当初也呈现了双内核。像360浏览器、QQ浏览器都是采纳双内核，具体如下： 360浏览器、猎豹浏览器内核：IE+Chrome（Blink）内核搜狗、QQ浏览器：Trident(兼容模式) + Webkit（高速模式）百度浏览器：IE（Trident）内核2345浏览器内核：最开始是IE(Trident)内核，当初为：IE+Chrome内核3. css hack分类以及应用3.1 属性前缀法CSS款式属性名前加上一些只有特定浏览器能力辨认的hack前缀，以达到预期的页面展示成果用法 hack写法IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)IE10(S)IE10(Q)**colorYYYYNYNYNY++colorYYYYNYNYNY--colorYYNNNNNNNN__colorYYNYNYNYNN##colorYYYYNYNYNY\0color:red\0NNNNYNYNYN\9\0color:red\9\0NNNNNNYNYN!importantcolor:blue !important;color:green;NNYNYNYNYY正文：S示意规范模式，Q示意兼容模式 用例（不思考兼容模式下） <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> p { *color: red; } </style></head><body><p>yangshi</p></body>只有当浏览器为IE6/7规范模式下字体色彩显示为红色，其余浏览器及其他IE版本不显示。即当某些特定浏览器显示成果因为版本起因须要非凡设置时应用。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> p { color: red !important; color: green; } </style> </head> <body> <p>yangshi</p> </body>这个属性还是用的挺多的，因为IE6规范模式下不反对，因而以上状况IE6版本字体色彩为绿色，其余IE版本以及其余浏览器因为反对!import属性，因而不会被重写的color:green；笼罩掉。 3.2 选择器前缀法针对一些页面体现不统一或者须要非凡看待的浏览器，在CSS选择器前加上一些只有某些特定浏览器能力辨认的前缀进行hack网上资源图 用例： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <style> *html p { color: green; } </style></head><body><p>yangshi</p></body>以上代码只对IE6无效，其余浏览器不显示 ...

明天的知识点 (2021.02.03) —— 第659天 (我也要出题)[html] 你认为Html的术难点在哪？[css] 用css画一个篮球场地图[js] 请实现一个Promise.race[软技能] 前端性能的晋升能够分为哪些类？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

x1、CSS盒子模型与怪异盒模型1、规范盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。 规范盒模型下盒子的大小 = content + border + padding + margin 2、怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度 怪异盒模型下盒子的大小=width（content + border + padding） + margin 3、在ie8+浏览器中应用哪个盒模型能够由box-sizing（CSS新增的属性)触发， 默认值为content-box，即规范盒模型；如果将box-sizing设为border-box则用的是IE盒模型 4、box-shadow: h-shadow v-shadow blur spread color inset; h-shadow,v-shadow必须。程度，垂直暗影的地位。容许赋值。blur可选，含糊间隔。spread可选，暗影的尺寸。color可选，暗影的色彩。inset可选，将内部暗影（outset）改为外部暗影。 2、HTML5在标签、属性、存储、API上的新个性•标签： 新增语义化标签（aside / figure / section / header / footer / nav等）， 减少多媒体标签video和audio，使得款式和构造更加拆散 •属性： 加强表单，次要是加强了input的type属性； meta减少charset以设置字符集； script减少async以异步加载脚本 •存储：减少localStorage、sessionStorage和indexedDB，引入了application cache对web和利用进行缓存 •API：减少拖放API、天文定位、SVG绘图、canvas绘图、Web Worker、WebSocket 3、CSS3动画一：过渡动画---Transitions1：过渡动画Transitions 含意：在css3中，Transitions性能通过将元素的某个属性从一个属性值在指定的工夫内平滑过渡到另一个属性值来实现动画性能。 Transitions属性的应用办法如下所示： transition: property | duration | timing-function | delay transition-property: 示意对那个属性进行平滑过渡。 transition-duration: 示意在多长时间内实现属性值的平滑过渡。 ...

引子最近在应用第三方组件的时候，发现无奈在一个弹窗外面再次失常笼罩已有弹窗。首先想到跟重叠层级属性 z-index 无关，于是再次回顾总结一下。 OriginMy GitHubz-indexNamez-index可取值auto / <integer> / inherit默认值auto实用于定位元素继承性无定位元素是指 position 的值为非 static 的元素。对于定位元素，z-index 属性指定了： 盒子在以后重叠上下文（stacking context）中的重叠层级。盒子是否创立一个重叠上下文。取值有上面的含意： <integer> ：是生成的盒子在以后重叠上下文中的重叠层级。这个盒子也会创立一个新的重叠上下文。auto ：生成的盒子在以后重叠上下文中的重叠层级是 0 。这个盒子不会创立一个新的重叠上下文，除非是根元素。在 CSS 2.1 中，每个盒子在三个纬度上，都有一个地位。除了它们的垂直和程度地位，盒子沿着 “Z 轴”排列，且在另外某个层级之上格式化。当盒子在视觉上重叠时，与 Z 轴的地位关系密切。接下来会探讨盒子在 Z 轴上可能如何搁置。 渲染树绘制到画布上的程序是依据重叠上下文形容的。重叠上下文能够蕴含更多的重叠上下文。从父重叠上下文的角度来看，堆栈上下文具备原子单一性。 每个盒子属于一个重叠上下文。在给定的重叠上下文 A 中，每个已定位的盒子领有一个整数重叠层级，该整数重叠层级在 Z 轴上的地位，是绝对于在重叠上下文 A 中的其它重叠层级。 重叠层级高的盒子总是在重叠层级低的盒子之上格式化。盒子也可能有负的重叠层级。在同一重叠上下文中，雷同的重叠层级依据文档树的程序从后到前重叠。 根元素造成根重叠上下文。其它重叠上下文，由领有 z-index 属性值是 auto 之外有效值的任何非 static 定位元素产生。重叠上下文不肯定与蕴含块无关。在未来的 CSS 层级中，其它属性可能会引入重叠上下文，例如 opacity 。 在每个重叠上下文中，上面的层级依照从后到前的程序绘制： 造成重叠上下文元素的背景和边逛。负重叠层级的后辈重叠上下文。在文档流，非内联，非定位后辈。非定位浮动。在文档流，内联，非定位后辈，包含内联表格和内联块。重叠层级为 0 的后辈重叠上下文和重叠层级为 0 的定位后辈。有负数重叠层级的后辈重叠上下文。在每个堆栈上下文中，重叠级别为 0 、非定位浮动、内联块和内联表的定位元素，绘制时如同这些元素自身生成了新的堆栈上下文，但其定位的子体和任何可能的子重叠上下文都参加以后重叠上下文。 这个绘制程序递归的利用于每一个重叠上下文，具体的定义见 Appendix E 。 依据下面的规范形容，联合常见的状况，进一步了解。 示例雷同层级重叠这是示例页面，挪动端拜访如下： 后面有介绍，z-index 指定了在以后重叠上下文中的重叠层级，因而先要确定示例中的三个元素所在的重叠上下文是谁建设的。示例中只有三个元素及其父元素是定位元素，父元素没有指定 z-index ，所以其所在的重叠上下文由根元素建设。z-index 的值越大，显示越凑近用户，符合标准中的形容。 不同层级重叠不同层级之间还能够分为：父元素都没有重叠层级、父元素之一有重叠层级、父元素都有重叠层级。 ...

原创不易，如需转载请【分割作者】或【署名作者并注明文章出处】 js根底技术 VUE vue2 双向绑定原理 get时collect，set时notifyv-model原理，监听input输入框的input事件 如果间接document.querySelector('xxx input').value = new value，v-model对应的值会变动么，为什么input与change区别computed与watch区别this.$set与Vue.set区别vue实例与父子组件 vue组件内写的this指向谁计算属性，函数名和data数据源中的数据能够同名吗，为什么给vue定义全局的办法父子组件生命周期是如何串起来的组件通信计划project/reject的了解，应用时须要每一个组件内都注入么EventBus注册在全局上时，路由切换时会反复触发事件，如何解决呢父子组件如何拜访彼此的实例其余问题 vue2.0不再反对v-html中应用过滤器了怎么办函数式组件特点与利用场景vue为什么要求组件模板只能有一个根元素:class和:style有几种示意形式nextTick的原理spa的seo怎么做 ssr的渲染机会示什么v-for的key绑不绑定有什么区别 原地复用机制子级依赖索引问题vue router的原理 keep alive原理router link原理页面加载实现后，非以后路由的局部开始了生命周期么vue-cli 在应用vue-cli开发vue我的项目时，主动刷新页面的原理你理解吗vue-cli怎么解决跨域的问题，是什么原理diff算法 react与vue的区别、传统diff的局限、vdom如何进步性能vue3为啥更快vue3 proxy-reflect优化的起因对象的子级对象的双向绑定，vue是如何解决的composition API长处其余优化webpack vue文件是如何变成js文件的，有哪些环节 webpack build与vue-cli dev场景别离有什么区别webpack打包的流程、loader、plugin区别、polly-fill原理hash、content-hash、chunk-hash区别tree-shaking原理 模块标准的区别如何写一个兼容amd cmd的模块http get post区别 平安 / 幂等版本演进 tcp-ip握手与ssl握手 晓得ssl是非对称+对称加密常见端口号 204 206 302 304 403 503并发问题 反对多少tcp/ip并发每一个tcp-ip能够发送多个http么缓存策略 缓存优先级强缓存 晓得pragma有加分但不要求协商缓存 两种计划区别与各自的问题以及如何解决的同时应用两种协商缓存策略，如何解决的no-cache与no-store区别200 from memory cache 与 200 from disk cache区别之前我的项目的缓存策略跨域问题 起因与体现问题：server资源 / localstorage资源解决方案 cros能够配置什么内容postMessageAPI如何应用JSONP运行流程与限度nginx配置代理转发coop coep等【不硬性要求】原型链 如何获取一个对象的原型对象有哪些计划为何不倡议应用__proto__，以及应该怎么实现这种场景的需要1.__proto__和a = 1; a.__proto__有什么区别 拆箱与装箱primitive (primitive value, primitive data type)是什么primitive 可更改值么通过原型链实现继承有哪些计划 ...

原创不易，如需转载请【分割作者】或【署名作者并注明文章出处】 js根底技术 VUE vue2 双向绑定原理 get时collect，set时notifyv-model原理，监听input输入框的input事件 如果间接document.querySelector('xxx input').value = new value，v-model对应的值会变动么，为什么input与change区别computed与watch区别this.$set与Vue.set区别vue实例与父子组件 vue组件内写的this指向谁计算属性，函数名和data数据源中的数据能够同名吗，为什么给vue定义全局的办法父子组件生命周期是如何串起来的组件通信计划project/reject的了解，应用时须要每一个组件内都注入么EventBus注册在全局上时，路由切换时会反复触发事件，如何解决呢父子组件如何拜访彼此的实例其余问题 vue2.0不再反对v-html中应用过滤器了怎么办函数式组件特点与利用场景vue为什么要求组件模板只能有一个根元素:class和:style有几种示意形式nextTick的原理vue router的原理 keep alive原理router link原理页面加载实现后，非以后路由的局部开始了生命周期么vue-cli vue-cli怎么解决跨域的问题，是什么原理diff算法 vue3 proxy-reflect优化的起因对象的子级对象的双向绑定，vue是如何解决的composition API长处其余优化webpack vue文件是如何变成js文件的，有哪些环节 webpack build与vue-cli dev场景别离有什么区别hash、content-hash、chunk-hash区别tree-shaking原理 模块标准的区别如何写一个兼容amd cmd的模块http get post区别 平安 / 幂等版本演进 tcp-ip握手与ssl握手 晓得ssl是非对称+对称加密常见端口号 204 206 302 304 403 503并发问题 反对多少tcp/ip并发每一个tcp-ip能够发送多个http么缓存策略 缓存优先级强缓存 晓得pragma有加分但不要求协商缓存 两种计划区别与各自的问题以及如何解决的200 from memory cache 与 200 from disk cache区别之前我的项目的缓存策略跨域问题 起因与体现问题：server资源 / localstorage资源解决方案 cros能够配置什么内容postMessageAPI如何应用JSONP运行流程与限度nginx配置代理转发原型链 如何获取一个对象的原型对象有哪些计划为何不倡议应用__proto__，以及应该怎么实现这种场景的需要 通过原型链实现继承有哪些计划 注：prototype指向过来，肯定要constructor指向回来才算eventLoop setInterval的执行策略与setTimeout有什么区别栈与队列的概念 能够顺带聊一下 尾递归优化 不强求安全策略 xss三种，原理与防备xsrf原理与防备其余 promise all 如何容错式返回 手写一个all / race ...

上周咱们公布了 Flutter SDK，本周咱们来讲讲 Electron Demo 源码。Electron是由Github开发，是一个用 HTML、CSS、JavaScript 来构建桌面应用程序的开源库，能够打包为 Mac、Windows、Linux 零碎下的利用。在线上教育、视频会议等行业场景下，桌面端开发都是刚需，然而从0开始构建一套蕴含实时音视频和互动白板的云课堂或视频会议软件，须要破费很多工夫和人力。拍乐云Pano开源了 PanoVideoCall(以下简称PVC)的 Electron Demo源码，企业开发者可开箱即用，疾速打包上线。 一、丰盛的性能本次 Pano 开源的 PVC Demo 客户端反对丰盛的性能，可同时满足视频会议和1对N云课堂需要。客户端集成Pano高清实时通信sdk，可间接开启高性能音视频通信，反对桌面共享；同时集成Pano互动白板，实现根本的轨迹同步性能，还反对视角追随、文档转码、动静课件和激光笔等其余丰盛的性能，可能满足会议合作、白板教学等多种场景。 二、多平台反对本次 Pano 开源的 PVC Demo 客户端基于Electron，我的项目代码齐全应用Javascript编写，前端开发同学即可对接，无需 Native 开发，同时反对打包到Windows和macOS，大大降低了开发和保护的老本和难度。开源我的项目中曾经做好了 Windows 和 macOS 的打包配置，开箱即用，可间接运行打包命令打包到对应平台。 三、我的项目应用介绍1、依赖装置下载好我的项目代码之后，cd 到 Electron/PanoVideoDemoVue 目录，执行 yarn 或者 npm install 装置我的项目依赖(国内装置Electron 可能会比较慢，我的项目中曾经将下载源指定为 taobao 源) 2、编译运行间接在我的项目目录运行yarn dev 或者 npm run dev 启动我的项目 应用Mac 的开发者留神不要间接在 VSCode 集成的 shell 中执行，须要应用零碎的 shell 或者 iTerm 等运行指令，否则运行进去的利用将无奈弹出权限申请框导致解体3、设置appId和账号信息步骤 2 胜利运行后会主动生成如下的 app 界面弹出： 填入appId，token，channelId，userId 等即可开启通话。如果你还没有账号，能够进入拍乐云控制台页面（https://console.pano.video/#/user/register），依据领导创立拍乐云账号，再进入利用治理页面创立一个新的利用，取得 AppID，并生成 token。利用运行截图： ...

Crm-客户治理学习指标客户治理表结构设计客户信息管理模块表构造这里次要波及表: t_customer 客户表、t_customer_contact 客户来往记录表、t_customer_linkman 客户联系人表、t_customer_order 客户订单表、t_order_details 订单详情表 t_customer 客户信息表 字段 字段类型 字段限度 字段形容 主键 id int(11) 自增 id主键 khno varchar(20) 可空 客户编号 name varchar(20) 可空 客户姓名 area varchar(20) 可空 客户所属地区 cus_manager varchar(20) 可空 客户经理 level varchar(30) 可空 客户级别 myd varchar(30) 可空 客户满意度 xyd varchar(30) 可空 客户信用度 address varchar(500) 可空 客户地址 post_code varchar(50) 可空 邮编 phone varchar(20) 可空 联系电话 fax varchar(20) 可空 传真 web_site varchar(20) 可空 网址 yyzzzch varchar(50) ...

转瞬到这个二线城市曾经一段时间了，看着手机推送的对于北京的某某新闻，突然感觉到曾今奋斗（打工）的城市曾经离我千里之外了。 回忆从毕业到当初本人的一些变动，技术上从简直啥都不会到当初会写一点代码，心态上从十分迷茫焦虑到当初有本人的节奏，头发从毕业的繁茂浓密到当初的欠繁茂浓密????，这些年的经验，还是须要写一篇文章来回顾一下的，外面波及到程序员面试以及职业规划相干的货色不肯定适宜每个人，感兴趣的敌人能够和我探讨。 本文有两条主线，一条是工夫线，一条是我的集体打算线。 刚到北京大学毕业我就直奔北京，开启了我的程序员打工生存。 聊聊刚毕业这家公司吧，这个是一家做计算机视觉和AI的守业公司，如果是计算机视觉行业从业者，应该能够猜到这家公司的，次要以人工智能和安防为主。 我过后为什么抉择这家公司呢？一方面是因为给的薪资的确比拟高，在那会儿就曾经给到了很高的月薪，对于刚毕业的学生来说的确是一笔巨款；另一方面是过后这家公司还是有一些牛人在的，而且也给了一点期权，整体看来还是有发展前途。 在这家公司我做的事件就是做安防零碎，也就是中后盾零碎，面向B端用户，在这家公司我还是很高兴的，实习的时候就拿了最佳实习生的奖，年会抽到了过后华为最新款手机（从那以后我再也没抽中过大奖????）。技术上从最开始的实习程度，到起初也能够独立做我的项目，也做过面试官，总体来说，过的还是很顺意的。 然而，我发现我做的事件纯熟之后，和大部分程序员做的事件一样，既没有后端大流量高并发，也没有比拟深刻的前端技术摸索，而且最重要的是业务并没有像我事后想的一样逐步做大，很多大牛也纷纷到职了。 这是我的第一次危机感，也是我第一次跳槽的起因。 从决定跳槽开始，我就在思考两个问题，第一个是我要去哪些公司，第二个是我要筹备什么内容。 对于第一个问题，因为我常常混迹于互联网社区和论坛，在知乎、掘金、v2ex等等中央对国内公司的状况也有一些理解，所以我把范畴划定在第一、二梯队的大公司前端岗位。 对于第二个问题，我搜寻了很多面经和招聘启事，也找了一些大公司的敌人问，最终把筹备范畴划定在这几个方面：前端基础知识，前端框架/库原理，我的项目教训，数据结构与算法。 划定范畴之后，就开始了我的筹备跳槽之路。我的布局是每天上班之后学习1到2小时，周末学习5个小时以上，工作中也踊跃的总结业务流程以及我的项目的亮点，筹备面试的过程中十分的辛苦，常常上班后会学到12点当前，并且周末也很少出去玩，过程中还随同着焦虑，终于在筹备了一段时间后，我开始面试了，这也是我的第一次跳槽。 在刚到北京的这一段时间内，我还定下了本人的集体打算。从我理解到北京的房价、户口、学区等等问题之后，我就判定我当前不会长期在北京倒退，因为定居的难度和压力是很大的，人没必要把本人弄的那么累。 既然不在北京倒退，那去哪里呢？因为我老家是西部的，综合工作机会、买房难度、离家间隔来看，最终抉择了某西部二线城市，于是，我的集体打算就开始了，打算的指标是在三年后定居这个二线城市。 两次跳槽，定居某二线城市第一次跳槽面试的后果很出其不意，因为不晓得本人的程度到底怎么样，所以这次跳槽我把能投的公司简直都投了一遍，没想到大部分面试都很顺利，并没有当时想的那么难，拿了大略六七个offer吧。这样的后果对于过后只有一年半教训的我来说，是一个十分大的惊喜，预先我还写了一篇面经贴，也意识了很多敌人，面经贴在这里寒冬中的一年半前端跳槽， 感兴趣的敌人能够去看看。 最终在所有offer中我抉择了某跳舞厂，因为在我看来这是一家倒退迅速并且具备旺盛生命力的公司，这也是过后的我联合本人状况做出的最优解。在跳舞厂工作的经验是空虚和开心的，这里的工作体验和第一家小公司是齐全不同的。 首先，身边的共事平均水平都比拟高，在这里我也感触到了团队单干的快感，有什么问题大家能够一起探讨技术计划和解决办法，相互review代码的过程中也能提高不少； 而后，业务品种比拟多，有中后盾的、混合开发的、偏C端的等等，只有集体积极主动，都能够取得不错的成长。并且在做业务的过程中，看着身边一些高职级的共事和领导，我对于技术和业务的也有了一些新的认识。 当然了每家公司都是有毛病的，比方加班比拟多、干的活太碎太重复性等等问题，置信大部分程序员都会遇到相似的问题。 在这段时光里，我的集体打算也有了停顿，比方解决二线城市落户买房问题等等。 工夫总是过得很快，在某二线城市的所有事宜都筹备好了，而且差不多也到打算收尾的工夫点了，终于，我“逃离”了北京，再次跳槽来到了二线城市定居。 集体感想毕业去大公司还是小公司我记得我毕业那会儿，有种说法是去大公司都是螺丝钉，去小公司能够失去更多锤炼，然而起初我发现这种说法是有问题的。因为人都是有一个成长的过程的，刚毕业除非是超强的大佬，否则不论是在大公司还是小公司，做的事件都是螺丝钉类的，如果一个公司敢把很重要的事件交给应届生来做，那阐明它的人才治理是有问题的。 站在上帝视角来看，刚毕业就退出一家高速倒退中的公司并且拿到期权是最好的，比方在14年的时候就退出字节跳动这样的公司，然而这样的机会很少很少，能有这样眼光的人也不会纠结。 所以对于毕业生来说，能去大公司尽量去大公司，首先大公司的造就体系更加欠缺，包含技术和职场方面的都会有课程和分享；其次是大公司的共事平均水平更高一些，也能对本人带来正向的影响，进步职场下限；最初是我在跳槽和招人的时候发现的，简历上有大公司经验的人会在找工作的时候绝对更加顺利一些，不管怎么说这也算是一个小小的光环。 早做职业规划凡事预则立不预则废，职业倒退是须要提前思考布局的，不然很容易会陷入一年到头了而后问本人“我往年又干了些啥？”的挫败感中。 如何做布局？首先须要理解本人，本人的性情，本人的短处，本人的家庭等等问题，都须要思考到。 如果家庭无奈反对在一线城市买房，是不是能够思考下哪个二线城市比拟适宜本人，并且早做打算，多察看一下二线城市的工作机会； 如果想在职业倒退上有所突破，能够划定一条路线，常见的比拟好的两条路线就是在大公司升职级和去倒退中的公司拿期权，抉择第一条路就须要多去被动承当一些事件并且拿好后果做好汇报，抉择第二条路就须要多关注B轮或者C轮的守业公司； 如果集体性情上并不是很喜爱写代码相干的工作，能够思考是否早做打算转行去做本人更善于的事件； 总之，所有都须要早做职业规划。 多关注业务和产品刚毕业的时候，我醉心于技术，起初才发现业务和产品的重要性。框架也好开源库也罢，技术对于咱们来说，只是做事的工具，一次次的技术升级、新的轮子的呈现，都是为了让咱们能够更有品质、更快的做出产品来，如果连做什么产品、为什么做都没弄清楚，那就很容易沦为工具人，这里援用雷军在《程序人生》一文中的一段话： 有的人学习编程技术，是把高级程序员做为谋求的指标，甚至是一生的奋斗目标。起初参加了真正的商品化软件开发后，反而困惑了，茫然了。一个人只有有韧性和灵性，有机会接触并学习电脑的编程技术，就会成为一个不错的程序员。刚开始写程序，这时候学得多的人写的好，到了起初，大家都上了一个档次，谁写的好只取决于这个人是否仔细、有韧性、有灵性。把握多一点或少一点，很快就能补上。成为一个高级程序员并不是件艰难的事。 当我上学的时候，高级程序员也曾是我的指标，我心愿我的技术能失去他人的抵赖。起初发现无论如许高级的程序员都没用，要害是你是否可能出想法出产品，你的劳动是否能被社会抵赖，能为社会创造财富。成为高级程序员相对不是谋求的指标。 把面试当做学习很多人会因为胆怯面试失败而不敢面试，我感觉没必要，咱们应该把面试当做一次学习。 首先，靠一个小时左右的面试是很难面试出一个人的实在程度的，因为不可能在这么短的工夫内既考查到基础知识又考查到编程素养等等，而且面试官的程度有高下，你很善于Nodejs，然而面试官只相熟React不懂Nodejs，那面试的时候面试官只会挑着他懂的问，这就是关公战秦琼，问不进去什么后果的。 其次，面试失败不肯定是能力问题。因为咱们招人的时候发offer还会受这些因素的影响：以后是否有hc，是否性价比更高，如果是高职级还要思考有没有坑位等等。 所以，没必要胆怯面试，把它当做一次学习和交换的机会，如果有可能一年能够面试一次，感受一下市场行情。 展望未来人往往会高估一年工夫产生的变动，但低估五年工夫产生的变动，心愿咱们都能够做好下一阶段的布局，共勉。 我是耳东，目前在某大厂做前端，我的公众号是「前端耳东」公众号每周都会更新文章，次要包含： 1、前端技术分析，不论是新技术尝鲜、源码解析、连载教程，我都会波及到 2、程序员相干的职场教训，比方程序员如何降职、程序员跳槽应该留神什么等等 除此之外，还提供以下几项服务： 1、收费批改简历 2、收费技术咨询 3、收费技术布局 欢送关注「前端耳东」

页面高度为百分百状况下，内容div实现主动撑满剩下的地位头部区域高度为110rpx，内容区域div实现主动撑满剩下的地位。如果将div 高度设置为100%，会造成多出头部的110rpx,会有滚动条显示！ .content{ width: 100%; height: 100%; box-sizing: border-box; position: relative; .search_box{ position: relative; box-sizing: border-box; width: 100%; height: 110rpx; border: 1px solid red; } .list{ width: 100%; height: 100%; box-sizing: border-box; border: 1px solid green; }} 此时咱们不须要滚动条办法一、相对定位,将list css批改为。 .list{ width: 100%; box-sizing: border-box; border: 1px solid green; position: absolute; top: 110rpx;//头部高度 left: 0; bottom: 0; } 此时曾经实现无滚动条成果办法二、利用 padding-top 和 margin-top ，将 margin-top 设置为负值。.content{ width: 100%; height: 100%; padding-top: 110rpx; box-sizing: border-box; position: relative; .search_box{ position: relative; box-sizing: border-box; margin-top: -110rpx; width: 100%; height: 110rpx; border: 1px solid red; } .list{ width: 100%; box-sizing: border-box; border: 1px solid green; height: 100%; }}同样达到成果 ...

问题学习React Web页面开发的过程中，遇到了一个问题设置img标签的图片地址，没有任何显示，然而换另外一个图片地址就能够展现，然而通过浏览器间接拜访图片地址是没有问题的，有点纳闷，就查阅了一下材料。通过学习理解调，src设置网络图片无奈展现，是因为浏览器在拜访图片地址时会主动在申请上增加了refre字段，而有些网站服务器针对refre做了防盗链设计就返回了403,天然就无奈展现。 解决方案解决方案也很简略， 在react我的项目的public门路下，找到index.html文件，在head标签中增加如下代码即可 <meta name="referrer" content="no-referrer"> 你Get到了吗？如果有问题或倡议能够留个评论，喜爱此文章请点个赞或关注我，后边还有更多更精彩的文章，感激！

■能够利用v-bind：style来绑定一些CSS内联款式■在写CSS属性名的时候，比方font-size--- □能够应用驼峰式：==fontSize==--- □或短横线分隔：=='font-size'==■绑定style的两种形式：对象语法，数组语法 一、对象语法■style前面跟的是一个对象类型---→对象的key是CSS的属性---→对象的value是具体赋的值，值能够来自data中的属性 <div id="app"> <div v-bind：style="{color:currentColor,fontSize:fontsize+'px'}">{{message}}</div></div>代码示例<div id="app"> <!--<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>--> <!--'50px'必须加上单引号，否则是当作一个变量去解析--> <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>--> <!--finalSize1当成一个变量应用--> <!--<h2 :style="{fontSize: finalSize1}">{{message}}</h2>--> <h2 :style="{fontSize: finalSize2+'px',backgroundColor:finalColor}">{{message}}</h2> <!--如果感觉以上一行太长，能够应用methods办法定义一个函数，而后调用这个函数（getStyles()）--> <h2 :style="getStyles()">{{message}}</h2></div>运行后果 二、数组语法■style前面跟的是一个数组类型--→style 能够应用数组将多个款式对象利用到一个元素上（ex：字体大小，字体色彩，背景色彩...) <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">{{message}}</div></div>代码示例<div id="app"> <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: 'Antiann', baseStyle:{backgroundColor:'pink'}, baseStyle1:{fontSize:'100px'} } })</script>运行后果

作者：FelDev译者：前端小智起源：medium点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 1. 模仿慢速网络和慢速设施咱们可能习惯了在城市的网速，那是杠杠的，并不象征网速在中国哪个都一样的，在一些偏僻中央，网速仍然慢的可怜，所以有时候咱们所做的产品是须要思考网速慢的状况的，那怎么模仿呢？ 关上谷个浏览器的performance选项卡，而后单击右上角的齿轮图标就能够看到 Newwork 和CPU的模仿状况。 2. 色彩选择器单击示意色彩的小方块，弹出色彩选择器。 启用色彩选择器后，能够将网页悬停并应用色彩选择器来获取该像素的色彩。 弹出色彩选择器的小方块还有快捷键按住Shift并单击以更改色彩格局。 3. AuditsAudits（审计）,这个性能其实始终存在，只不过在chrome 60之后，产生了天翻地覆的变动：引入了Google开源的另外一个我的项目：LightHouse。 Audits次要从5个方面来给网页打分，最终会生成一个report: 4.Pretty Print（显示可读代码） 咱们晓得许多网站都对Javascript代码进行了压缩，但这对开发者和学习者来说，读起来很吃力，谷歌提供一个性能给咱们，能够更好查看压缩文件。 咱们点击下方的大括号｛｝图标，即可应用Pretty Print性能了 5.疾速文件切换器如果你晓得文件名，则不用关上“Sources”选项卡。只需按cmd/ctrl + p，而后输出你想查找的文件名，接下按下回车就 ok 了。 6. 响应模式咱们在桌面和挪动设施上开发网站，通常咱们偏向于最后的桌面体验。 然而这与越来越多的用户应用挪动设施拜访网络的趋势相脱离。 为了进步网站的用户体验，咱们须要精确地晓得网站在挪动设施上的成果。 Chrome 开发者工具包里退出了手机模拟器个性，帮忙咱们测试： 对于大多数人而言，大多数工夫只须要通过不同的屏幕尺寸和方向查看他们的网站即可。 大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。 我和阿里云单干服务器，折扣价比拟便宜：89/年，223/3年，比学生9.9每月还便宜，买了搭建个我的项目，相熟技术栈比拟香（老用户用家人账号买就好了，我用我妈的)举荐买三年的划算点，点击本条就能够查看。 Icomo 7.屏幕截图1、F12 2、【ctrl+shift+p】 3、输出“capture” 4、抉择以下任意 capture full size screenshot”【整个网页】capture node screenshot”【节点网页】“capture screenshot”【以后屏幕】8. Extensions咱们能够将扩大程序安装到Chrome开发者控制台。 许多框架都有本人的扩展名，以简化其技术（Vue，Angular，React等）的开发。 这是Featured DevTools扩大的列表。 9. CoverageCoverage 是chrome开发者工具的一个新性能，从字面意思上能够晓得它是能够用来检测代码在网站运行时有哪些js和css是曾经在运行，而哪些js和css是还没有用到的，如图，这是我在关上csdn网页时，所显示的已运行和尚未运行的代码状况。 ...

课程链接如下： 玩转 Vue.js 3 新个性进阶实战文末有彩蛋。 Vue 是用于构建用户界面的渐进框架，具备全家桶 vue-router 路由治理，vuex 仓库数据管理，axios 申请库等。Vue 3 在 Vue 2.x 的根底做了一些改良和优化，它是国内最受欢迎的前端框架之一，给前端开发人员带来了便捷式开发。 你将学到的疾速搭建 Vue 3 脚手架体验组合式 API玩转动静指令传送组件动静路由记账本后端配置增加记账信息记账详情页玩转 Vue 3 响应性插槽新个性哪些 API 发生变化异步组件记账本前端配置记账本登录记账列表记账编辑页课程内容本课程是基于 Vue 3 疾速搭建的记账本我的项目，课程次要分为三局部：第一局部次要解说根底内容和我的项目脚手架搭建；第二局部次要解说记账本开发前的一些前后端配置，以及后端 API 的解说；第三局部就是实战繁难记账本，将咱们所学的常识利用起来。学完之后，你能够把握 Vue 3 的基础知识，如何实战。 整个我的项目是一个挪动端记账本我的项目，次要是将咱们日常生活的费用记录下来，达到咱们理财，投资的第一步，就是清晰的晓得咱们的钱都花到那里去了，所以咱们须要晓得以下几点需要： 零碎登录：用户注册，登录。每天开销：记录每一天所有的开销。记账列表：增加记账信息，生成记账列表。账单批改：对本人增加过的账单进行批改。 优惠链接如下： 老师邀请码： 1SU7YWiZ学员通过邀请码购买可享受9折优惠

因为 Sass 是基于 Ruby 语言开发而成，因而装置 Sass 前须要装置 Ruby，Mac 下自带 Ruby，所以不须要装置。 Ruby 是一种简略快捷的面向对象程序设计的脚本语言，它由日本的松本行弘创立于1993年。Ruby 的个性与 Smalltalk、Perl 和 Python 相似。 装置Ruby首先咱们须要在官网下载 Ruby ，官网地址：https://rubyinstaller.org/dow...。而后依据下载倡议，咱们能够抉择 Ruby + Devkit 2.6.6-1（x64） 版本下载。 下载好后就能够装置了，上面咱们简略讲一下装置步骤，一起个别依据提醒就能装置好： 首先咱们关上下载好的文件，能够看到下图所示界面，抉择第一个选项承受许可，点击 Next 按钮，进入下一步： 在上面这个界面中，会默认勾选三个选项，其中第一个选项示意增加到零碎环境变量，如果想批改装置目录，能够点击 Browse... 按钮。 这一步问咱们是否须要装置组件，默认装置，持续点击下一步： 而后就开始装置啦： 装置好后如下图所示，点击 Finish 装置： 而后会弹出一个 DOS 窗口，咱们在窗口中输出 3，抉择msys2开发工具链装置： 到这里 Ruby 就曾经装置实现啦，咱们能够在命令窗口中输出 ruby -v 命令查看是否装置胜利： 呈现如上所示示意 Ruby 装置胜利。 装置 SassRuby自带一个叫做RubyGems的零碎，用来装置基于Ruby的软件。咱们能够应用这个软件来装置 Sass 和 Compass。 装置命令如下所示： gem install sassgem install compass如下图所示： 装置好后，能够通过 sass -v 和 compass -v 命令查看版本号： ...

typora-root-url: imagestypora-copy-images-to: images JSP 和 JSTL次要内容JSPJSP的根底语法简介JSP：Java Server Page SUN 公司提供的动静网页编程技术，是 Java Web 服务器端的动静资源。 它相比 html 而言，html 只能为用户提供静态数据，而 Jsp 技术容许在页面中嵌套 java 代码，为用户提供动态数据。 相比 servlet 而言，servlet 很难对数据进行排版，而 jsp 除了能够用 java 代码产生动态数据的同时，也很容易对数据进行排版。 不论是 JSP 还是 Servlet，尽管都能够用于开发动静 web 资源。但因为这 2 门技术各自的特点，在长期的软件实际中，人们逐步把 servlet 作为 web 利用中的控制器组件来应用， 而把 JSP 技术作为数据显示模板来应用。 其实 Jsp 就是一个 Servlet，当咱们第一次拜访 Jsp 的时候，Jsp 引擎都会将这个 Jsp 翻译 成一个 Servlet，这个文件寄存在tomcat（源码目录） 中的 work 目录中。 筹备工作配置IDEA这一步不是必须的，当然因为 编辑器中有些默认的配置项咱们感觉不是很完满，比方"编码格局"、页面模板等。咱们能够在新建 JSP 页面之前就先批改为咱们须要的。 1.抉择"File" —> "Settings..." 2.设置编码格局。搜寻"encode"，抉择"File Encoding" 3.设置页面模板。搜寻"template"，抉择"File and Code Templates"，抉择右侧的"Other"，抉择下方的"Jsp File" ...

CSS规定 蕴含选择器和申明块选择器：选中元素1. 元素选择器（h1,p,a,span...）2. id选择器（#选择器名称）惟一的 在html中的写法：id=选择器名3. 类选择器（.选择器名称）在html中的写法：class=选择器名申明块：呈现在大括号中申明块中含多个申明，申明以分号完结每一个申明表白了某一方面的款式（如：背景色彩，字体色彩等属性）增加款式的办法 1. 外部样式表（在head外面插入style标签）2. 内部样式表（在head外面应用link标签插入css文件链接（相应属性写在此独立文件中））3. 内联样式表（在html中的各个标签中写style的相应属性）举荐用第二种，起因：1.能够解决多个页面款式反复的问题 2.有利于浏览器缓存，从而进步页面响应速度 3.有利于把html和css代码拆散，更容易浏览和保护 CSS常见的款式申明 1. color：元素外部的文字色彩（预设值（定义好的单词），三原色（红绿蓝，每个色彩用0-255之间的数字来表白）） rgb表示法：rgb(红,绿,蓝) 十六进制表示法：#红绿蓝2. background-color：元素背景色彩3. font-size：元素外部文字的尺寸大小 单位：px（像素） 相对单位 em 绝对单位（绝对于父元素的字体大小） 每个元素必须有字体大小，若没有申明，则应用父元素的字体大小。若没有父元素（html），则应用基准字号。4. font-weight：文字粗细水平，可取值数字，可取值为预设值。5. font-family：文字类型（用户计算机中存在的字体才会失效） 个别应用多个字体来匹配不同环境6. font-style：字体款式，通常设置为斜体。 i元素：默认款式，斜体字体。理论应用中，通常用它示意图标（icon）7. strong,em：默认加粗8. text-decoration：文本润饰，给文本加线 a元素，del元素和s元素默认自带线9. text-indent：首行文本缩进10. line-height：每行文本的高度（该值越大，每行文本的间隔越大） 设置行高为容器的高度，可让单行文本垂直居中。 行高可设置为纯数字，示意绝对于以后元素的字体大小（举荐应用）11. width：宽度12. height：高度13. letter-space：文字间隙14. text-align：元素外部文字的程度排列形式选择器 帮忙你精确的选中想要的元素简略选择器： 1. id选择器 2. 元素选择器 3. 类选择器 4. 通配符选择器（*） 5. 属性选择器（[属性]） 6. 伪类选择器（选中某些元素的某种状态，如:hover（鼠标悬停状态）,:active（激活状态，鼠标按下状态）,:link（超链接未拜访时的状态），:visited（超链接拜访过的状态）） 若同时都写上，则书写程序为：link,visited,hover,active（记忆：love hated） 7. 伪元素选择器（::before,::after,...） xxx::before{ content:'xxx' } 选择器的组合：1. 后辈元素 -- 空格 2. 并且 3. 子元素 -- > 4. 相邻兄弟元素 -- + 5. 前面呈现的所有兄弟元素 -- ~ 选择器的并列：多个选择器，用逗号分隔 （语法糖） 无关层叠问题 ...

第一种成果：html代码： <input class="search" type="text" placeholder="搜寻...">CSS代码： .search{ width:80px; height:40px; border-radius:40px; border:2px solid lightblue; position: absolute; right:200px; outline:none; text-indent:12px; color:#666; font-size:16px; padding:0; -webkit-transition:width 0.5s;}.search:focus{ width:200px;}第二种成果：html代码： <div class="banner"> <a href="javascript:;">博</a> <span>这是我的集体博客</span></div>CSS代码: .banner{ width:234px; height:34px; border-radius:34px; position:absolute; top:400px; left:200px;}.banner a{ display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; border:2px solid lightblue; position:absolute; left:0px;top:0px; background:lightgreen; color:#fff; text-align:center; text-decoration:none; cursor:pointer; z-index:2;}.banner a:hover + span{ -webkit-transform:rotate(360deg); opacity:1;}.banner span{ display:inline-block; width:auto; padding:0 20px; height:34px; line-height:34px; background:lightblue; border-radius:34px; text-align: center; position:absolute; color:#fff; text-indent:25px; opacity:0; -webkit-transform-origin:8% center; -webkit-transition:all 1s;}第三种成果：html代码： ...

谈到 <fieldset> 与 <legend>，大部分人必定会比拟生疏，在 HTML 标签中，属于比拟少用的那一批。 我最早晓得这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置对立代码默认款式的 CSS 中看到的。最近因为钻研边框，遇到了这两个标签，发现它们还是很有意思的，遂起一篇，将整顿的一些知识点分享给大家。 理解 <fieldset> 与 <legend>通常而言，<fieldset> 与 <legend> 比拟罕用在表单当中。 <fieldset>：HTML <fieldset> 元素用于对表单中的管制元素进行分组<legend>：在 <fieldset> 中内置了一个 <legend> 元素作为 fieldset 的题目简略而言，fieldset 能够独自应用，对表单的元素进行分组，而 legend 则须要和 fieldset 配套应用，成对呈现，作为分组的题目。 看个简略的例子，简略的 HTML 及构造如下： <fieldset> <legend>Form</legend> <div> <label>Name :</label><input type="text" placeholder="input Name" /> </div> <div> <label>Password :</label><input type="text" placeholder="input Name" /> </div></fieldset>fieldset { border: 1px solid#ddd; padding: 12px;}legend { font-size: 18px; padding: 0 10px;}成果如下： CodePen Demo -- fieldset & legend Demo ...

本帖分享歌曲：步履不停 - 陈鸿宇 见多能力识广，如果在vue的我的项目中有看到 >>>或/deep/或::v-deep，千万不要少见多怪，那只是因为你见多识广而已，问主管，他也只会在心里暗自嘀咕你太无知了，哈哈哈哈。 其实vue的官网文档中也有过介绍，你不晓得只能怪本人懈怠！！！ 官网链接：vue-loader.vuejs.org/zh/guide/sc… 深度作用选择器：如果你心愿 scoped 款式中的一个选择器可能作用得“更深”，例如影响子组件，你能够应用 >>> 操作符： <style scoped>.a >>> .b { /* ... */ }</style>复制代码上述代码将会编译成： .a[data-v-f3f3eg9] .b { /* ... */ }复制代码有些像 Sass 之类的预处理器无奈正确解析 >>>。这种状况下你能够应用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样能够失常工作。 总结应用场景:当咱们须要笼罩element-ui中的款式时只能通过深度作用选择器 style为css时的写法如下： .a >>> .b { *** } style应用css的预处理器(less, sass, scss)的写法如下： 第一种/deep/ /deep/ .a { *** } 第二种::v-deep ::v-deep .a{ *** } 倡议应用第二种形式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快。 以上应用场景来自于脚本之家的同类文章的作者柳慕笙，感激。 www.jb51.net/article/188…

查过的问题的积攒pre标签的换行white-space: pre-wrap;flex根底属性 flex-direction: clumn代表里纵向排列，row是行，column是列flex-wrap换行flex-flow是flex-direction和flex-wrap的简写模式justify-content属性定义了flex-direciotn方向的对齐形式。align-items属性定义了,下面的垂直方向对齐形式。子元素的align-self，独自定义flex-direciotn垂直方向的对齐形式。宽高都根据vw设置，能够实现一种动静扭转宽高的成果 width: 85.33vw;height: 106.67vw;

对象是 new 进去的，那到底产生了什么？什么，看到这个题目，大吃一惊，程序员居然有对象？当然有啦，这都什么年代了。不信，你来看看有了对象之后，面试官就会问你到底产生了什么？ 业余一点讲述： new 是用来实例化一个类的，而后在内存中调配一个实例对象。 咱们先来看看一个例子： function Person(name) { this.name = name;}Person.hairColor = "black";Person.prototype.say = function() { console.log("My name is " + this.name);};var ken = new Person("人生代码");console.log( ken.name, // "人生代码", ken.hairColor, // undefined ken.height // undefined);ken.say(); // "My name is 人生代码"console.log( Person.name, // "Person" Person.hairColor // "black");Person.say(); // Person.say is not a function这段代码产生了什么？接下来就来揭晓答案 重点解析第8行代码是要害： var ken = new Person("人生代码");Person 原本就是个一般的函数，只不过如果给他加了 new 操作，就变成了构造函数。 那么 JS 引擎在解析代码的时候，外部会做很多解决，伪代码如下： new Person('人生代码') = { var obj = {}; // 定义对象 var proto = Object.create(Person.prototype); // 复制原型 obj.__proto__ = proto; // 建设原型链 // obj->Person.prototype->Object.protorype->null var res = Person.call(obj, '人生代码'); // 相当于 obj.Person('人生代码') // 如果无返回值或者返回一个非对象值，则将obj返回作为新对象： return typeof res === 'object' ? result || obj : obj;}咱们能够得出以下几点： ...

JavaScript简介JavaScript 是一种具备面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具备绝对安全性的客户端脚本语言。它的次要目标是，验证发往服务器端的数据、减少 Web 互动、增强用户体验度等。 JavaScript 的组成ECMAScript定义的只是这门语言的根底，与Web浏览器没有依赖关系，而在根底语法上能够构建更欠缺的脚本语言。JavaScript的运行须要肯定的环境，脱离了环境JavaScript代码是不能运行的，JavaScript只可能寄生在某个具体的环境中才可能工作。JavaScript运行环境个别都由宿主环境和执行期环境独特形成，其中宿主环境是由外壳程序生成的，如Web浏览器就是一个外壳程序，它提供了 一个可管制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的JavaScript引擎（或称为JavaScript解释器）生成，在这个环境中 JavaScript可能生成内置动态对象，初始化执行环境等。 Web浏览器自定义的DOM组件，以面向对象形式形容的文档模型。DOM定义了示意和批改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象，是咱们用传统的办法(javascript)取得的对象。DOM属于浏览器，而不是JavaScript语言标准里的规定的核心内容。 后面的DOM是为了操作浏览器中的文档，而为了管制浏览器的行为和操作，浏览器还提供了BOM（浏览器对象模型）。 ECMAScript(根底语法) JavaScript的外围语法ECMAScript形容了该语言的语法和根本对象 DOM(文档对象模型) 文档对象模型（DOM）—— 形容了解决网页内容的办法和接口 BOM(浏览器对象模型) 浏览器对象模型（BOM）—— 形容了与浏览器进行交互的办法和接口 开发工具浏览器：Chrome开发工具：Hbuilder X进入浏览器控制台 Console：F12控制台的作用: console对象代表浏览器的JavaScript控制台，用来运行JavaScript命令，经常用来显示网页运行时候的错误信息。Elements用来调试网页的html和css代码。 根本用法JS须要和HTML一起应用才有成果，咱们能够通过间接或间接的形式将JS代码嵌入在HTML页面中。 行内JS : 写在标签外部的js代码 外部JS : 定义在script标签外部的js代码 内部JS : 独自的js文件，在HTML中通过script标签引入 咱们能够将JavaScript代码放在html文件中任何地位，然而咱们个别放在网页的head或者body局部。因为页面的加载形式是从上往下顺次加载的，而这个对咱们搁置的js代码运行是有影响的。 放在<head>局部，最罕用的形式是在页面中head局部搁置<script>元素，浏览器解析head局部就会执行这个代码，而后才解析页面的其余部分。 放在<body>局部，JavaScript代码在网页读取到该语句的时候就会执行。 行内 JS： <button onclick="alert('you clicked hered!!!')">click here</button> 外部 JS： <script type="text/javascript" charset="utf-8"> alert('this is inner js code')</script> 内部 JS 文件： hello.js alert('this is a outter js document'); hello.html <!-- 在须要应用js的html页面中引入 --><script src="js/hello.js" type="text/javascript" charset="utf-8"></script> JavaScript根底语法语句和正文JavaScript程序的执行单位为行（line），也就是一行一行地执行。个别状况下，每一行就是一个语句。 语句（statement）是为了实现某种工作而进行的操作，语句以分号结尾，一个分号即示意一个语句完结。多个语句能够写在一行内（不倡议这么写代码），然而一行写多条语句时，语句必须以分号结尾。 表达式不须要分号结尾。一旦在表达式前面增加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。 单行正文：用//起头；多行正文：放在/ 和 /之间。兼容html正文形式：<!-- --> ...

css是个神奇的货色，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇观之一，设计精美，计算精细，令世人赞叹。那么如何用CSS画一个金字塔呢？ 人丑话不多，先看一下成果 ❐ 思路 金字塔是由5个面组成的，即4个侧面和1个底面。咱们能够把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？ “横看成岭侧成峰”，咱们看金字塔的俯视图是不是会看到这样一个图形，如下图所示 这是一个立体图形，如果让这个立体图形具备平面的成果不就是一个金字塔了么。行将上图的(0,0)沿着x轴旋转肯定角度即可实现。 ❐ 绘制 接下来就是绘制“元宝”的形态,侧面是4个三角形，底面是一个正方形。实现三角形能够采纳clip-path的属性对可视区域进行裁剪。 由上图可知：clip-path的只能兼容高版本浏览器。polygon代表多边形，所以利用该属性能够绘制多如下图形： clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 50%); clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%); 有了上述的图形之后，咱们须要进行非凡的解决，能力失去咱们想要的形态。因为咱们要搭建金字塔，所有咱们塔边的高度或者宽度须要大于底部的宽度和长度，不然的话无奈搭成塔尖而造成如下图形： 故需设置大于底部宽和高,咱们这里选取为高度为200px，宽度为100px，宽度须要和底部宽度保持一致。 假如咱们当初曾经有一个金字塔，咱们能够取它的一个横截面如下图： 通过sin函数$$sinA=\sqrt{(200^2-50^2)/200^2}$$解下面反三角函数求得A大概为75deg，以此类推咱们能够算出其余图形旋转角度。 将上述的两种三角形通过适当的平移和旋转，失去如下图形： transform:translateZ(-50px) translateY(-100px) rotateX(-75deg);height: 200px;transform-origin: 0 100%;clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%); transform: rotateX(-180deg) translateZ(50px); height: 200px;transform-origin: 0 100%;transform: translateZ(-50px) translateY(-200px) rotateX(-105deg);clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%); width: 200px;transform-origin: 100% 100%;transform: translateZ(-50px) translateX(-200px) rotateY(105deg);clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%); ...

效果图 装置yarn add vue-stroke-textnpm i vue-stroke-text 引入import StrokeText from 'vue-stroke-text'// 全局注册Vue.component(StrokeText.name,StrokeText)// 或者页面内注册export default { components:{ StrokeText, }}应用<template> <stroke-text class="my-stroke-text" text="测试文字" :strokes="strokes" /></template><script>export default { data: () => ({ // 这里依照数组程序间接设置每一层的描边，务必依照描边宽度从小到大来设置。 // 值的写法就是 -webkit-text-stroke 属性的写法 strokes: [ '0.2em red', '0.4em green', '0.6em black', ] })}</script><style>.my-stroke-text { font-size:24px;}</style>我的项目地址githubnpm

2021年1月19日,Web技术畛域极具权威和影响力的国内中立性技术标准机构万维网联盟W3C发表正式成立 MiniApps规范工作组,致力于联结宽广会员及社区成员深刻摸索协调多样的MiniApp生态、加强不同MiniApp平台间的互通性,从而最大水平地晋升MiniApps 与Web的交融,缩小技术碎片化并升高开发者的学习老本。 作为外围贡献者之一,华为自2019年起便积极参与MiniApps生态社区组的晚期技术孵化,主导编制MiniApp Manifest标准提案,并参加MiniApp Packaging标准提案的制订。此次,华为等三家贡献者出任 MiniApps 规范工作组主席,联结主持小组的日常工作。 MiniApp Manifest以JSON文件形式对MiniApp进行全局参数配置,包含MiniApp的根本形容信息、页面路由信息、窗口显示款式、权限治理等,是Web App Manifest的扩大。MiniApp Packaging标准定义了MiniApp的标准化打包文件构造及其结构和解析办法,解决不同运行时环境辨认、加载、缓存和更新MiniApp包时的互通性问题。 MiniApp是一种小型、免装置、疾速加载的程序,通常在一个宿主利用或操作系统中运行,如小程序、快利用,也能够是反对跨端部署的JS原生利用。MiniApp应用了CSS、JavaScript等Web技术,同时也反对操作系统提供的能力。 为了加强不同MiniApp平台之间的互操作性,华为等MiniApp厂商在2019年9月联结编撰公布《MiniApp国内标准化白皮书》,作为初步的标准化摸索。随着寰球越来越多的公司体现出对MiniApp相干规范探讨的浓厚兴趣,MiniApps生态社区组于TPAC 2019期间正式成立,以便寰球Web社区开展宽泛单干,推动 MiniApp的国内标准化过程。 华为保持开放式技术创新,将快利用和基于JS的原生利用框架等先进技术与Web技术相结合,致力于为宽广的开发者提供快捷、跨平台的利用开发环境,为用户提供更便捷的利用体验,通过单干、凋谢逐渐融入寰球规范及产业体系。 作为新型利用状态,快利用的倒退十分迅速。数据显示,截至2020年12月底,华为快利用核心已在寰球上线超过7000多个快利用,同比增长360%;华为快利用月活用户超过1亿,同比增长200%。随着智慧助手·明天、全局搜寻、快利用核心等高流量入口陆续在寰球上线,开发者将取得更多的流量入口和获客渠道。

什么是SassSass 是 Syntactically Awesome Stylesheets 的简写，是一个最后由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它缩小了 CSS 的反复，也因而节俭了工夫。Sass 是最早的 CSS 预处理语言，有比 Less 更弱小的性能。Sass 扩大了 CSS3，减少了规定、变量、混入选择器、继承等个性。 什么是 CSS 预处理器咱们晓得了 Sass 是 CSS 的预处理器，那么什么是预处理器呢？CSS 预处理器定义了一种新的语言，其根本思维是，用一种专门的编程语言，为 CSS 减少了一些编程的个性，将 CSS 作为指标生成文件，而后开发者就只有应用这种语言进行编码工作。也就是说，CSS 预处理器用一种专门的编程语言，进行 Web 页面款式设计，而后再编译成失常的 CSS 文件，以供我的项目应用。CSS 预处理器为 CSS 减少一些编程的个性，无需思考浏览器的兼容性问题。 Sass的特色性能Sass 齐全兼容所有版本的 CSS。Sass 领有比其余任何 CSS 扩大语言更多的性能和个性，例如减少了变量、嵌套、混合等性能。通过函数进行色彩值与属性值的运算。提供了控制指令（control directives）。自定义输入格局。语法格局Sass 语言有两种语法格局： 最开始的语法叫做缩进语法（Indented Sass），通常简称为Sass，是一种简化格局。它应用缩进来代替花括号 {} ，示意属性属于某个选择器。用换行代替分号分隔属性。另一种语法是 SCSS（Sassy CSS），这种格局仅在 CSS3 语法的根底上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时退出 Sass 的特色性能。这两种语法格局，任何一种格局都能够间接通过 @import 导入到另一种格局中应用，或者通过 sass-convert 命令行工具转换成另一种格局： ...

1.开发环境 vue2.电脑系统 windows10专业版3.在开发的过程中,咱们在我的项目中常常会做一些成果,然而很多的时候,咱们可能会没有思路,上面我来分享一下我的教训,心愿对你有所帮忙。4.废话不多说,间接上效果图:5.怎么实现呢? 刚开始我看到这个成果的时候也是有点懵,其实没有那么难,上面我来分享一下如何实现,心愿对你有所帮忙。能够应用css进行实现。6.间接上css代码: position: absolute;top: -15%;right: -3.4%;transform: scale(0.7);这只是办法的一种,还有其余的办法,心愿各位小伙伴能多多指教。7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

✨ 介绍防抖节流原理、区别以及利用，并用JavaScript进行实现防抖原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则从新计时。实用场景： 按钮提交场景：避免屡次提交按钮，只执行最初提交的一次搜寻框联想场景：避免联想发送申请，只发送最初一次输出// 简易版实现function debounce(func, wait=1000) { let timeout; return function (args) { clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(this, args) }, wait); }}// 立刻执行版实现,有时心愿立即执行函数，而后等到进行触发 n 秒后，才能够从新触发执行。function debounce(func, wait=5000, immediate=true) { let timeout; return function (args) { if (timeout) clearTimeout(timeout); if (immediate) { const callNow = !timeout; timeout = setTimeout(function () { timeout = null; }, wait) if (callNow) func.apply(this, args) } else { timeout = setTimeout(function () { func.apply(this, args) }, wait); } }}/**func函数可能会有返回值，所以须要返回函数后果，然而当 immediate 为 false 的时候因为应用了 setTimeout 咱们将 func.apply(context, args) 的返回值赋给变量最初再 return 的时候，值将会始终是 undefined所以只在 immediate 为 true 的时候返回函数的执行后果*/function debounce(func, wait, immediate) { let timeout, result; return function (args) { if (timeout) clearTimeout(timeout); if (immediate) { const callNow = !timeout; timeout = setTimeout(function () { timeout = null; }, wait) if (callNow) result = func.apply(this, args) } else { timeout = setTimeout(function () { func.apply(this, args) }, wait); } return result; }}节流原理：规定在一个单位工夫内，只能触发一次函数。如果这个单位工夫内触发屡次函数，只有一次失效。实用场景： ...

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会应用到表格组件,然而咱们会发现在vant中没有表格组件,这个时候咱们能够抉择本人手写一个table或者是应用插件,在这里我抉择的是手写table,上面我来分享一下如何给table增加边框,心愿对你有所帮忙。4.在template中增加如下代码: <table class="ruletable"> <th>Order Time</th> <th>Data</th> <th>User</th> <tr> <td>18-12-2020 10:20:34.311</td> <td>102034311</td> <td>Any Mille</td> </tr> <tr> <td>18-12-2020 10:20:34.311</td> <td>102034311</td> <td>Any Mille</td> </tr> <tr> <td>18-12-2020 10:20:34.311</td> <td>102034311</td> <td>Any Mille</td> </tr> </table>5.在css中增加如下代码: .ruletable{ width: 100%; border-collapse: collapse; // 次要代码 } .ruletable th{ text-align: center; } .ruletable tr:nth-of-type(1){ border-top: 1px solid #FFDCDF; // 增加边框 } .ruletable tr{ border-bottom: 1px solid #FFDCDF; // 增加边框 }6.效果图如下:7.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰。

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {margin: 0;padding: 0;}*{box-sizing: border-box;}html, body { min-height: 100%;} body { font-family: "Microsoft YaHei"; font-size:14px; color:#333;}h1, h2, h3, h4, h5, h6{font-weight:normal;}ul,ol { list-style: none;} img {border: none;vertical-align: middle;}a { text-decoration: none; color: #232323;}table { border-collapse: collapse; table-layout: fixed;}input, textarea {outline: none;border: none;}textarea {resize: none;overflow: auto;}.clearfix { zoom: 1;}.clearfix:after { content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; overflow:hidden;}.fl { float: left }.fr { float: right }.tl { text-align: left;}.tc {text-align: center }.tr { text-align: right;}.ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .inline{ display: inline-block; *display: inline; *zoom: 1;}

一、闭包《JavaScript高级程序设计》： 闭包是指有权拜访另一个函数作用域中的变量的函数《JavaScript权威指南》： 1、函数嵌套函数2、函数外部能够援用内部的参数和变量3、参数和变量不会被垃圾回收机制回收 闭包更精确的说是一项技术或者一个个性闭包的次要是为了解决ES６之前JavaScript只有全局作用域和部分作用域的问题，解决全局作用域下变量易被净化，函数作用域下因为JavaScript垃圾回收机制函数调用完结后变量随之销毁的问题。通过函数嵌套并将返回的函数赋值给一个变量，造成一个作用域链，使得被赋值的变量不被销毁之前函数也不会销毁，这种技术或者个性应该被称为“闭包”。次要利用场景1、防抖节流2、创立公有函数、变量或办法3、待补充。。。

毕业工作一年之后，有了转行的想法，偶尔接触到程序员这方面，产生了浓重且强烈的趣味，开始学习前端，胜利收割了大厂offer，开始了我的程序员生涯。在自学过程中有过一些小厂的面试经验，也在一些小型的互联网公司实习过，这些都不是本文重点。本篇章次要分享一下这次字节跳动、美团、头条等大厂的面试真题波及到的知识点，以及我集体的学习办法、学习路线等，当然也整顿了一些学习文档资料进去是附赠给大家的。知识点波及比拟全面，包含但不限于前端根底，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等 大厂面试真题整顿CSS：1，盒模型2，如何让一个盒子程度垂直居中？3，css 优先级确定4，解释下浮动和它的工作原理，革除浮动的办法？5，CSS暗藏元素的几种办法6，如何实现浏览器内多个标签页之间的通信?7，简要说一下CSS的元素分类8，link @import 导入 css9，画三角形 JavaScript：1，介绍JavaScript的根本数据类型2，jQuery应用倡议3，栈和堆的区别？4，Javascript实现继承的几种形式？5，Javascript创建对象的几种形式？6， Javascript作用链域7，什么是闭包（closure），为什么要用它？8， javascript 代码中的"use strict";是什么意思 ? 应用它区别是什么？9，深拷贝和浅拷贝10，JS提早加载的形式有哪些？11，同步和异步的区别?12， 什么是跨域问题 ，如何解决跨域问题?13，模块化开发怎么做？14，DOM操作15，那些操作会造成内存透露16，什么是Cookie 隔离？17，响应事件18，flash和js通过什么类如何交互?19，JS垃圾回收机制？20，promise 用法21，...... Vue：1，对于MVVM的了解？2，Vue的生命周期3，Vue实现数据双向绑定的原理4，Vue组件间的参数传递5，Vue的路由实现：hash模式 和 history模式6，vue路由的钩子函数7，请问 v-if 和 v-show 有什么区别？9、对于Vue是一套渐进式框架的了解10、vue.js的两个外围是什么？11，vue罕用的修饰符12，Vue 组件间通信有哪几种形式？13，vue中子组件调用父组件的办法14，怎么定义vue-router的动静路由？怎么获取传过来的值？15，请介绍一下你对vue-router的了解？16，vue-router响应路由参数的变动17，vuex有哪几种属性？18，...... 更多面试题整顿： 学习成长路线学习办法：视频疾速入门——>书籍缓缓深刻——>入手实操 前端视频材料： 倡议：对于学习办法，是因人而异的，每个人的学习办法都不同，找到属于本人的学习办法才是最正确的，有的适宜本人看视频看书学习，有的人在培训班里更容易成长，所以无论抉择何种学习形式，适宜本人，且坚持到底才是最重要的。想要收费支付面试文档或者学习前端的小伙伴能够退出前端群：953352883，一起学习交换。

作者：陈大鱼头github： KRISACHAN进度条是一个十分常见的性能，实现起来也不难，个别咱们都会用 div 来实现。 作为一个这么常见的需要， whatwg 必定是不会没有原生组件提供（尽管有咱们也不肯定会用），那么就让咱们来康康有哪些有意思的进度条实现形式。 惯例版 — div 一波流这是比拟惯例的实现形式，先看成果： 源码如下： <style> .progress1 { height: 20px; width: 300px; background-color: #f5f5f5; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .progress1::before { counter-reset: progress var(--percent, 0); content: counter(progress) '%\2002'; display: block; height: 20px; line-height: 20px; width: calc(300px * var(--percent, 0) / 100); font-size: 12px; color: #fff; background-color: #2486ff; text-align: right; white-space: nowrap; overflow: hidden; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .btn { margin-top: 30px; }</style><div id="progress1" class="progress1"></div><button id="btn" class="btn">点我一下嘛～</button><script> 'use strict'; let startTimestamp = (new Date()).getTime(); let currentPercentage = 0; let maxPercentage = 100; let countDelay = 100; let timer = null; let start = false; const percentageChange = () => { const currentTimestamp = (new Date()).getTime(); if (currentTimestamp - startTimestamp >= countDelay) { currentPercentage++; startTimestamp = (new Date()).getTime(); progress1.style = `--percent: ${currentPercentage}`; }; if (currentPercentage < maxPercentage) { timer = window.requestAnimationFrame(percentageChange); } else { window.cancelAnimationFrame(timer); }; }; const clickHander = () => { if (!start) { start = true; percentageChange(); }; }; btn.addEventListener('click', clickHander);</script>这种办法的外围就是以以后盒子为容器，以 ::before 为内容填充。用 <div> 的益处就是实现简略，兼容性强，拓展性高，然而美中不足的是标签语义化不强。 ...

字体款式针对的是“文字自身”的形体成果，而文本款式针对的是“整个段落”的排版成果。字体款式重视个体，文本款式重视整体。常见的文本款式如下表。 属性阐明text-indent首行缩进text-align程度对齐text-decoration文本润饰line-height行高text-transform大小写转换letter-spacing、word-spacing字母间距、词间距接下来，咱们一起来看看这些属性的使用。 text-indentp元素的首行是不会主动缩进的，因而咱们在HTML中往往应用6个&nbsp;（空格）来实现首行缩进两个字的空格。然而这种形式会导致冗余代码很多。因而应用text-indent属性来定义p元素的首行缩进。 <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>首行缩进</title> <style type="text/css"> p{ font-size: 14px; text-indent: 28px; } </style> </head> <body> <p>从今天起，做一个幸福的人，喂马，劈柴，周游世界；从今天起，关怀食粮和蔬菜，我有一所房子，面朝大海，春暖花开；从今天起，和每一个亲人通信，通知他们我的幸福。那幸福的闪电通知我的，我将通知每一个人；给每一条河每一座山取一个和煦的名字。陌生人，我也为你祝愿，愿你有一个璀璨的前程；愿你有情人终成眷属；愿你在尘世获的幸福；我也愿面朝大海，春暖花开。</p> </body></html>text-align应用text-align属性来管制文本在程度方向上的对齐形式。 text-align属性值： left（左对齐）center（居中对齐）right（右对齐）<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>程度对齐</title> <style type="text/css"> .p1{ text-align: center; } .p2{ text-align: right; } .p3{ text-align: left; } </style> </head> <body> <p class="p1">我爱学习</p> <p class="p2">我爱学习</p> <p class="p3">我爱学习</p> </body></html>text-decoration应用text-decoration属性来定义文本的润饰成果（下划线、中划线、顶划线）。text-decoration属性取值有4个，如下表。 属性值阐明none去掉所有划线成果underline下划线line-through中划线overline顶划线在HTML中，能够应用s元素实现中划线，用u元素实现下划线。然而有了CSS之后，都是应用text-decoration属性来实现。构造用html标签，外观个别都要用CSS。 <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>文本润饰</title> <style type="text/css"> .p1{ text-decoration: underline; } .p2{ text-decoration: line-through; } .p3{ text-decoration: overline; } </style> </head> <body> <p class="p1">我爱学习</p> <p class="p2">我爱学习</p> <p class="p3">我爱学习</p> </body></html>line-height能够应用line-height属性来管制一行文本的高度。 ...

交加选择器并集选持器后辈选择器子元素选择器相邻兄弟选择器属性选择器交加选择器交加选择器由两个选择器间接连贯形成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须间断写，不能有空格。交加选择器抉择的元素必须是由第一个选择器指定的元素类型，该元素必须蕴含第二个选择器对应的 ID 名或类名。交加选择器抉择的元素的款式是三个选择器款式，即第一个选择器; 语法： 元素选择器 . 类选择器｜ #ID 选择器 {  属性 1: 属性值 1； 属性 2: 属性值 2；}语法阐明：“类选择器｜ ID 选择器”示意应用类选择器，或者应用 ID 选择器。 例： <!DOCTYPE html><html><head><meta charset="utf-8" /><title> 应用交加选择器设置款式 </title><style>/* 元素选择器设置边框和下外边距款式 */div {  border: 5px solid red; margin-bottom:20px;}/* 交加选择器设置背景色彩 */div.txt {  background:#33FFCC;}/* 类选择器设置字体格局 */ .txt {  font-style:italic;}</style></head><body>    <div> 元素选择器成果 </div>    <div class="txt"> 交加选择器成果 </div>    <span class="txt"> 类选择器成果 </p></body></html>并集选择器并集选择器也叫分组选择器或群组选择器，它是由两个或两个以上的任意选择器组成的，不同选择器之间用“，”隔开，实现对多个选择器进行“个体申明”。 并集选择器的特点是所设置的款式对并集选择器中的各个选择器都无效。 并集选择器的作用是把不同选择器的雷同款式抽取进去，而后放到一个中央作一次性定义，从而简化了 CSS 代码量。 语法： 选择器 1,选择器 2,选择器 3, {      属性 1: 属性值 1；     属性 2: 属性值 2；}语法阐明：选择器的类型任意，既能够是根本选择器，也能够是一个复合选择器。 例： <!DOCTYPE html><html><head><meta charset="utf-8" /><title> 应用并集选择器设置款式 </title><style>div { margin-bottom:10px; border:3px solid red;}span { font-size:26px;}p { font-style:italic;}/* 应用并集选择器设置元素的公共款式 */span,.p1,#d1 { background:#CCC;}</style></head><body> <div id="d1"> 这是 DIV1</div> <div> 这是 DIV2</div> <p class="p1"> 这是段落一 </p> <p> 这是段落二 </p> <span> 这是一个 SPAN</div></body></html>后辈选择器后辈选择器又称蕴含选择器，用于抉择指定元素的后辈元素。应用后辈选择器能够帮忙咱们更快更确切地找到指标元素。 ...

字体款式font-weight: 文字粗细 normal: 默认值，规范粗细bold：粗体bolder：更粗lighter：更细100~900：设置具体粗细，400等同于normal，而700等同于boldinherit：继承父元素字体的粗细值<style> .c1 {font-weight: bold;} #p2 {font-weight: bolder;} #p3 {font-weight: lighter;} #p4 {font-weight: 500;} #p5 {font-weight: inherit;}</style><p>石灰吟</p><hr><p id="p1" class="c1">千锤万凿出深山</p><hr><p id="p2">，烈火焚烧若等闲</p><hr><p id="p3">。肝脑涂地全不怕</p><hr><p id="p4">要留清白在世间</p><hr><ul class="c1"> <li> <p id="p5">于谦 [明代]</p> </li></ul>文字格调font-style: -- 文字格调 normal; -- 失常，默认就是失常的italic; -- 歪斜<style> #p1 {font-style: italic;} #p2 {font-style: normal;}</style><p id="p1">死去元知万事空，但悲不见九州同</p><hr><p id="p2">王师北定中原日，家祭无忘告乃翁</p>字体大小个别是12px或13px或14px 留神：1、通过font-size设置文字大小肯定要带单位，即肯定要写px;2、如果设置成inherit示意继承父元素的字体大小值。 <style> #p1 {font-size: 20px} .c1 {font-size: 25px} #p2 {font-size: inherit} </style><p id="p1">竹石</p><div class="c1" > <p>咬定青山不放松，立根原在破岩中</p> <a id="p2">千磨万击还坚劲，任尔东西南北</a></div>文字字体font-family: -- 字体格调 常见字体： serif 衬线字体sans-serif 非衬线字体中文：宋体，微软雅黑，黑体留神：设置的字体必须是用户电脑里曾经装置的字体，浏览器会应用它可辨认的第一个值。如果取值为中文，须要用单或双引号扩起来 <style> #p1 {font-family: "微软雅黑"} #p2 {font-family: "宋体"} #p3 {font-family: "华文行楷"} #p4 {font-family: "华文隶书"} #p5 {font-family: "华文细黑"} #p6 {font-family: "华文楷体"} </style><p id="p1">采桑子.重阳</p><p id="p2">人生易老天难老，岁岁重阳。</p><p id="p3">今又重阳，战地黄花分内香。</p><p id="p4">一年一度秋风劲，</p><p id="p5">不似春光。</p><p id="p6">胜似春光，廖廓江天万里霜。</p>字体色彩color：rgb(123,123,123); -- 字体三原色拼凑字体色彩color：red; -- 预设色彩<style> #p1 {color: red} #p2 {color: blueviolet} #p3 {color: blue} #p4 {color: #00ff88} #p5 {color: rgb(123, 123, 123) } </style><p id="p1">人生易老天难老，岁岁重阳。</p><p id="p2">今又重阳，战地黄花分内香。</p><p id="p3">一年一度秋风劲，</p><p id="p4">不似春光。</p><p id="p5">胜似春光，廖廓江天万里霜。</p>

 大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！ 然而，明天周末，小编偷懒一下，发个图给大伙乐一下。一张图活泼形象地来了解：HTML和CSS有什么区别？JS和JAVA有什么区别？ 结尾 本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！心愿能与大家独特学习交换。

景象形容　真正意义上的inline-block程度出现的元素间，换行显示或者空格隔开的状况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。 1、父级设置font-size:0给父级设置font-size:0，而后再在子元素中设置咱们的字体大小，这样也能够去掉元素间的间距。 <style> div{ font-size: 0; } a{ font-size: 16px; background: pink; }</style><div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a></div>2、应用letter-spacing。<style> div{ letter-spacing: -6px; } a{ letter-spacing: 0; background: pink; }</style><div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a></div>3、应用word-spacing<style> div{ word-spacing: -6px; } a{ word-spacing: 0; background: pink; }</style><div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a></div>

1、父级增加overflow: hidden；给浮动元素的容器增加overflow:hidden;或overflow:auto;能够革除浮动。在增加overflow后，浮动元素回到了容器层，把容器高度撑起，达到了清理浮动的成果。 <div class="news"> <img src="news-pic.jpg" /> <p>some text</p></div>.news { overflow: hidden; *zoom: 1;}.news img { float: left;}.news p { float: right;}2、clear:both;.clear { clear: both;}3、CSS的:after伪元素.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; }.clearfix { zoom: 1; }

一、抉择symbol，下载至本地二、解压文件夹，在以后文件夹关上cmd，输出以下命令，按程序输出就好 npm install -g iconfont-toolsiconfont-tools三、输出实现之后，目录会多了一个iconfont-weapp文件夹四、将iconfont-weapp-icon复制到uniapp的static目录下（看本人的我的项目架构，资源寄存地在哪就在哪）五、在APP.vue中引入六、我的项目中应用七、这样就胜利啦

一、通过border-radius绘制圆环 <div class="loading-css"></div>.loading-css { width: 50px; /*先将loading区域变成正方形*/ height: 50px; display: inline-block; /*将loading区域变成行内元素，避免旋转的时候，100%宽度都在旋转*/ border: 3px solid #f3f3f3; /*设置周围边框大小，并将色彩设置为浅白色*/ border-top: 3px solid red; /*将上边框色彩设置为红色高亮，以便旋转的时候可能看到旋转的成果*/ border-radius: 50%; /*将边框和内容区域都变成圆形*/}@keyframes loading-360 { 0% { transform: rotate(0deg); /*动画起始的时候旋转了0度*/ } 100% { transform: rotate(360deg); /*动画完结的时候旋转了360度*/ }}.loading-css { /*在之前的CSS中加上动画成果即可*/ animation: loading-360 0.8s infinite linear; /*给圆环增加旋转360度的动画，并且是有限次*/}此时成果如下: 二、通过svg来绘制圆环 <svg viewBox="0 0 50 50" class="loading-svg"> <circle cx="25" cy="25" r="20" fill="none" class="path"></circle></svg>.loading-svg { width: 50px; /*设置svg显示区域大小*/ height: 50px; animation: loading-rotate 1.5s infinite ease-in-out; /*给svg也加上一个旋转动画*/}.path { stroke: #409eff; /*给画笔设置一个色彩*/ stroke-width: 2; /*设置线条的宽度*/ stroke-dasharray: 95, 126; /*设置实现长95，虚线长126*/ stroke-dashoffset: 0; /*设置虚线的偏移地位*/ animation: loading-dash 1.5s ease-in-out infinite;}@keyframes loading-dash { 0% { stroke-dasharray: 1, 126; /*实线局部1，虚线局部126*/ stroke-dashoffset: 0; /*后面1/126显示实线，前面125显示空白*/ } 50% { stroke-dasharray: 95, 126; /*实线局部95，虚线局部126*/ stroke-dashoffset: -31px /*顺时针偏移31/126，即前31/126显示空白，前面3/4显示线条*/ } to { stroke-dasharray: 6, 120; /*实线局部6，虚线局部120*/ stroke-dashoffset: -120px; /*最初顺时针偏移120/126，即前120/126显示空白，前面6点显示线条局部*/ }}@keyframes loading-rotate { to { transform: rotate(1turn); // 旋转1圈 }}此时成果如下: ...

标签选择器类选择器ID选择器标签选择器一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来申明这些标签的，因为每一个 HTML 标签的名称都能够作为相应的标签选择器的名称。 示例： 上面是一段html代码： <!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h3>学习</h3> <p>我爱学习，学习使我高兴。</p> </body></html> 如果咱们要为这两个标签定义 CSS 款式，就能够间接在 .css 文件内通过标签选择器来申明款式： h3{ color: red ;}p{ color: green;} CSS 语法就是由选择器和申明块 {}组成，每个申明块中能够蕴含一个或多个款式申明，并且每条申明前面以分号 ; 结尾。 除了上述例子中的 p、h3 标签能够作为标签选择器，其余的例如html、body、a、img等标签都是能够作为标签选择器的。 类选择器类选择器用于形容一组标签的款式，一个类选择器能够在多个标签上应用。语法： .class_name{ 属性：属性值;} 类选择器后面必须有一个点 .，这个点必不可少，是类选择器的标记。类选择器的名称 class_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。 示例：html代码： <!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <h3>动物园</h3> <p class="rabbit">小白兔</p> <p>小狮子</p> <p>小老虎</p> <p>小猴子</p> </body></html> 要给“小兔子” 字体款式设置为粉色加粗，能够自定义一个类选择器： .rabbit{ color: pink; font-weight: bold;} 而后在 HTML 标签上通过 class 属性来应用定义好的类款式，格局为： ...

重排(重构/回流/Reflow)：当渲染树的一部分必须更新并且节点的尺寸产生了变动，浏览器会使渲染树中受到影响的局部生效，并从新结构渲染树。重绘(Repaint)：是在一个元素的外观被扭转所触发的浏览器行为，浏览器会依据元素的新属性从新绘制，使元素出现新的外观。比方扭转某个元素的背景色、文字色彩、边框色彩等等重排元素宽度、高度扭转新增、删除可见dom元素元素的地位扭转浏览器窗口尺寸扭转填充内容的扭转，比方文本的扭转或图片大小扭转而引起的计算值宽度和高度的扭转如何防止触发回流和重绘防止频繁应用 style，而是采纳批改class的形式。将动画成果利用到position属性为absolute或fixed的元素上。也能够先为元素设置display: none，操作完结后再把它显示进去。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘应用createDocumentFragment进行批量的 DOM 操作。对于 resize、scroll 等进行防抖/节流解决。防止频繁读取会引发回流/重绘的属性，如果的确须要屡次应用，就用一个变量缓存起来。利用 CSS3 的transform、opacity、filter这些属性能够实现合成的成果，也就是GPU减速。

转眼间 2020年就过来了（即便是为了那个黑光闪闪的马克杯，那我也要有此一篇总结） 2020年之前，我还是一个繁多技术栈的小码农，一枚iOS开发工程师。2020年初便遭逢了公司被收买，并入当初的公司，而我的技术栈，也由此拓展。一年的经验1. 团队退出这家公司时，软件团队就只有3集体，我退出后成为第4集体，而如果说依照公司算的话，我是这个公司第二个软件团队的人，因为另外2个在异地，并且所属另外一家公司，老板有两家公司，协同工作，哈哈。 2. 拓展公司被收买，与老板的另外一家公司断开连接，团队也在这期间裁减到了4集体的样子，而我从iOS岗，轮转到了Web岗，一头雾水，接触着似曾相识的HTML CSS JavaScript，而后是Meteor，Blaze，再而后用Vue重构界面，我进入了另外一个语言的世界，不过如同还是很思念iOS,感觉比拟省心，然而Web给我的感觉是，比iOS写起来要自在。 3. 持续拓展又接手了一个SpringBoot+easyUI+freemarker的奇怪组合，齐全手足无措中，而后缓缓啃书中，心愿能疾速相熟我的项目。 不过这些新技术，可能都只把握到了皮毛，还有好多要学的。在这期间，感觉本人的技术栈如同被裁减了，也总是刺激本人，多学习一些总是好的。而后也追赶者SwiftUI的尾巴中，努力学习。 一年的总结除了自考要毕业了，技术上如同还是在原地踏步对于一个职场人来说，学历还是重要的，大专出厂，总是想着要深造成本科，也终于，经验了2年多的工夫，之前报的自考终于终于要画上句号了，尽管还没开始问难，然而曾经不必再去啃书，去学校考点考试了，这算是实现了一项工作，播种了半个敲门砖吧，期待论文答辩实现，应该就能有个敲门砖的样子了。 增强必要的学习然而往年，感觉除了工作上必要的学习，有个新的技术栈，貌似并没有新的，深层次的技术上的提高，技术栈也齐全是为了工作，理解的也有些刻意和浮浅，SwiftUI上也没有花太多的精力，去好好学习把握，毕竟都要把握，都是手艺不能丢。 和思否接触思否，也是从开始转向Web开始的，搜寻后总是导航过去，感觉博客的内容不错，还总有流动加入，让人每天至多的来看一遍，就怕万一有什么流动把我拉下了，那可不得了。 最初可能有点悲伤因为往年是我长这么大，第一次不能回家过年了心愿疫情早完结end

文章由 ssh 翻译 / 润色，原文地址。首发公众号「前端从进阶到入院」，欢送关注，加我好友探讨。 随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在迟缓增长:Atomic CSS-in-JS。 在这篇文章中，咱们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的款式库分割起来，目前很多大公司在 React 代码仓库中应用它们。 因为我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是心愿能帮忙你理解它的大抵内容。 先抛出一个令人开心的论断，新的 CSS 编写和构建形式让 Facebook 的主页缩小了 80% 的 CSS 体积。 什么是原子 CSS？你可能据说过各种 CSS 办法，如 BEM, OOCSS… <button class="button button--state-danger">Danger button</button>当初，人们真的很喜爱 Tailwind CSS 和它的 实用工具优先（utility-first） 的概念。这与 Functional CSS 和 Tachyon 这个库的理念十分靠近。 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button</button>用海量的实用工具类（utility classes）组成的样式表，让咱们能够在网页里大显神通。 原子 CSS 就像是实用工具优先（utility-first）CSS 的一个极其版本: 所有 CSS 类都有一个惟一的 CSS 规定。原子 CSS 最后是由 Thierry Koblentz (Yahoo!)在 2013 年挑战 CSS 最佳实际时应用的。 ...

通常，一个残缺的网站离不开后盾管理系统性能的撑持。随着应用网站的教训增多，互联网中有人整顿出了许多优良的后盾管理系统模板，以供咱们间接拿来应用。本文将针对一些不错的后盾管理系统模板，进行实用的整顿和必要的阐明。 风行的后盾治理模板后盾治理模板包含一整套功能齐全的模块，比方默认面板、统计图表、表单、表格、UI 元素、相册、信箱，以及登录注册页面、零碎设置、个人资料、联系人、信息管理、文件治理、谬误页面、时间轴、标签云、即时聊天等常见页面。上面介绍了几种模板框架，大家能够找到相应的资源领会下： hAdminhAdmin 是一个收费的后盾治理模版，该模版基于 Bootstrap 与 jQuery 制作，集成了泛滥罕用插件。Github 地址：https://github.com/wumingjun/...。 layuiAdminlayuiAdmin 由 layui 自有的前端架构实现而成，是一款采纳本身模块标准编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织模式，门槛极低，拿来即用。 AdminLTEAdminLTE 基于 Bootstrap 4 的收费后盾治理模版。官网地址：https://github.com/ColorlibHQ...。 GentelellaGentelella 是一个收费应用的 Bootstrap 治理模版。默认应用Bootstrap 3 格调，还有一系列弱小的 jQuery 插件和工具去发明一个弱小的框架。Github 地址：https://github.com/ColorlibHQ...。 其余后盾模板Start Bootstrap - SB Admin 2：一个收费应用的 Bootstrap 治理模版。Github 地址：https://github.com/StartBoots...。 Material Dashboard：一个收费应用的 Bootstrap 治理模版。Github 地址：https://github.com/creativeti...。 StarAdmin-Free-Bootstrap-Admin-Template：基于 Bootstrap 4 的响应式的收费后盾治理模版。Github 地址：https://github.com/BootstrapD...。 vue-element-admin：一个后盾前端解决方案，它基于 vue 和 element-ui实现。演示地址：https://panjiachen.github.io/...。不少后盾零碎基于此计划二次开发而成，比方 Dcat Admin、zuihou-admin-cloud 等。 JeeSite：一个 Java EE 企业级疾速开发平台。演示地址：http://demo.jeesite.com。 风行的注册登录模板对于一个后盾管理系统来说，或者很多性能都是不须要的，然而注册登录模块却必不可少。上面整顿了一些或者对你有用的后盾登录模板： 后盾治理模板中的注册登录页面如 layuiAdmin，能够在 layuiAdmin 模板中，找到相干资源。成果如图： ...

 大家好，我是小编南风吹，明天举荐一款好用的开源图标库。 咱们平时找图标往往会去 iconfont，然而明天，看了本篇文章后，就会有一个新的抉择——CSS.GG，只有是优良的，咱们就有理由去应用它。 CSS.GG领有700多个时尚丑陋的 css 图标库，特地适宜 UI 设计师和前端开发者下载应用。 700+ CSS 图标 css.gg 是一套纯 css 实现的轻量好看的开源图标库，特点是所有的图形都通过 css 语法实现，是技术和设计的完满联合。 图标特色格调中性，时尚对立，利用场景很广；一共700多个图标，能满足个别的我的项目需要；反对 xd / svg / css 等多种格局下载，不仅能用于设计二次批改，对前端开发的反对尤为优良； 应用体验 图标在工作中利用十分宽泛，丑陋的图标不仅在互联网产品中随处可见，在 PPT 、数据图表和海报设计等各种可视化信息载体中也经常出现。 和大多数图标库的原始图形格局不一样，css.gg 是一个代码实现的图标库，无论是导出的 svg、xd 格局、间接导入 figma，还是前端开发的援用，都为设计和开发带来了便当。因而很适宜用于互联网我的项目。特地是在一些较轻的 web 我的项目上，不须要再引入字体文件或 svg 图形的形式加载图标，只须要拷贝相应的图标代码，不仅在前端开发中很不便地调整色彩，而且能用 css 代码部分调整色彩，从而让图标变成黑白。 须要留神的是，图标应用了不少 css3 标准的渲染，须要思考浏览器的兼容，如果不是运行挪动端或古代浏览器上的我的项目，可能会有兼容性的问题。 收费开源阐明 css.gg 基于 MIT 开源协定在 github 上开源，任何集体和商业机构都能够收费下载应用。 关注我，继续分享高质量的收费开源、收费商用的资源。 结尾本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！心愿能与大家独特学习交换,欢送关注我的公众号【Github导航站】。往期举荐太漂亮了！有了3款开源图标库，不必再去求设计师了 10个相见恨晚的vue.js库！用好了，事倍功半！ 太及时了！13个Spring Boot练手我的项目,用好了，升职涨薪不必愁 程序员接私活必备后盾框架，不必反复造轮子，网友：太好用了！ 还在从头到尾撸我的项目？这6个SpringBoot我的项目用好了，事倍功半！ 「00后缩写黑话翻译器」登上GitHub热榜，中年网民终于能看懂年轻人的awsl

2018-2020年web前端面试题整顿成PDF文档，内容次要包含有html、css、JavaScript、DOM、HTTP、Vue、等等2018面试题：Html1，html语义化2，meta viewport相干3，canvas 相干 CSS1，盒模型1.1，ie盒模型算上border、padding及本身（不算margin），规范的只算上本身窗体的大小 css设置办法 1.2，几种取得宽高的形式 1.3，拓展 各种取得宽高的形式 1.4，边距重叠解决方案(BFC) BFC原理 2，css reset 和 normalize.css 有什么区别3，居中办法3.1，程度方向上 3.2，垂直居中 3.3，垂直程度居中依据上方联合 4，css优先级确定5，如何革除浮动6，自适应布局7，画三角形8，link @import导入css9，animation10，长宽比计划11，display相干 JavaScript1， ["1", "2", "3"].map(parseInt)2， [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]4， [typeof null, null instanceof Object]5， js数据类型6，promise 用法7，es6 promise ajax8，闭包9，什么是立刻执行函数？应用立刻执行函数的目标是什么？10，async/await 语法11，深浅拷贝12，数组去重13，正则实现trim()性能14，JS原型15，es6 class16，JS 如何实现继承17，手写jquery插件18，数组合并去重排序19，call apply20，for 中setTimeOut21，sort函数22，navigator23，jquery绑定形式24，事件流向25，原生操作class DOM1，dom事件模型,2，挪动端触摸事件3，事件委托 HTTP1，常见状态码2，缓存3，Cache-Control 和 Etag 的区别4，Cookie sessionStorage localStorage5，GET POST区别,6，申请行，申请头，申请体详解7，跨域、JSONP 、CORS、postMessage8，osi模型9，http2.0 http1 Vue1，生命周期程序2，组件通信3，Vuex4，VueRouter,5，Vue双向绑定6，computed watch methods 算法1，各种排序实现2，二分查找3，二叉树相干 网络安全相干1，XSS CSRFwebpack相干1，打包体积 优化思路2，Loader3，plugins 有须要面试题文档的能够私信，收费支付！2019面试题HTTP、浏览器1，浏览器存储的形式有哪些2，对前后端跨域能够说一下吗？如何解决跨域的？3，浏览器 cookie 和 session 的意识。4，输出URL产生什么？5，浏览器渲染的步骤6，页面渲染优化7，强制缓存和协商缓存8，GET 和 POST 申请的区别9，HTTP1.0 / 1.1 / 2.0 及HTTPS10，介绍下304过程11，HTTP 状态码12，Web性能优化 ...

1，CSS设置字体名称属性(font-family):示例： <style> .fs1{font-family:Arial, Helvetica, sans-serif;}.fs2{font-family:黑体;}.fs3{font-family:"Times New Roman", Times, serif;}</style><span class="fs1">CSS设置字体属性</span><br /><span class="fs2">CSS设置字体属性</span><br /><span class="fs3">CSS设置字体属性</span><br /> 2，CSS设置字体大小属性(font-size):示例： <style> .fs1{font-size:12px;}.fs2{font-size:16px;}.fs3{font-size:18px;}.fs3{font-size:24px;}</style> <span class="fs1">CSS设置字体大小属性</span><br /><span class="fs2">CSS设置字体大小属性</span><br /><span class="fs3">CSS设置字体大小属性</span><br /><span class="fs4">CSS设置字体大小属性</span><br /> 3，CSS设置字体粗体属性(font-weight):示例： <style> .b{font-weight:bold;} </style><span>CSS设置字体粗体，无粗体！</span><br /><span class="b">CSS设置字体粗体，有粗体</span><br /> 4，CSS设置字体斜体属性(font-style:italic;):<style> .i{font-style:italic;} </style><span>CSS设置字体斜体，无斜体！</span><br /><span class="i">CSS设置字体斜体，有斜体</span><br /> 5，CSS设置字体色彩属性(color)示例： <style>body{font-size:14px;}.color1{color:#000;} /*彩色*/.color2{color:#f00;} /*红色*/.color3{color:green;} /*绿色*/.color4{color:orange;} /*橙色*/.color5{color:blue;} /*蓝色*/div{text-align:center; padding-top:32px; width:600px; margin:0px auto;} </style><span class="color1">CSS设置字体色彩 彩色！</span><br /><span class="color2">CSS设置字体色彩 红色!</span><br /><span class="color3">CSS设置字体色彩 绿色！</span><br /><span class="color4">CSS设置字体色彩 橙色!</span><br /><span class="color5">CSS设置字体色彩 蓝色！</span><br />

作者： Ahmad Shadeed 译者：前端小智起源：ishadeed挪动端浏览：https://mp.weixin.qq.com/s/kp...点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 程度居中内联元素要使内联元素（如链接，span 或img）居中，应用 text-align: center 足够了。 <div class="desk"> <span class="plate"></span></div>.desk { text-align: center;} 对于多个内联元素，也能够应用text-align：center: <div class="desk"> <span class="plate"></span> <span class="plate"></span></div>.desk { text-align: center;} Flexbox应用 flexbox 也能够疾速居中元素： .desk { display: flex; justify-content: center;}对于多个内联的我的项目，也能够失常工作： CSS Grid应用网格容器时，图中的盘子将依据其网格区域居中。 请留神，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。 .desk { display: grid; justify-content: center;} 块元素Auto Margin宽度和高度已知的块元素能够通过设置margin-left:auto 和 margin-right:auto 居中元素。 .plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto;} 对于多个块元素，它们应该包装在一个元素中，而后让这个父元素居中。 .tray { display: flex; margin-left: auto; margin-right: auto;} ...

怎么自学javascript？上面本篇文章就来给大家介绍一下零碎学习JavaScript的办法。有肯定的参考价值，有须要的敌人能够参考一下，心愿对大家有所帮忙。 一、 要零碎的学习JavaScript，须要首先把握HTML和CSS，这是根底也是学习JavaScript的时候须要用到的常识。 二、 刚开始入门不倡议看《JavaScript权威指南》和《JavaScript高级程序设计》这些书籍。并非这些书籍不好，相同这些书籍是公认的好书!次要是因为这些书籍内容太多太厚了，很容易让你走上‘从入门到放弃’路线!对于初学者而言，多而全意味着主次难分，无奈取舍;此时你想把JavaScript学好，只能全学，然而很多内容对于初学者而言很难了解! 三、 系统地学习JavaScript应依据知识点的难易及内在联系划分阶段：高级->进阶->高级 根底语法、数据类型、算术运算符、关系运算符、逻辑运算符、类型转换等，这些内容更多的是须要咱们去记忆而后了解;(字词)循环语句、逻辑分支等语句须要了解并纯熟应用;(句子)函数的各种模式：函数表达式、函数申明、匿名函数、自执行函数等，了解函数及参数的作用，明确事件与函数的关系;(段落)了解JavaScript中作用域的概念，相熟申明晋升、垃圾回收等机制;了解根本数据类型与援用数据类型的异同，及相干的内存原理;把握数组、字符串、Date对象、Math对象等罕用的API;了解DOM、BOM的概念作用及罕用AIP;了解event事件对象的概念及作用，把握事件对象的罕用属性及办法，了解事件模型、事件流、事件循环等机制;把握正则表达式元字符、量词等基础知识，能读懂并写出一些常见的匹配规定;纯熟应用计时器，了解静止原理，能写出常见的一些网页成果;明确构造函数、原型的作用，了解面向对象的编程思维，晋升形象编程的能力;把握本地存储相干技术(cookie、localStorage)，理解其利用场景;前端技术的更新如此迅速，在这样的大环境下，前端工程师放弃自学能力就显得尤其重要了。因而，“学什么”“怎么学”就是咱们要迫切解决的问题。理解服务端相干概念(服务器、数据库、http协定等)，把握前后端拆散及数据交互方式(ajax、jsonp、跨域解决方案等);了解利用闭包、原型链与继承，实质上讲，对象之间是基于原型的一种行为委托，把握了这些内容才会真正了解‘JS中所有皆对象’这样的说法;相熟常见的设计模式：工厂模式、单例模式、代理模式、策略模式、公布订阅模式、组合模式等;尝试去读一些优良的框架类库源码，了解借鉴一些优良的解决方案，能够让咱们疾速的成长。四、最好有内行人领导，什么内容罕用，什么内容重点把握等等。身边没有一个可能领导你学习的人，能够到这个WEB前端裙：484，757，760，外面有依据目前市场需求，录制的最新的零碎教程，不论是计算机专业想要往WEB前端方向倒退，还是零根底想转行，都能够跟着教程学，有什么不懂的能够在外面问。

开始大佬的表演 从事前端开发工作差不多3年了，本人也从一个什么都不懂的小白积攒了肯定的实践和实践经验，并且本人也对这3年来的学习实际历程有一个梳理，以供前面来细细回顾品尝。1、为什么抉择学习前端开发？你可能是因为趣味，实现一个网站、页面、性能的成就感。你也可能是因为当初前端岗位火爆，就业率高。不论是因为什么，只有找准了指标，学就是了！ 2、Web前端开发是干什么的？有没有“钱”途？（1）定义：前端开发就是将UI设计师设计好的界面实现，即用一些前端方面的语言（HTML、CSS、jQuery等等）将UI设计变成能够与用户交互的网页； （2）岗位职责：参加原型需要探讨会议，从前端和用户交互的角度提出一些本人的倡议和意见；与产品经理沟通梳理确认原型及需要；与UI设计师沟通，更好的实现界面；与后盾开发人员沟通，实现数据的交互；配合测试人员，解决bug；配合整个团队，对我的项目后续的迭代进行开发等工作； （3）“钱”途：前端工程师目前岗位火爆，只有把握了真正的前端常识，而不是泛泛而谈，找工作也绝对比拟轻松，薪资也是比拟可观的。 当然，刚刚入门，我的倡议是不要太看重薪资，最应该看中的是有没有好的环境和平台能够学习到更多。当你在好的环境好的平台学习到更多，积攒了肯定教训之后，薪资真的挺简略。不要被刚刚开始少得可怜的薪资所战胜，从而放弃，如果你真的想要进入这行，坚持下去吧。将来回过头来，你会发现，所有就都是这么简单明了了。 一、如何入门，学习倡议在你开始动手学习前，有一些小的倡议。依据我本人学习的教训发现，这些倡议在当初乃至我当前的岗位生涯里都是有很大帮忙的。还有就是开始学习前，倡议能够先花几天工夫，查找一些如何入门的文章，通过对许多文章及前人的倡议。整顿出适宜本人学习的一套残缺打算，而后在学习过程中，在本人对前端更加理解之后，做出一些打算的调整。我置信，在这样的打算学习之下比一来就开始学习具体常识要疾速无效得多。代码标准：不是说小白期间不重要，正是什么都不懂的时候，才要严格执行学到的标准。徐徐渐进，等到学有所成，慢慢地造成一套本人的代码格调。手写代码：最开始学习倡议手写代码，哪怕只有一行代码，也要一个字母一个空格的敲打进去。入手操作：哪怕只有一行代码的事例，也要手动编写运行，而不是眼高手低，哦，好简略会了，就不入手了。打好根底：只有小白阶段把根底打好了（比方：HTML、CSS、Jquery），后续进阶难关才会更好克服。坚定不移：在感觉最难的时刻，保持一下，天空会齐全不一样制订打算：制订相应的打算，并严格执行，否则个别学习效果大打折扣好高鹜远：前端要学习把握的常识十分多，须要跟着打算一步一个脚印，由易到难以上是集体学习时的总结，如果可能较好的遵循，学习效果和后续的进阶方面，有大大的帮忙。当然适宜本人的办法形式才是最好的。 二，小白阶段怎么学这个阶段的你，应该是什么都不会，或者连前端大略是做什么都不晓得。或者只是据说这个岗位火爆，好找工作，所以你想学习。也或者你看到一个精美的网页，你开始好奇了，感觉实现它是很美的一件事，你想理解怎么样做进去的。如果你想晓得怎么入门，能够看看接下来的倡议和意见。这是通过还是小白的自我学习阶段到胜任前端岗位这个过程中，积攒的一些教训，心愿可能有所帮忙。学习步骤的倡议 （1）HTML标签（网页构造标记语言） +CSS款式（网页款式语言）。它们是实现动态Web利用最根底的语言，把握好它们，你能够编写出一个简略的模块（如导航等）甚至一个残缺的动态网页。 （2）Jquery库（Javascript编程语言的一个必须把握的库）。它能够让你之前做的动态网页“动起来”，比方（下拉二级菜单、网页右侧工具导航的开展等等交互特效）。 （3）倡议花工夫看看《DOM编程艺术》这本书，或这类书籍。它是对于Javascript编程语言在网页开发下面的使用，跟着这本书走下来，你能够编写一个简略的具备交互成果的网站了。 以上几点就是小白最开始入门学习的货色，倡议依照程序学好这三种语言。能够应用sublime编辑器进行入手编写。当你依据学习步骤（3）实现一个小小的网站时，你会觉得很有成就感，后续的学习也就信念百增，趣味百倍。 三，初步进阶学习倡议置信通过后面的摸索，如果你能坚持下去并依照倡议学习，应该曾经实现了第一个本人入手实现的网站了吧。接下来的一些初步进阶学习的倡议。欠缺咱们的基础知识 （1）HTML5，更高级的标记语言，性能更加丰富多彩。新增许多标签，比方：canvas、video等，能够本人实现更多的动画，炫酷的特效或者播放视频等等。 （2）CSS3，更高级的款式语言。你能够实现丰富多彩的页面动画，不必要每次都是用js，应用CSS3就能够轻松便捷的实现一些想要的网页交互。 （3）javascript编程语言(重中之重)。这是前端必要把握的真正算得上是编程语言的语言，学会灵活运用javascript，将对当前学习工作有十分大的帮忙。把握它最重要的首先是学习好基础知识，而后通过一直的实战来晋升咱们的编程技巧和逻辑思维。这一块学习是继续的，直到咱们真正把握它并且可能灵活运用它。如果最开始学习一两遍之后，发现临时没有晋升的空间，咱们能够临时放一放。持续上面的学习，javascript贯通咱们前端工作中，在之后的学习实现里也会遇到和锤炼到。真正学习起来并不难理解，要害是灵活运用。 （4）开始学会应用一些前端的框架，这里我是指前端的UI框架，它们能够帮忙咱们疾速高效的开发一个网站，并且界面风格也好不错。比方PC端的Bootstrap，其实它是响应式的框架，也能够用在挪动端H5页面，或者AmazeUi，这是一款专一于挪动端的框架。你能够百度也能够在对应框架的官网查看文档，当你学会应用某个框架的时候，其余的n+1个各种各样的前端UI框架，你也会信手拈来。 （5）还有一种前端框架，如layui这类的，算是工具类框架。它外面蕴含了分页成果、弹窗成果、日期抉择控件等等内容。当你学习到这个时候或者更前面的学习里，你能够去学习如何应用，可能更高效的帮忙你实现我的项目的开发。 （6）通过百度，能够找到许多网页交互特效的插件，如二级菜单下拉特效、手风琴菜单、图片轮播、弹窗成果等等。下载它们源码及示例，入手学习应用或模拟它们的成果，能够帮忙咱们疾速实现一些比较复杂的交互特效。当初有十分多的收费开源插件，让咱们不必再反复造轮子，间接应用就很不便。当然，我的倡议是当你学会应用某个特效插件时，你能够学习它的源码，看看成果到底是如何实现的。这也是坚固学习javascript语言的好办法，你值得领有哦。 （7）到了这一步，你算是根本把握了前端开发的一些常识技能。你能够找到一些典型的官网来仿写它们的界面和交互特效，如京东官网、淘宝官网等等。认真写几个这样的官网首页，能够进一步坚固和欠缺之前的学习到的常识。 四，持续学习当你能够实现一个根本的带有交互成果的页面之后，加入工作中进一步晋升本人就是须要把握一些风行的前端开发JS框架及高效风行的开发模式。置信到了这一步，你曾经胜利迈入了前端的大门，接下来就是为了如何成为工作中的主力前端工程师而修行了。1、罕用的一些前端JS框架倡议 （1）vue.js，一款偏差于挪动端的JS框架，轻量级。数据驱动交互，学习起来非常容易，它能够不依赖与Jquery框架独立应用帮忙你开发一个敌对的挪动端界面。一个前端开发必要把握的技能，一款风行的JS框架。对于如何应用把握它，你能够百度，还能够去它的官网学习官网文档。 有须要前端面试题材料能够私信，CSS面试题文档，JavaScript面试题文档，vue面试题文档，大厂面试题文档，收费分享！（2）react.js，比拟起vue，它更简单一点，重量级一点，然而实现大型的我的项目也很疾速便捷。把握它也成了诸多公司入职要求，置信学习过vue这类数据驱动框架，在学习起这个就会容易很多。比起平时jQuery开发我的项目，vue和react开发要害是思维会有所转变，把握面向对象和数据驱动交互，会让你感到开发的更加容易和敌对。如何把握它，百度、菜鸟网站、官网文档都是不错的抉择。 2、比拟风行的开发模式倡议 （1）vue + webpack集成开发 （2）react + webpack集成开发 （3）node.js学习及利用，一款能够应用javascript语言开发后盾的工具 （4）weex + webpack集成开发，目前很少看到公司应用 （5）angular.js，和vue.js这些差不多，但目前也很少看到应用了 以上的开发框架及开发模式（1）（2）（3），是比拟多的互联网公司团队，都会采纳的。值得去深刻学习，并且当你把握后，你会发现开发前端我的项目原来能够这么简略。 放弃学习状态不断进步 以上的文章都是一些入门的倡议。当然贯通你学习中和当前的工作中，你可能还学要把握一些其余的必备技能。如： 百度很重要。UI设计文件PSD切图（必备技能，学会看UI设计交付给你的设计图）。应用谷歌或火狐浏览器的F12开发者模式，在开发过程中疾速调试找到问题。与后盾配合进行数据接口的调试，及解决一些跨域的问题（如：nginx的配置应用）。不同我的项目应用不同最佳的开发工具（sublime、editplus、hbuilder、vsCode等等）。应用版本控制工具（如：svn），你与团队紧密配合的好工具。最初这么多学习内容看下来，是不是都快放弃了，然而不要放心。入门很简略，做好入门指南之后，后续就会变得容易起来。这都是一些技术，一些工具，把握它就好了。真正的难点是工作中的团队配合，代码的标准，以及一直的提高。五，加入工作后，一些倡议（1）认清自我岗位的职责。 （2）与产品经理的配合：理解原型及需要，提出本人正当的倡议。 （3）与UI设计的配合：依据UI布局怎么实现才是最好最优的形式，而不是拿着设计图就埋头苦干，提出更好的倡议。 （4）与其余前端配合：这个时候代码标准特地重要，所以从一开始学习前端的时候，我就强调了在学习之初就造成良好的编码习惯是很不错的，很必要的。 （5）自我的初步测试：实现一个我的项目开发后，自我进行功能性的初步测试，无问题后再交付测试人员测试。 （6）配合测试人员，批改bug。 （7）踊跃配合我的项目产品的后续迭代。 （8）当你的程度进一步晋升，你就要学会治理一个前端团队进行工作的调配和整体品质及交付工夫的把控。这个是一步一步晋升的，尽管当初你可能还接触不到，然而能够理解一下。

1，盒模型1.1，ie 盒模型算上 border、padding 及本身（不算 margin），规范的只算上本身窗体的大小 css 设置办法如下： /* 规范模型 */box-sizing:content-box ;/*IE 模型*/box-sizing:border-box ; 1.2，几种取得宽高的形式 dom.style.width/height：这种形式只能取到 dom 元素内联款式所设置的宽高，也就是说如果该节点的款式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种办法是获取不到 dom 的宽高的。dom.currentStyle.width/height：这种形式获取的是在页面渲染实现后的后果，就是说不论是哪种形式设置的款式，都能获取到。但这种形式只有 IE 浏览器反对。window.getComputedStyle(dom).width/height：这种方的原理和 2 是一样的，这个能够兼容更多的浏览器，通用性好一些。dom.getBoundingClientRect().width/height：这种形式是依据元素在视窗中的相对地位来获取宽高的。dom.offsetWidth/offsetHeight：这个就没什么好说的了，最罕用的，也是兼容最好的。1.3，拓展 各种取得宽高的形式 获取屏幕的高度和宽度（屏幕分辨率）：window.screen.height/width获 取 屏 幕 工 作 区 域 的 高 度 和 宽 度 （ 去 掉 状 态 栏 ） ：window.screen.availHeight/availWidth网页全文的高度和宽度： document.body.scrollHeight/Width滚动条卷下来的高度和向右卷的宽度： document.body.scrollTop/scrollLeft网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth1.4，距重叠解决方案(BFC) BFC 原理 外部的 box 会在垂直方向，一个接一个的搁置 每个元素的 margin box 的右边，与蕴含块 border box 的右边相接触（对于从做往右的格式化，否则相同）box 垂直方向的间隔由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会产生重叠bfc 的区域不会与浮动区域的 box 重叠bfc 是一个页面上的独立的容器，里面的元素不会影响 bfc 里的元素，反过来，外面的也不会影响里面的计算 bfc 高度的时候，浮动元素也会参加计算 创立 bfc ? float 属性不为 none（脱离文档流）position 为 absolute 或 fixeddisplay 为 inline-block,table-cell,table-caption,flex,inine-flex ? overflow 不为 visible根元素 demo2，居中办法程度方向上 ...

一个很有意思的题目。如何不应用 overflow: hidden 实现 overflow: hidden？ CSS 中 overflow 定义当一个元素的内容太大而无奈适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范畴内的内容剪裁。 管制 overflow: hidden 的方向这源自一个理论的需要，在某个需要当中，要求容器内的内容，在竖直方向上超出容器会被裁剪，而在程度方向上超出容器，则不会被裁剪。相似这样： 有意思，第一个想到的解法当然是在上述黄色背景元素自身之外再套用一层父元素，而后父元素才是理论设置 overflow: hidden 的元素，父元素的范畴就是理论才是管制是否裁剪的范畴。相似这样： 理论的父元素才是设置了 overflow: hidden 的元素。 当然，如果理论状况就是这么简略，也没什么问题。 然而如果元素处于一个简单的布局流内，那么可能就没有那么多的空间，让咱们再去包裹一层父容器了： 相似上图的状况，还是两头黄色元素，要求只有竖直方向超出裁剪。此时，包裹父元素不再那么容易施展。所以，咱们须要另辟蹊径。 利用 clip-path 进行裁剪好的，这会能够进入注释了。CSS 中，除了 overflow: hidden，还是有其它属性也能够实现超出容器区域进行裁剪的。clip-path 便是其中翘楚。 应用 clip-path，咱们能够不便的管制任意方向上的裁剪。上述的需要则能够这样解决： <div class="g-container"> <div class="sub"></div></div>要害的 CSS 代码如下： .g-container { width: 200px; height: 200px; clip-path: polygon(-1000% 0, 1000% 0, 1000% 100%, -1000% 100%);}这里利用了 clip-path: polygon() 来裁剪一个矩形区域，而利用了 clip-path 反对负坐标的特点，将裁剪的终点定到远离坐标能画成一个大矩形的形态。示意图： 这样，咱们可能在失常布局流中，以后容器大小范畴内，画出任意心愿 overflow: hidden 的范畴。 ...

问题形容 ：应用 input 标签画了一个搜寻框的元素，然而点击的时候有蓝色边框呈现。 剖析 ：应该应用边框相干的款式来解决。 解决 ：应用 outline: none 的款式解决问题。outline，即元素轮廓。

什么是选择器：每一条css款式定义由两局部组成，模式如下： [code] 选择器{款式;} [/code] 在{}之前的局部就是“选择器”， “选择器”指明了{}中的“款式”的作用对象，也就是“款式”作用于网页中的哪些元素。 根底选择器标签选择器（抉择标签名）：一个残缺的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签，采纳相应的CSS款式；如： p{color:#900;font-size:12px;background:#090;}ID选择器（#号+ID名）：ID 选择器能够为标有特定 ID 的 HTML 元素指定特定的款式。 依据元素ID来抉择元素，具备唯一性，这意味着同一id在同一文档页面中只能呈现一次；如： #demoDiv{color:#FF0000;}类选择器（.+class名）：类选择器依据类名来抉择,后面以”.”来标记；如： .demoDiv{color:blue;}通用选择器（抉择全副元素）：通用抉择器用*来示意；如： * {color:green;font-size: 12px;}群组选择器：当几个元素款式属性一样时，能够独特调用一个申明，元素之间用逗号分隔；如： p,h1,span{color:red;line-height:20px;}#main p, #sider span {color:#000;line-height:26px;}应用群组选择器，将会大大的简化CSS代码，将具备多个雷同属性的元素，合并群组进行抉择，定义同样的CSS属性，这大大的进步了编码效率，同时也缩小了CSS文件的体积。 档次选择器子选择器 (元素之间用>宰割)：子选择器（child selector）是指它的间接后辈，能够了解为作用于子元素的第一个后辈;如： p>span{color:red;}后辈选择器（元素之间用空格分隔)：用来抉择特定元素或元素组的后辈，将对父元素的抉择放在后面，对子元素的抉择放在前面，两头加一个空格离开如： section span{color:blue;}子选择器与后辈选择器的区别：1）子选择器（child selector）仅是指它的间接后辈，而后辈选择器是作用于所有子后辈元素；2）子选择器是通过“>”进行抉择，而后辈选择器通过空格来进行抉择； 兄弟选择器（元素之间用+分隔):除了下面的子选择器与后辈选择器，咱们可能还心愿找到兄弟两个当中的一个，如一个题目h1元素前面紧跟了两个段落p元素，咱们想定位第一个段落p元素，对它利用款式。咱们就能够应用相邻同胞选择器;如： h1 + p {color:blue;}伪类选择器伪类能够利用在链接标签中，也能够利用在一些表单元素中，但表单元素的利用IE不反对，所以个别伪类都只会被利用在链接的款式上。 动静伪类选择器动静伪选择器的书写程序： 1）link和visited必须放在最后面（无先后顺序,动态伪类选择器）；2）link和visited只能用于a标签；3）link和visited前面是focus 4）focus前面是hover；5）hover前面是active； 构造伪类选择器first-child：第一个元素。last-child：最初一个元素。nth-child(n)：某一个元素 想抉择第几个，n就取值多少。nth-child(-n+m)：选中前m个元素 n起始值是0。nth-of-type(n)：选中第n个元素。nth-last-child(n)：选中倒数第n个元素. 否定伪类选择器元素名：not（n）除了某个元素，其它元素增加款式 伪元素选择器：所有伪元素选择器都必须放在呈现该伪元素的选择器的最初面，也就是说伪元素选择器不能跟任何派生选择器； :first-letter，设置块元素首字母款式，行内元素转换成块元素和行内块元素也反对；div p:first-letter {font-size: 20px}//抉择div元素里所有的p元素的第一个字母或汉字;:first-line：设置第一个文本行款式；.box .main:first-line {color: #f00} //只有局部属性容许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height:before：设置之前的款式，能够插入生成的内容，并设置其款式；body:before {content: 'The Start:'; display: block;}//在body元素前插入文本内容'The Start:'，并设置其为块元素:after：设置之后的款式，能够插入生成的内容，并设置其款式；例： body:after {content: 'The End.';display: block;}//在body元素最初插入文本内容'The End.'，并设置其为块元素input::-webkit-input-placeholder（批改输入框提示信息款式）属性选择器是依据元素的属性来匹配的，其属性能够是规范属性也能够是自定义属性；也能够同时匹配多个属性； 格局：元素名称[属性名+“属性值”]input[type=“text”]格局： 元素名[属性名^=属性值结尾的内容]选中以XXX结尾的元素 input[type^=“te”]+span{ color:red;}格局： 元素名[属性名 $ =属性值结尾的内容]选中以XXX结尾的元素 ...

一、CSS在页面中能够帮忙用户实现如下工作：显隐特效：借助CSS的display和visibility实现。再联合渐隐、渐显和各种动画序列，能够设计出简单的视觉效果尺寸缩放：应用CSS的width和height实现。在变形动画中常见，如设计图像、栏目、页面开展、膨胀等；动态控制指标对象的大小，设计变动的页面布局等对象定位：应用CSS的position、left、top、right、和bottom等，在位移动画中常见，如开发网页游戏视图管制：应用CSS的clip、overflow、visibility，能够动静的管制页面对象的显示方式和显示内容通明设计：应用CSS的opacity，个别与显隐、缩放、位移动画配合应用，加强渐进、渐弱成果对象成果：动静扭转字体款式、文本版式、网页布局版式等，设计图像特效等UI交互：配合CSS+HTML，设计弱小性能的交互表格、交互表单，设计富裕变动的网页皮肤二，引入css样式表的三种形式：1）行内款式（内联款式）概念：称行内款式、行间款式，是通过标签的style属性来设置元素的款式； 根底语法 <标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>毛病：没有实现款式和构造的拆散 2）外部样式表（内嵌样式表) 是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义； 根底语法： <head> <style type="text/css"> div{ color: red; font-size: 12px; } </style></head>毛病：没有彻底拆散 3）内部样式表（外链式） 概念：是将所有的款式放在一个或多个以.css为扩展名的内部样式表文件中，通过link标签将内部样式表文件链接到HTML文档中; 根本语法: <head> <link rel="stylesheet" type="text/css" href="css文件门路"></head>留神: link是一个单标签；link标签要放在head头部标签中，并且指定link的三个属性；属性： rel：定义以后文档与被链接文档之间的关系，在这里须要指定为"stylesheet"，示意被链接的文档是一个样式表文件；type：定义所链接文档的类型；href：定义所有链接内部样式表文件的url，能够是绝对路径也能够是相对路径；毛病：须要引入 次要讲讲行内款式三、操作行内款式;CSS的很多属性都时有复合名的，应用连字符“-”，如border-right 、margin-left等，但在脚本中（js代码）连字符会被定义为减号，会主动参数表达式的运算；解决这个问题 须要应用 小驼峰命名：borderRight 、marginLeft等 1，应用style对象： elementNode.style.fontFamily="Arial,Helvetica,sans-serif";elementNode.style.cssFloat="left";//float是js中的保留字，须要应用cssFloat来示意float属性elementNode.style.color="#ff0000";elementNode.style.width="100px";//单位不能脱漏elementNode.style.top=top+"px";//设置动静属性2，应用getPropertyValue()办法,晚期IE不反对，但间接应用elementNode.style.width拜访款式属性： var value=elementNode.style.getPropertyValue(propertyName)例: window.onload = function(){var box = document.getElementById("box");//获取<div id="box">var width = box.style.getPropertyValue("width");<=>var width = box.style.widthbox.innerHTML = "盒子宽度："+width；var marginLeft=box.style.getPropertyValue("margin-left"); //须要连字符的款式属性box.innerHTML = "盒子外边距："+marginLeft；}3，setProperty()办法：为指定元素设定款式;不兼容晚期的IE，elementNode.sytle.width="500px"; elementNode.setProperty(propertyName,value,priority); // 参数解释：属性名，属性值，是否设置！important优先级window.onload = function(){var box = document.getElementById("box");//获取<div id="box">box.style.setProperty("width","400px","");box.style.setProperty("height","400px","");//兼容晚期的IE box.style.width= "400px";box.style.height = "400px";}4，removeProperty()办法：移除指定CSS的款式申明 elementNode.removeProperty(propertyName)5，item()办法:返回style对象中指定索引地位的CSS属性名称 element.style.item(index)；6，getPropertyPriority()办法：获取指定的css属性中是否附加了！important，有则返回important，无则返回空字符串 <div id="box" style="width: 100px;height: 100px;background-color: red;border: solid 50px blue;"></div>window.onload = function(){//不兼容IE var box=document.getElementById("box"); box.nmusever=function(){ box.style.setProperty("background-color","blue",""); box.style.setProperty("border","solid 50px red",""); } box.nclick=function(){ box.innerHTML=(box.style.item(0)+":"+box.style.getPropertyValue("width")); box.innerHTML=box.innerHTML+"<br>"+(box.style.item(1)+":"+box.style.getPropertyValue("height")); } box.nmuseut=function(){ box.style.setProperty("background-color","red",""); box.style.setProperty("border","solid 50px blue",""); } window.onload = function(){//兼容ie var box=document.getElementById("box"); box.nmusever=function(){ box.style.backgroundColor="blue" box.style.border="solid 50px red"; } box.nclick=function(){ box.innerHTML="width:"+box.style.width; box.innerHTML=box.innerHTML+"<br>"+"height:"+box.style.height; } box.nmuseut=function(){ box.style.backgroundColor="red"; box.style.border="solid 50px blue"; } }拓展：非IE浏览器反对style拜访，然而它无奈获取style对象中指定序号地位的属性名称，能够应用cssText属性获取全副的style属性值，通过String的split（）把字符串转为数组再操作; ...

应用.stylelintignore增加疏忽文件校验，在lint-staged执行校验标准时，报错 ✖ stylelint --fix:Error: No files matching the pattern "/Users/lyc/Desktop/tal/monkey-wukong-wap/src/pages/reportActivity/assets/iconfont/iconfont.css" were found. at /Users/lyc/Desktop/tal/monkey-wukong-wap/node_modules/stylelint/lib/standalone.js:212:12 at processTicksAndRejections (internal/process/task_queues.js:97:5)解决方案：lint-staged stylelint增加--allow-empty-input "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint" ], "*.{less,vue}": [ "stylelint --allow-empty-input" ]}最终在 https://github.com/stylelint/... 找到解决方案，然而仍不是特地分明具体起因以及什么时候增加这个--allow-empty-input属性。

应用.stylelintignore增加疏忽文件校验，在lint-staged执行校验标准时，报错 ✖ stylelint --fix:Error: No files matching the pattern "/Users/lyc/Desktop/tal/monkey-wukong-wap/src/pages/reportActivity/assets/iconfont/iconfont.css" were found. at /Users/lyc/Desktop/tal/monkey-wukong-wap/node_modules/stylelint/lib/standalone.js:212:12 at processTicksAndRejections (internal/process/task_queues.js:97:5)解决方案：lint-staged stylelint增加--allow-empty-input "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint" ], "*.{less,vue}": [ "stylelint --allow-empty-input" ]}最终在 https://github.com/stylelint/... 找到解决方案，然而仍不是特地分明具体起因以及什么时候增加这个--allow-empty-input属性。

一个敌人的分享 秋招，有幸去字节面试了，顺便拿到了offer，把还记得货色写下来，供大家参考一下。一面css 如何实现垂直居中？position 有哪几种？别离说一下对应的成果和用法css 选择器优先级js 原型链，问了js 如何创建对象页面渲染和响应 式MVVM 和 MVC的区别Vue 生命周期，在哪个阶段能够获取页面 dom 信息Vue 的组件通信 ，聊到一些网络相干TCP 和 UDP 的区别TCP 的三次握手和四次挥手promise 有哪几种状态手写一个 promise算法题：最长公共前缀算法题：多层数组嵌套降级二面问我的项目的状况依据我的项目问了一点我的工作，接触前端有多久，在每个我的项目里学到了什么，没做项 目标时候学了什么，怎么学的这样的问题，而后开始就是实战写代码 css 实现给一个具体的需要写 html+css，需要大略是模块程度垂直居中对齐+不 定高，按文字自适应+带灰色遮罩+弹出动画 css 的动画怎么做flex 有哪些罕用标签position 的属性影响具体实现，给一个 ul 上面插入 100 个 li 应该怎么插入，如何优化 dom 操作具体实现：有一个有一百万个 url 的数组，如何从这一百万个 url 里取得资源算法：判断链表内是否存在环总体上字节的二面特地看重具体实现，会说思路不够，须要真正的写出能够实现 的代码来。个别算法就是 leetcode 的 easy/medium，不会太难，一些根本概 念也会挖的比拟深，总体上说还是很有难度。 三面之前都是先问根底，这次很难得的从一面就开始问我的项目了！ http 申请的几个常见办法说下 get 和 post 的区别get 和 post 的具体利用场景和一些注意事项线程和过程的区别说下跨域http 简略申请是什么意思浏览器缓存策略TCP 和 UDP 的区别理解流媒体对 UDP 稳定性的优化解决吗js 的根本数据类型哪些操作是异步的？promise 的一些基本概念async await 的一些用法js 继承的几种形式排序算法的工夫复杂度空间复杂度做个题，实现链表尾部插入新节点算法题：版本号判断四面大略问了一些我的项目相干问题，比方印象比拟深的技术点，怎么学习的和解决 的 balabalacss 的垂直居中和程度居中css 选择器优先级html 的 dom 树如何生成的小程序和 pc 页面有什么差别（因为我的项目里写了小程序）我的项目里的一些性能优化的点做个题，看代码是否能实现输入，如果不能就说下几个改的点（题太长了没记）代码实现：设计一个工作队列，有 on，trigger 和 off 办法，别离实现注册 事件触发回调，触发以后事件全副回调，和勾销以后事件的工作队列的性能hr 面看了我的投递记录发现我来字节面了这么屡次问我这几次有什么提高，学了什么字节的面试体验怎么样有没有考研的打算，为什么？介绍一下简历上的三个我的项目，为什么要选这三个我的项目进行展现？在我的项目中学到了哪些货色，有什么心得体会怎么学习前端的，怎么布局将来学习小组单干中的压力怎么应答的，如果要面对失败会怎么调节大略什么时候能够来，能够来实习多久？看了下面的面试题，上面也分享一些大佬搜集整理的前端面试题，下面的题目大多都有蕴含。PDF文档整顿有很多，篇幅起因就不都列举进去了。有须要能够私信哦！html1，浏览器存储的形式有哪些2，如何解决跨域的？3，浏览器 cookie 和 session 的意识。4，输出URL产生什么？5，浏览器渲染的步骤6，页面渲染优化7，强制缓存和协商缓存8，GET 和 POST 申请的区别9，HTTP1.0 / 1.1 / 2.0 及HTTPS10，介绍下304过程11，HTTP 状态码12，Web性能优化 ...

为什么 Vue3 抉择了 CSS 变量Vue 3 新增了一条实验性的性能——「单文件组件状态驱动的 CSS 变量」 看到这个，我脑子里有以下的疑难？ CSS 变量是什么？Sass/Less 中不是有变量的定义么，为什么还须要应用 CSS 变量？现有的 Vue 不是通过 :style 的形式定义去动静绑定 CSS，那 CSS 变量和这种形式有什么区别？Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的应用 CSS 变量以下对这些问题进行探讨 CSS 变量根底CSS 变量并不是某个框架的产物，而是 CSS 作者定义的一个标准规范 CSS 变量又称为 CSS 自定义属性，它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值（比方： --main-color: black;），由 var() 函数来获取值（比方： color:  var(--main-color);） 为什么抉择两根连词线（--）示意？ 因为变量 ? 被 Sass 用掉了，@ 被 Less 用掉了。为了不产生抵触，官网的 CSS 变量就改用两根连词线了 CSS 变量一个简略例子如下，CSS 变量根底演示地址 <div class="parent"> I am Parent <div class="child"> I am Child </div></div>.parent { /* 变量的作用域就是它所在的选择器的无效范畴，所以.parent 读取不到 child 中的变量 */ color: var(--body-child); /* 定义变量 */ --parent-color: blue;}.child { /* 通过 var 读取变量 */ color: var(--parent-color); --child-color: green;}后果展现 ...

切图仔，是大多数前端用来自嘲的称说。置信很多人平时写页面的时候，大部分工夫是在切图和排图，如此往返。这里并不是要否定切图自身，而是在质疑：始终切图到底对本人的功力增长有何益处？想想UI丢给你一套难看的界面，你却只需一个img标签，或者一个background-image属性即可搞定了它，但日后某个中央须要调整某些外观（色彩、文字等），你还不是会让UI再批改之前的素材，而后替换下来完事？这样就齐全受制于UI，而无奈施展本人的能动性。 那么，如何突破这个僵局？很简略，如果你CSS玩的够溜，你就无需再进行那干燥无比的切图工作，那些界面、元素都是通过你双手亲自缔造而成的，只管创作它们可能会花一些功夫，但带来的回报也是微小的，你不仅可能自在掌控你所发明进去的元素，而且能大幅提高本人的CSS功力。 在此之前在用纯CSS实现这些成果之前，笔者先介绍几个罕用的SCSS Mixin和一个得力武器，用它们来进行创作将会事倍功半 笼罩 - cover@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {  position: absolute;  top: $top;  left: $left;  width: $width;  height: $height;}复制代码 当你想在原先元素的根底上再“复制”一个元素，并将其笼罩在它身上时，你将会用到它 嵌入 - inset@mixin inset($inset: 0) {  position: absolute;  top: $inset;  left: $inset;  right: $inset;  bottom: $inset;}复制代码 同样地，这也是在原先元素根底上复制出一个元素，只不过这个元素地位和原先的元素雷同，大小会基于原先的元素而增减。 举个例子，假使你想创立多个半径不同的同心圆，这个Mixin将会很有帮忙 aqua.cssaqua.css是笔者开源的一个优雅的、轻量级的CSS框架。外面有很多罕用的组件以及罕用的款式类，用它来写CSS体验将会十分爽 在codepen上，笔者筹备了一个aqua.css模版，大家能够用它来进行CSS的创作 常见UI成果条纹成果 首先，咱们要抓住“边框”这个词，如何创作出一个非凡的边框呢？如果个别的CSS属性实现不了的话，能够思考用伪元素来实现，思路如下：在原先的元素下方创立一个有条纹背景的伪元素，并保障原先元素覆盖住它就行，这样就模仿了边框的成果。 那么如何创立条纹背景呢？这里咱们将应用repeating-linear-gradient来实现它 <div class="card w-80">  <div class="border-stripe rounded-xl">    Lorem ipsum...  </div></div>复制代码 .border-stripe {  --stripe-width: 0.5rem;  --stripe-deg: -45deg;  --stripe-color-1: var(--grey-color-1);  --stripe-offset-1: 2px;  --stripe-color-2: var(--skin-color-2);  --stripe-offset-2: 1rem;  --stripe-radius: 15px;  --stripe-inset: calc(var(--stripe-width) * -1);  &::before {    @include inset(var(--stripe-inset));    content: "";    z-index: -1;    background: repeating-linear-gradient(      var(--stripe-deg),      var(--stripe-color-1) 0 var(--stripe-offset-1),      var(--stripe-color-2) 0 var(--stripe-offset-2)    );    border-radius: var(--stripe-radius);  }}复制代码 ...

CSS简介CSS根底选择器CSS字体属性CSS文本属性CSS的引入形式CSS简介CSS是层叠样式表（Cascading Style Sheets）的简称。 作用： 用于HTML文档中元素的款式定义实现内容（html元素）与体现（css款式）的拆散实现代码的可重用性和可维护性CSS次要局部：选择器及一条或多条申明。 选择器用于指定CSS款式的HTML标签，花括号内是对该对象设置的的具体款式。属性和属性值以“键值对”的模式呈现。属性是对制订对象设置的款式属性，例如字体大小、文本色彩等。属性和属性之间用英文“:”离开。多个键值对之间用英文“;”进行辨别。CSS根底选择器CSS选择器作用：抉择标签 标签选择器用HTML标签名作为选择器，按标签名分类，为页面中的某一类标签指定对立的CSS款式。 类选择器为了差异化抉择不同的标签，独自选一个或某几个标签，能够应用类选择器。 id选择器款式#定义，构造id调用，只能用一次，他人勿应用款式点调用，构造类（class）调用，一个或多个，开发最罕用 通配符选择器应用“*”定义，示意选中所有元素（标签）。 CSS字体属性（1）罕用字体属性 （2）font复合属性 能够把以上文字款式综合来写，节约代码。 格局： font: font-style font-weight font-size/line-height font-family;比方： body{ font: normal 400 25px 'Microsoft yahei'; }应用font属性时，必须按下面语法格局中的程序写，不能更换程序，各个属性间以空格隔开。不须要设置的属性能够省略，但必须保留font-size和font-family属性，否则font属性将不起作用。CSS文本属性 CSS的引入形式（1）行内样式表（行内式） 在标签外部写个style属性，适宜批改简略的款式。 （2）外部样式表（嵌入式） 将所有的CSS代码抽取进去，独自放到一个<style></style>标签中。 <style> div { color: red; font-size: 12px; }</style><style></style>标签个别放在<head></head>标签里。 （3）内部样式表（链接式） 开发过程中，应用的最多的形式。 先独自写一个CSS款式文件，而后在HTML页面通过<link>标签援用 <link rel="stylesheet" href="css文件门路">

因为安卓手机无奈辨认border: 0.5px，因而咱们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。 原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale（.5）来进行放大一倍，这样就失去border为0.5的边框 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div{ width: 100%; height: 100px; border-top: 1px solid aqua; posititon:relative; } .div::after{ content: ''; position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 200%; height: 1px; transform: scale(.5); transform-origin: 0 0; pointer-events: none; background-color: aqua; } </style></head><body> <div class="div"></div></body></html>Copy to clipboardErrorCopied成果展现：

pornhub是黑金，和一些现代扇面一样难看tiktok是黑粉，有一种迷幻金属的感觉intellij是黑蓝，稳重和沉迷式的体验@code https://github.com/ui-javascr...Pornhub-前端技术 Unofficial-Pornhub-Vuejs-Skin仅作为简略示例不会长期保护upvs-配色计划$white: #fff !default;$black: #080002 !default;$orange:#fe9900 !default;$gray-dark:#2f2f2f !default;$gray-light:#aeaeae !default;$gray-100: #f8f9fa !default;$gray-200: #e9ecef !default;$gray-300: #dee2e6 !default;$gray-400: #ced4da !default;$gray-500: #adb5bd !default;$gray-600: #6c757d !default;$gray-700: #495057 !default;$gray-800: #343a40 !default;$gray-900: #212529 !default;$black: #000 !default;$blue: #0d6efd !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #d63384 !default;$red: #de1c31 !default;$orange: #fd7e14 !default;$yellow: #fadb14 !default;$green: #8cc269 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $orange !default;$secondary: $gray-dark !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;upvs-组件列表Model ...

实现的事bananer图的设置：背景图片的设置，背景的模糊化和其余成果页首页脚固定，两头内容滑动的布局。overflow-y的应用竖杠，横杠的管制利用float布局图文混排flex布局的应用。flex语法大体理解了下css代码标准css编码标准解决的问题以前始终认为只有块级元素能力应用盒子模型，其履行内元素也能够，能够用来画竖杠，垂直居中等等。两头页面无奈滑动的问题，是因为两头页面未独立于固定定位的页面，使固定定位的元素笼罩了其内容，无奈呈现滚动条。能够思考应用绝对定位使两头内容独立进去缩放扩大页面，页面小于内容，内容溢出，页面过大，显示页面不再扩张，能够思考给父容器应用min-width和设置width：100%仍有的困惑flex布局仍未理解透彻，flex:1,inline-flex只知其一;不知其二，思考在当前的学习中一直提高认识。rem是怎么实现自适应的，rem是绝对根元素字体大小的单位，根元素字体大小能够随页面自适应吗？vw,vh的利用有些麻烦nginx网页能够通过电脑拜访，但不能通过手机拜访了，以前还行开发步骤html骨架构建，header main footerhtml细节构建，思考各元素的地位，是否垂直/程度居中，横杠竖杠，思考用什么标签实现，还是套个父容器。该当优先思考带有语义化的标签，class命名也也要易懂，业余。css整体构建，去除元素自带的款式，设置好根元素的字体大小，css细节构建 理解浮动的影响，浮动有利于图文混排，然而会毁坏文档流理解定位的作用，劣势大于浮动，不会毁坏文档流，能够笼罩或被笼罩在元素上。定位次要是地位间隔不太好管制。理解flex布局，flex布局有利于弹性变动，有利于一行排列，毛病暂且没发现

说起 CSS 命名标准，大家应该都很相熟，或者应该据说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名办法，旨在帮忙开发人员创立更好的且构造统一的 CSS 模块。 BEM 将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。 块（Block）：一个块是视觉上或者语义上的一个整体，它是一个具体且惟一的一个元素，例如，页面上的一个弹窗，或者是一个搜寻框；元素（Element）：个别认为是块的组成部分，元素比拟用它父级的块名称做为前缀，例如，弹窗的题目、敞开按钮、确认按钮；修饰符（Modifier）：修饰符示意一个具体元素的特定状态，例如，敞开按钮在鼠标没放上去和放上去的时候，出现的两种状态。当初用 Bootstrap 的弹窗组件，举一个更加具体的例子： 鼠标放上去和没放上去的状态是有区别的。 通过下面的示例能够看出，块与元素是通过两个下划线（__）连贯的，而元素和修饰符之间是通过两个短横线（--）连贯的。 当然，明天的文章不会着重介绍什么是 BEM，如果你之前没接触过 BEM 能够尝试去理解一下，并且多在在我的项目中试用几次，感触他的魅力。另外，当初网上曾经有十分多的文章在介绍 BEM 了，急躁找，必定能找到优良的教程的。明天的文章会分享比拟少人介绍的两种 CSS 方法论：SUIT CSS 和 SMACSS。 SUIT CSSSUIT CSS是一种基于组件开发的 CSS 的方法论，它将类名分为两种类型：工具类和组件类。 工具类CSS 中有很多固定工具类，比方：左右浮动、文本截断、垂直居中……。工具类的作用是帮忙程序缩小一些反复代码，并提供统一的实现。 命名规定：u-[sm-|md-|lg-]<工具类名>。工具类应用 u- 打头，前面接类名（类名应用驼峰的形式命名），两头能够加上 sm、md、lg 这种响应式的规定。 组件类组件类用来形容一个个具体的组件，组件是形成一个具体应用程序的基石，所以组件的设计特地重要。 命名规定：[<命名空间>-]<组件名>[-后辈名][--修饰符]，这样的命名形式，在编写 HTML 和 CSS 的时候有几个益处： 有助于辨别组件的根元素，后辈元素，以及用来润饰的类；降级类名反复的几率；可能让类名更具备语义化；上面来看看命名规定的各个局部的具体作用： 命名空间（可选）命名空间是可选的，如果你心愿防止本人定义的组件类名与引入的第三方款式类名发生冲突，则能够为本人的类名加上命名空间。然而，如果你们业务中不存在第三方的款式，则能够不带命名空间。 .sfq-Modal{} / 我的弹窗组件 /.sfq-Button {} / 我的按钮组件 /复制代码 组件名组件名应用大驼峰规定（首字母大写的驼峰规定，Pascal Case）来命名，应用这种形式也能够尽可能的避免出现同名款式的抵触。 .Modal {}复制代码 <div class="Modal">  …</div>复制代码 ...

前言在 Java 语言开发中，可能大多数程序员遇到最多的异样就是 NullPointException 空指针异样了。这个当初语言的开发者“仅仅因为这样实现起来更容易”而容许空援用所带来的代价是十分惨痛的。而咱们开发者不得不应用多重 if 嵌套判断来躲避 NPE 或者通过多个 if 联合 return 语句来终止程序。且看一个例子 如果须要解决上面的嵌套对象，这是一个用于汽车、汽车保险的客户。 public class Person { private Car car; public Car getCar() { return car; }}public class Car { private Insurance insurance; public Insurance getInsurance() { return insurance; }}public class Insurance { private String name; public String getName() { return name; }} 那么上面的代码会存在怎么的问题呢？ public String getCarInsuranceNames(Person person) { return person.getCar().getInsurance().getName();} 没错，当这个人没有车 / 他的车没有上保险时，代码会抛出 NPE。或者说这个人根本就是 null，也会间接抛出异样。咱们常见的作法就是在每次 get 办法之后，进行 if 判断，减少代码的健壮性。可是这样代码会显得非常臃肿。Java 语言的开发者们也在关注着这些问题。因而在 Java8 提供了新的 API：java.util.Optional 用来优雅的解决 null。接下来就请读者和我一起揭开 Optional 神秘的面纱吧！ ...

起源：https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/用户喜爱疾速的网络应用，他们心愿页面加载速度快，性能晦涩。如果在滚动时有破损的动画或滞后，用户很有可能会来到你的网站。作为一名开发者，你能够做很多事件来改善用户体验。本文将重点介绍4个能够用来进步页面渲染速度的CSS技巧。 1. Content-visibility一般来说，大多数Web利用都有简单的UI元素，它的扩大范畴超出了用户在浏览器视图中看到的内容。在这种状况下，咱们能够应用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染工夫。 这个性能是最新减少的性能之一，也是对进步渲染性能影响最大的性能之一。尽管 content-visibility 承受几个值，但咱们能够在元素上应用 content-visibility: auto; 来取得间接的性能晋升。 让咱们考虑一下上面的页面，其中蕴含许多不同信息的卡片。尽管大概有12张卡适宜屏幕，但列表中大概有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面。 下一步，您能够向所有卡增加 content-visibility 。 在这个例子中，在页面中退出 content-visibility 后，渲染工夫降落到150ms，这是6倍以上的性能晋升。 正如你所看到的，内容可见性是相当弱小的，对进步页面渲染工夫十分有用。依据咱们目前所探讨的货色，你肯定是把它当成了页面渲染的银弹。 content-visibility 的限度然而，有几个畛域的内容可视性不佳。我想强调两点，供大家参考。 此性能仍处于试验阶段。截至目前，Firefox（PC和Android版本）、IE（我认为他们没有打算在IE中增加这个性能）和，Safari（Mac和iOS）不反对内容可见性。与滚动条行为无关的问题。因为元素的初始渲染高度为0px，每当你向下滚动时，这些元素就会进入屏幕。理论内容会被渲染，元素的高度也会相应更新。这将使滚动条的行为以一种非预期的形式进行。 为了解决滚动条的问题，你能够应用另一个叫做 contain-intrinsic-size 的 CSS 属性。它指定了一个元素的天然大小，因而，元素将以给定的高度而不是0px出现。 .element{ content-visibility: auto; contain-intrinsic-size: 200px;}然而，在试验时，我留神到，即便应用 conta-intrinsic-size，如果咱们有大量的元素， content-visibility 设置为 auto ，你依然会有较小的滚动条问题。 因而，我的倡议是布局你的布局，将其分解成几个局部，而后在这些局部上应用内容可见性，以取得更好的滚动条行为。 2. Will-change 属性浏览器上的动画并不是一件新鲜事。通常状况下，这些动画是和其余元素一起定期渲染的。不过，当初浏览器能够应用GPU来优化其中的一些动画操作。 通过will-change CSS属性，咱们能够表明元素将批改特定的属性，让浏览器当时进行必要的优化。上面产生的事件是，浏览器将为该元素创立一个独自的层。之后，它将该元素的渲染与其余优化一起委托给GPU。这将使动画更加晦涩，因为GPU减速接管了动画的渲染。 思考以下CSS类： // In stylesheet.animating-element { will-change: opacity;}// In HTML<div class="animating-elememt"> Animating Child elements</div>当在浏览器中渲染上述片段时，它将辨认 will-change 属性并优化将来与不透明度相干的变动。 依据Maximillian Laumeister所做的性能基准，能够看到他通过这个单行的扭转取得了超过120FPS的渲染速度，而最后的渲染速度大略在50FPS。 什么时候不是用will-change尽管 will-change 的目标是为了进步性能，但如果你滥用它，它也会升高Web利用的性能。 应用 will-change 示意该元素在将来会发生变化。因而，如果你试图将 will-change 和动画同时应用，它将不会给你带来优化。因而，倡议在父元素上应用 will-change ，在子元素上应用动画。 ...

CSS 编码标准尽管本文档是针对CSS设计的，然而在应用各种CSS的预编译器(如less、sass、stylus等)时，实用的局部也应尽量遵循本文档的约定。 命名标准文件命名在我的项目中对立将css抽离成独自文件，应用style.scss命名，并引入到界面中 ├─xxxx │ ├─component.js │ └─index.vue │ └─style.scss 其余款式文件应用小写字母，复合词以 - 分隔; 例如 menu.css , sub-menu.css id 和类的命名类名对立应用小驼峰命名： camel-case,举荐应用 BEM 格局命名。 BEM链接： https://juejin.cn/post/687636... 模块-名 __ 元素-名 -- 润饰器-名 -- 润饰器-值 block-name__elem-name--mod-name--mod-val 劣势： 防止款式抵触减小名称长度进步可浏览性减少款式重用为id和类命名的时候要应用有意义或通用的名字（可参考开端附录）。例如： // 不举荐#aaa {}// 举荐#login {}// 通用.clearfix {}简写属性名字为了进步可读性，尽可能的应用简写属性。例如: /* 不举荐 */padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;/* 举荐 */padding: 0 1em 2em;通用回绝在元素上间接写style我的项目过来中有定义很多罕用的工具类如： margin-t-1x等，请尽可能减少应用。前期保护非常繁琐，容易呈现叠加style状况。 /* 不举荐 */ <div style="color:red;margin-left:4px"> </div> <div class="bold-title margin-t-1x margin-b-1x"> </div>选择器如无必要，不得为 id、class 选择器增加类型选择器进行限定。在性能和维护性上，都有肯定的影响。例如： ...

position定位 position:absolute;相对定位，容易脱离文本流，不占用空间 position:relative;绝对定位，不脱离文本流，占用空间display:none和visibility:hidden的区别共同点：都能够暗藏元素不同点：display:none不占据文档的空间；visibility:hidden占用文本空间v-show和v-if的区别相同点：都能够暗藏元素不同点：v-show占用空间，v-if不占用空间注：如果要频繁切换某节点,使⽤v-show行内元素、块级元素以及空元素行内元素span, a ,b(加粗),i/em/var/cite/dfn/address(斜体),u(下划线),strong(粗体),s/strike(删除线),big,small,sub(下标),sup(上标),font块级元素（独占一行）p,div,ol,ul,br,table,dl,h1-h6,li空元素（没有内容的html元素）br,meta,hr,link,input,imgcss优先级!important>id选择器>class选择器>标签选择器 选择器品种id选择器：#myId类(class)选择器：.myClassName标签选择器：div,p,h1相邻（兄弟）选择器：h1+p子选择器： ul>li后辈选择器：li a通配符选择器：*属性选择器：a[ref="external"]伪类选择器：a:hover,li:nth-child,div:afterdiv文本超出显示省略符//单行限度overflow:hidden;text-overflow:ellipsis;white-space:nowrap;//多行限度display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;//长文本换行word-break:break-all;css三种援用形式行间款式：通过style属性将款式写在标签中外部款式：写在本页面内部款式：独自写在一个页面被援用