Css3 | 乐趣区

关于css3:Flutter-开发从-0-到-1七-iPhone-真机调试

Flutter 开发最大的劣势是跨平台，利用 996 下班时间我写了简略的 Flutter 利用，想着怎么运行我的 iPhone 8 下来，理解晓得运行真机须要有苹果开发者，注册苹果开发者须要 99 刀/年，我…… 为了试水，花几百大洋？我不想。如果 Flutter 不能跨平台，用 Flutter 开发那毫无意义，原生开发不香吗。是真的没方法吗？答案：有。 step0 注册苹果开发者首先还是要成为苹果开发者，收费开发者就行！ step1 装置必要插件运行flutter doctor查看是否短少必要插件，次要看 iOS 局部，全部打勾了就肯定能行。 wuxiaolong@WuXiaolongs-MacBook-Pro flutter_andblog % flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel master, 1.24.0-8.0.pre.147, on macOS 11.0.1 20B29 darwin-x64, locale zh-Hans-CN)[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses[✓] Xcode - develop for iOS and macOS (Xcode 12.2)[✓] Chrome - develop for the web[✓] Android Studio (version 4.1)[✓] IntelliJ IDEA Ultimate Edition (version 2017.3.5)[✓] Connected device (4 available) ! Doctor found issues in 1 category.step2 连贯手机将 iPhone 连贯到电脑，Android Studio 下面会显示你的真机，抉择你的真机设备，筹备运行。 step3 Xcode 配置在 Flutter 我的项目点击 ios > Runner 文件夹下的任意文件，点击“Open iOS module in Xcode”，关上 Xcode。在 target 设置页面 Signing&Capabilities 登录开发者账号。 step4 运行程序Xcode 配置结束之后，回到 Android Studio，运行你的程序。稍后，就能够在手机里看到你的游戏利用了。 step5 增加证书验证运行结束，兴高采烈关上www.sangpi.com利用，提醒要手动给利用的证书受权，到设置-》通用-》设施治理，外面验证你的利用，信赖了之后不必再受权。 step6 谬误Could not run build/ios/iphoneos/Runner.app on 2060bf844.Try launching Xcode and selecting "Product > Run" to fix the problem: open ios/Runner.xcworkspace Error launching application on iPhone.再关上，提醒“In iOS 14+，debug mode Flutter apps can only be launched from Flutter tooling,IDEs with Flutter plugins or from Xcode.Alternatively,build in profile or release modes to enable launching from the home screen.”，意思要应用 Xcode，第一次运行就报了以上谬误，没在意，我点击了错误信息“ios/Runner.xcworkspace”，点击运行，握草，胜利了。 ...

关于css3:CSS单位

css单位1. px是什么：最罕用的单位，相对单位用法： .test-box{ font-size: 14px;}毛病：为固定值，一旦设置了就无奈因为适应页面大小而扭转 2. rem：是什么：是css3新增的绝对单位，指绝对于根元素的字体大小的单位用法： html{ font-size:14px}//在元素上中： .test-box{ font-size:2rem; }劣势：实现弱小的屏幕适配布局计算不便毛病： rem是绝对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要晓得他父元素的大小 3. em：是什么绝对单位，绝对于父元素。而rem是绝对于根元素。子元素字体大小的em是绝对于父元素字体大小。用法 <div class="test"> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p></div>.test { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black;}.test p { font-size: 0.5em; /* 20px */ width: 10em; /* 200px */ height: 10em;}.test span { font-size: 0.5em; width: 10em; height: 10em; border: solid 1px blue; display: block;}毛病： ...

关于css3:旋转霓虹灯

代码来自头条号"前端小智", 侵权删 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .loader{ position: relative; } span{ position: absolute; width: 40px; height: 40px; display: block; animation: animate 4s linear calc(-0.5s*var(--i)) infinite; /* 这个计算我始终没搞懂搞懂了在补充吧*/ background-color: #0f0; box-shadow: 0 0 10px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 120px #0f0, 0 0 160px #0f0; transform-origin: bottom; } @keyframes animate { 0%{ top: 0; left: 150px; transform: scaleY(1); filter: hue-rotate(0deg);/*给图像利用色相旋转 "angle"一值设定图像会被调整的色环角度值也不晓得色环是哪个*/ } 2%{ top: 0; left: 150px; transform: scaleY(0.5); /*这块是做出了弹性成果*/ } 10%{ top: 0; left: 80px; transform: scaleY(1); } 40%{ top: 0; left: -150px; } 60%{ top: -200px; left: -150px; } 85%{ top: -200px; left: 150px; } 100%{ top: 0; filter: hue-rotate(360deg); left: 150px; } } </style></head><body> <div class="loader"> <span style="--i:0"></span>  <span style="--i:1"></span> <span style="--i:2"></span> <span style="--i:3"></span> <span style="--i:4"></span> <span style="--i:5"></span> <span style="--i:6"></span> <span style="--i:7"></span> </div></body></html>

关于css3:css属性-overflow

overflow: 定义当一个元素的内容太大而无奈适应块级格式化上下文时候该怎么显示。它是 overflow-x 与 overflow-y 属性的简写。值visible【默认值】内容不会被修剪，溢出会出现在元素框之外。hidden溢出内容被剪裁，不可见，不提供滚动条。scroll溢出内容被剪裁，浏览器显示滚动条查看溢出内容。auto如果内容不溢出，不显示滚动条；如果内容溢出，相似于 scroll, 显示滚动条查看溢出内容；除visible(默认值)以外的值，都会创立一个新的块级格式化上下文；为使overflow 有成果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。语法从值中选出一个或两个关键字来指定overflow 属性: overflow: overflow-x overflow-y；如果设置一个关键字，overflow-x和overflow-y设置为雷同的值。也可独自对overflow-x和overflow-y设置值。 overflow-x: scroll;overflow-y: hidden;/* On Firefox 61 and 62, this is the same as */overflow: hidden scroll;/* But on Firefox 63 and later, it will be */overflow: scroll hidden;设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。理论问题y轴溢出滚动条，x轴溢出显示原本认为 overflow-y: auto;就能够解决，理论 x 轴溢出内容不显示；而后批改为 overflow-y: auto; overflow-x: visible;或 overflow: visible auto , 让 x 轴溢出之后不剪切也不呈现滚动条，理论后果还是 x 轴溢出内容不显示。起因一个轴为visible，另一个轴为不同的值，会导致设置visible的轴的行为变成auto。

关于css3:Sass学习笔记

Sass (英文全称：Syntactically Awesome Stylesheets)-语法棒极的样式表！官网文档：https://sass.bootcss.com/docu...中文文档 https://www.sass.hk/ 为什么应用 Sass?css语法不够弱小，反复编写css代码无奈复用css代码保护不不便sass新增款式复用机制sass新增变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports)等等个性Sass怎么运行?应用Sass预处理器能够把sass转化为cssSass 的装置?NPM 装置 npm install -g sassWindows 上装置 choco install sassMac OS X (Homebrew)装置 brew install sass/sass/sass罕用Sass 的命令?1.$变量申明及援用 $highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}留神：变量名用中划线还是下划线分隔是一样的2.嵌套 #content { article { h1 { color: #333 } p { margin-bottom: 1.4em; border: { style: solid; width: 1px; color: #ccc; } } a { color: blue; &:hover { color: red } } } aside { background-color: #EEE } h1, h2, h3 {margin-bottom: .8em} div { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } }}3.导入 ...

关于css3:CSS3-nthchild-选择器-卡片布局的应用

某些卡片布局时有时为了让元素不超出外框，管制最初一列，最初一行如图： .operate-wrap { font-size: 0; width: 140px; border: 2px #444 solid; .item { font-size: 12px; width: 30px; display: inline-block; padding: 0; margin: 0 10px 5px 0; border: 5px #97ae6a solid; &:nth-child(3n) { border: 5px blue solid; margin-right: 0; background-color: #ff0000; } &:nth-last-child(-n+3) { margin-bottom: 0; background-color: #fff000; } <div class="operate-wrap"> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div>

关于css3:从-CSS-开始学习数据可视化

一图胜千言可视化畛域是目前（泛）前端中最炽热的分支之一。无论是面向普通用户的可视化大屏展现数据信息，还是企业服务中数据统计概览或者调度服务，乃至于国家鼎力推动的智慧建设（智慧大脑，智慧城市）等我的项目，都重度应用了数据可视化技术。以下图片来自于前端搞可视化菜鸟体验体验技术其歌的分享《如何交融数据可视化与物理世界》。咱们能够看到：可视化联合硬件也有很大的用武之地。可视化是什么当然，我已经一度认为可视化就是绘制各种图表，学习可视化就是学习 echarts, D3 等库，而后利用这些工具绘制饼图、折线图、柱状图这类图表。然而，大部分状况下，咱们是能够借助这些库来进行可视化我的项目的开发。但这些库是通用的解决方案。特定条件下，如在短时间内同时渲染大量元素，通用的解决方案就无奈应用，此时咱们就须要抉择更加底层的计划（如利用 WebGL 自行管制 GPU 渲染图像）。可视化的源头是数据。咱们须要拿到有用的数据，而后通过转化以及整合数据生成用户所须要的构造，最终以图形的形式展示进去。可视化肯定是与以后业务高度联合的。可视化工程师须要依据以后的业务以及产品需要，抉择适合以后业务的技术栈并生成对用户有用的图像。可视化的目标是晋升用户对数据的认知能力，解放用户的大脑，从而让数据更有价值。用 css 做数据可视化通常来说，SVG 易于交互，Canvas2D 性能更好。基本上会依据以后交互和计算量来确定应用 SVG 或者 Canvas 。如果遇到大量像素计算，甚至还须要通过 WebGL 深刻 GPU 编程(自行管制 CPU 并行计算) 。但如果咱们做官网首页的图表呢？如果以后的图表很简略，不须要变动呢？咱们还须要引入 ECharts 这种库？或者说手动写一个图表。实际上，随着浏览器的倒退，CSS 的体现能力愈发弱小，齐全能够实现惯例的图表。如柱状图和饼图等。应用网格布局（Grid Layout）加上线性突变（Linear-gradient）能够间接生成柱状图。 <style>.bargraph { margin: 0 auto; display: grid; width: 250px; height: 200px; padding: 10px; transform: scaleY(3); grid-template-columns: repeat(5, 20%);}.bargraph div { margin: 0 5px;}.bargraph div:nth-child(1) { /** 从上到下(to bottom 默认，可不写)，75% 全透明， 25% 红色， **/ background: linear-gradient(to bottom, transparent 75%, red 0);}.bargraph div:nth-child(2) { background: linear-gradient(transparent 74%, yellow 0);}.bargraph div:nth-child(3) { background: linear-gradient(transparent 60%, blue 0);}.bargraph div:nth-child(4) { background: linear-gradient(transparent 55%, green 0);}.bargraph div:nth-child(5) { /** 也能够多种色彩突变 **/ background: linear-gradient(transparent 32%, #37c 0, #37c 63%, #3c7 0);}</style><body> <div class="bargraph"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> ...

关于css3:CSS实现动画真的性能更好么由页面动画卡顿引发的思考

最近在优化页面动画成果时，和共事探讨到了页面动画卡顿的问题，即便大抵理解CSS实现的动画会比JS性能更佳，卡顿更少，然而始终没有深究这样的问题原理是什么。这次在优化过程中，发现即便应用CSS动画，然而在应用height，width，margin，padding作为transition的值的时候，仍然会卡顿，然而应用CSS transform就会有显著的改善。问题相似就不赘述了，在参考中附一个相似的问题。这里次要讲一讲CSS到底哪些动画成果帧数高，性能好，背地的原理到底又是什么。 CSS 和 JS 怎么实现页面动画？CSS和JS都能够实现一些网页的动画成果，比方CSS transitions/animations 和 JavaScript-based animations (using requestAnimationFrame()) CSS transitions 和 animationsCSS transitions 提供了一种简略的形式在现有款式和最终CSS状态之间实现动画成果。即便元素依然在变动过程中，新的transition会从当初的款式开始变动而不是间接跳到完结时的CSS状态。 CSS animations容许开发者在一系列开始值和终止值之间设定动画，它蕴含两个局部，一种形容CSS animation的款式，以及定义多个关键帧以及每个关键帧中元素的属性值 requestAnimationFramerequestAnimationFrame通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。和CSS transitions 和 animations一样，requestAnimationFrame()在以后Tab被push到后盾时，也会暂停。 CSS真的比JS实现的动画快么？先说论断，不是的。在大多数状况下，其实CSS和JS实现的动画性能其实都是差不太多的，甚至有些JS动画库声称他们的性能是要强过CSS原生动画的。这种状况之所以会产生，是因为CSS transitions/animations会在repaint事件产生前，在UI主过程中从新采集元素的款式。这和requestAnimationFrame() callback采纳的模式其实基本上一样。所以如果animations是产生在主过程中，其实性能上并没什么卵差异的。为啥CSS animations仍是更棒的抉择？CSS animations更棒的关键在于，只有咱们心愿设置动效的属性并没有触发reflow/repaint操作，咱们就能够将塑造元素的操作移除主过程。浏览器只须要一次生成这个元素的位图，并在动画开始的时候将它提交给GPU去解决，这就会显著晋升解决性能，尤其是在挪动设施上。之后，浏览器不须要再做任何布局、绘制以及提交位图的操作。从而，浏览器能够充分利用 GPU 的专长去疾速地将位图绘制在不同的地位、执行旋转或缩放解决。 Platform/GFX/OffMainThreadCompositing https://wiki.mozilla.org/Plat...这其中，最常见的用法就是 CSS transform 在 CSS triggers（https://csstriggers.com/）这张表里，咱们能够看到transform是不会在Layout和Paint层面作trigger的当然，也能够发现目前WebKit内核在CSS triggers上和Gecko内核依然是有区别的，这也就不排除IOS和Android设施在挪动端的动画性能上，同样的实现形式依然会有体验上的差异。参考： CSS and JavaScript animation performance https://developer.mozilla.org...CSS3动画卡顿性能优化解决方案 https://segmentfault.com/a/11...Using CSS transitions https://developer.mozilla.org...Using CSS animations https://developer.mozilla.org...

关于css3:HTML5CSS3总结学习三

一、意识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴：程度向右 -- 留神：x 轴左边是正值，右边是负值y 轴：垂直向下 -- 留神：y 轴上面是正值，下面是负值z 轴：垂直屏幕 -- 留神：往外边的是正值，往里面的是负值二、3D 转换3D 转换常识要点 3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D出现 transfrom-style3D 挪动 translate3d 3D 挪动就是在 2D 挪动的根底上多加了一个能够挪动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上挪动transform: translateY(100px)：仅仅是在 y 轴上挪动transform: translateZ(100px)：仅仅是在 z 轴上挪动transform: translate3d(x, y, z)：其中x、y、z 别离指要挪动的轴的方向的间隔留神：x, y, z 对应的值不能省略，不须要填写用 0 进行填充语法 transform: translate3d(x, y, z)代码演示 transform: translate3d(100px, 100px, 100px)/* 留神：x, y, z 对应的值不能省略，不须要填写用 0 进行填充 */transform: translate3d(100px, 100px, 0)三、透视 perspective知识点解说 ...

关于css3:HTML5CSS3总结学习二

一、rotate2d旋转指的是让元素在2维立体内顺时针旋转或者逆时针旋转应用步骤：给元素增加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}三角div { position: relative; width: 249px; height: 35px; border: 1px solid #000;}div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s;}/* 鼠标通过div 外面的三角旋转 */div:hover::after { transform: rotate(225deg);}二、设置元素旋转中心点(transform-origin)transform-origin 根底语法 transform-origin: x y;重要知识点留神前面的参数 x 和 y 用空格隔开x y 默认旋转的中心点是元素的核心 (50% 50%)，等价于 center center还能够给 x y 设置像素或者方位名词(top、bottom、left、right、center)旋转核心案例div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; /* 1.能够跟方位名词 */ /* transform-origin: left bottom; */ /* 2. 默认的是 50% 50% 等价于 center center */ /* 3. 能够是px 像素 */ transform-origin: 50px 50px;}div:hover { transform: rotate(360deg);}三、2D 转换之 scalescale 的作用 ...

关于css3:HTML5CSS3总结学习一

一、什么是 HTML5HTML5 的概念与定义定义：HTML5 定义了 HTML 规范的最新版本，是对 HTML 的第五次重大批改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、个性和属性领有一个弱小的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是狭义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容个性2D、3D动画、过渡CSS3 个性性能与集成HTML5 的现状绝对多数新的属性，都曾经被浏览器所反对，最新版本的浏览器曾经开始陆续反对最新的个性，总的来说：HTML5 曾经是大势所趋二、HTML5 新增标签什么是语义化新增了那些语义化标签 header --- 头部标签nav --- 导航标签article --- 内容标签section --- 块级标签aside --- 侧边栏标签footer --- 尾部标签应用语义化标签的留神语义化标签次要针对搜索引擎新标签能够应用一次或者屡次在 IE9 浏览器中，须要把语义化标签都转换为块级元素语义化标签，在挪动端反对比拟敌对，另外，HTML5 新增的了很多的语义化标签，随着课程深刻，还会学习到其余的三、多媒体音频标签多媒体标签有两个，别离是音频 -- audio视频 -- videoaudio 标签阐明能够在不应用标签的状况下，也可能原生的反对音频格式文件的播放，然而：播放格局是无限的audio 反对的音频格式 audio 目前反对三种格局 audio 的参数 5、audio 代码演示 <body>    <audio controls> <source src="./media/snow.mp3" type="audio/mpeg" /> </audio></body>四、多媒体视频标签video 视频标签 ...

关于css3:前端css-瀑布流实现

1. 瀑布流布局<!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>瀑布流布局</title> <style> .waterfall { width: 300px; column-count: 2; } .item { flex:none; } .item img{ width: 100%; } </style></head><body> <ul class="waterfall"> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> </ul></body></html>2. 解决column-count引起的内容割裂bug容器内加上款式 ...

关于css3:CSS-还能这样玩奇思妙想渐变的艺术

在之前的这篇文章 -- 一行 CSS 代码的魅力中，咱们介绍了一种应用一行 CSS 代码就可能生成的一种美好（兴许奇怪更适合）的背景。本文，将持续介绍背景的一些有意思的常识，利用一些极小的单位，只须要短短几行代码，就可能产生出美好而又有意思的背景成果~ 数量级对背景图形的影响本文的配角次要是：多重径向突变(repeating-radial-gradient)多重角向突变(repeating-conic-gradient)什么是数量级对背景图形呢？咱们来看这样一种有意思的景象：咱们应用 repeating-conic-gradient 多重角向突变实现一个图形，代码十分的简略，示意如下： <div></div>div { width: 100vw; height: 100vh; background: repeating-conic-gradient(#fff, #000, #fff 30deg);} 将 30deg 替换为 0.1deg而后，咱们用一个十分小的值去替换上述代码中的 30deg，相似于这样： { background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);}这是什么玩意？脑补一下，这行代码绘制进去的图形会是什么样子？看看成果： Wow，不堪设想。这里 0.1deg 十分要害，这里的角度越小（小于 1deg 为佳），图形越酷炫，也就是咱们说的数量级对背景图形的影响。 CodePen -- One Line CSS Pattern 借助 CSS @property 察看变动过程在之前，如果咱们间接写下述的过渡代码，是无奈失去补间过渡动画的，只会有逐帧动画： div{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); transition: background 1s;}div:hover { background: repeating-conic-gradient(#fff, #000, #fff 30deg);}只能失去这样的成果，起因在于 CSS 不反对对这种简单的突变进行间接的过渡动画： ...

关于css3:图集

关于css3:lessmodifyVars的用法

以下内容都是浏览器最终运行的代码，如果是react或者vue的必须是编译之后的文件html中须要有一些内容 <link rel="stylesheet/less" type="text/css" href="/color.less" /><script> window.less = { async: false, env: "production" //production development };</script><script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>这样在js中就能够间接批改变量了 $('#color-switch a').click(function() { var value = $(this).text(); less.modifyVars({'@my-color': value}); less.refreshStyles();//如同可有可无});下面那个color.less文件中必须有这个变量的定义和应用 @my-color:red;.mydiv{ color:@my-color;}如果less文件中没有这个变量的定义或者没有这个变量的应用，js切换是没有成果的

关于css3:解决使用鼠标禁用符号不显示红色禁用符号

通常状况下，应用 cursor: no-drop 或者 cursor: not-allowed。查了很多材料，说是主动会给设置为红色边框的禁用符号。起初本人做试验，发现都是灰白色的禁用图标，包含京东也是如此：如果想实现红色的图标应该怎么做呢？给 cursor 加上一个 url 的默认图片的参数。格局：cursor: url( 图片门路 ), auto;然而应用我本地的一个图片后，发现没有失效。起初持续查问：发现应用的图片的大小和分辨率是有限度的： In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms. 起初从新换了一张图片，之后就能够通过展现图片来代替鼠标了。不过一个限度就是此时只会显示图片，而没有鼠标的箭头了，目前最好的计划应该就是这个了。能够把图片替换为须要想要的任何形态和色彩的图片。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#limitations

关于css3:less青蛙与船的动图

原网址：https://codepen.io/jellynina/...我拿来改了一点点。应用了CSS的动画： <template><div> <div class="boat"> ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png) </div> ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png) </div></template><script> export default { name:'boat' }</script><style lang="less" scoped>/*** animation 封装*/// keyframes 封装 @prefix浏览器前缀 @name动画名称 @content动画内容执行函数.keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @content(); }}.keyframes (@prefix,@name,@content) { @prefix+'-keyframes' @name { @content(); }}.keyframes (@prefix,@name,@content) when (@prefix=all) { .keyframes(moz,@name,@content); .keyframes(o,@name,@content); .keyframes(webkit,@name,@content); .keyframes(def,@name,@content);}// animation 自定义动画// 1.背景挪动.keyframes(all,bg-move,{ 0% { background-position: 100% -560px; } 100% { background-position: -350% -460px; }});// 2.青蛙挪动.keyframes(all,mike-move,{ 100% { left: 12%; }});// 3.青蛙浮起来.keyframes(all,mike-float,{ 50% { transform: rotateZ(5deg) translateY(-5px); -moz-transform: rotateZ(5deg) translateY(-5px); -o-transform: rotateZ(5deg) translateY(-5px); -webkit-transform: rotateZ(5deg) translateY(-5px); }});// 4.小船挪动.keyframes(all,rock-boat,{ 50% { transform: rotate(-5deg) translateY(-10px); -moz-transform: rotate(-5deg) translateY(-10px); -o-transform: rotate(-5deg) translateY(-10px); -webkit-transform: rotate(-5deg) translateY(-10px); }});// 5.小船蒸汽.keyframes(all,steam-boat,{ 40%, 60% { opacity: .8; } 100% { transform: translate(-15%, -35%) rotateZ(20deg); -moz-transform: translate(-15%, -35%) rotateZ(20deg); -o-transform: translate(-15%, -35%) rotateZ(20deg); -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }});/* Animations 调用------------------------------------------ */// 挪动背景body { background: #F0FCFF url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png') repeat-x 100% -460px; background-size: auto; background-size: 780px; animation: bg-move 8s ease-out forwards; -moz-animation:bg-move 8s ease-out forwards; -o-animation:bg-move 8s ease-out forwards; -webkit-animation: bg-move 8s ease-out forwards;}// 船.boat { animation: rock-boat 3s ease-in-out infinite; -moz-animation: rock-boat 3s ease-in-out infinite; -o-animation: rock-boat 3s ease-in-out infinite; -webkit-animation: rock-boat 3s ease-in-out infinite;}// 船的烟，伪元素生成.boat::after { content: ""; animation: steam-boat 4s 2s infinite; -moz-animation: steam-boat 4s 2s infinite; -o-animation: steam-boat 4s 2s infinite; -webkit-animation: steam-boat 4s 2s infinite; display: block; width: 120px; height: 120px; background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat; background-size: auto; background-size: 120px; position: absolute; top: -25%; left: 5%; opacity: 0;}.mike { animation: mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -moz-animation:mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -o-animation:mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -webkit-animation: mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite;}</style> ...

关于css3:css内容不规则显示之shapeoutside与clippath

shape-outsideshape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框;shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。例如示例图片：想要实现该款式，咱们就须要用到shape-outside，首先咱们发明一个简略的html构造：<html><head> <style> body { background: #e0f6ff; } .wrapper { margin: 150px auto; width: 500px; height: 200px; background: aquamarine; } .left, .right { width: 20%; height: 100%; } .left { float: left; background: violet; } .right { float: right; background: coral; } </style></head><body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div></body></html>以上页面显示为：这时候咱们增加要显示的内容： <body> <div class="wrapper"> <div class="left"></div> <p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a> shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框; shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside 属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。 </p> <div class="right"></div> </div></body>发现，页面显示并不合乎咱们的预期，其实这是因为浮动造成的脱离文档规范流造成的。解决该问题咱们能够把p标签放到前面： <body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> <p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a> shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框; shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside 属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。 </p> </div></body>后果如图，合乎咱们的预期： ...

关于css3:css非第一个元素添加左边框

.name:not(:first-child)::before

关于css3:谈AK管理之基础篇-如何进行访问密钥的全生命周期管理

简介：咱们也常有据说例如AK被内部攻击者歹意获取，或者员工无心从github泄露的案例，最终导致安全事故或生产事变的产生。AK的利用场景极为宽泛，因而做好AK的治理和治理就尤为重要了。本文将通过两种AK应用不平安的典型案例，进行剖析和介绍。一、引言：对于企业上云的典型场景，云账号管理员个别会给员工、应用程序或零碎服务创立一个相应的用户账号。每个账号都能够有独立的身份认证密钥，俗称AK (AccessKey)，它用于阿里云服务API的身份认证。既然是身份证明，证实你是某个云账号的非法拥有者，那么一旦泄露结果着实重大。咱们也常有据说例如AK被内部攻击者歹意获取，或者员工无心从github泄露的案例，最终导致安全事故或生产事变的产生。AK的利用场景极为宽泛，因而做好AK的治理和治理就尤为重要了。本文将通过两种AK应用不平安的典型案例，进行剖析和介绍。二、拜访密钥误删，用户服务碰壁典型案例重现 2020年，某客户忽然发现自己的一些我的项目的用户APP上传数据呈现失败，这个上传数据性能应用了该云厂商上的某存储服务，客户发动工单认为云厂商的存储服务有故障。经排查发现该用户的Region其余业务方的生产流动失常，未呈现显著异样；遂狐疑网络问题，倡议客户查问网络连接，此时客户提交App端的谬误日志，日志中显示是拜访密钥没有找到，在云客服的领导下，并未发现有雷同ID的密钥存在，而后在操作审计的记录中，发现该拜访密钥是被其本人外部做了删除操作。紧急解决云产品倡议该客户对应用的拜访密钥马上替换，客户反馈APP上不好管制，特地iOS的app公布还要审核，周期太长；客户紧急发布公告，告诉其用户此性能临时不可用，待降级后复原。影响影响不言而喻，对很多初创企业这样的故障会轻则导致用户体验差，重则要害性能不可用，对企业留存客户或者支出都会受到不同水平的影响。剖析和总结这次故障次要是因为员工误删除AK导致，有的同学就会说，能不能有个相似垃圾站的性能，还能够回收？其实云厂商个别都会提供一个相似的性能叫激活/禁用，该当遵循“先禁用再删除”，以确保业务的失常继续；此外，AK删除导致服务端的故障，值得引起留神和自查的是，用户作为管控和服务端应用的不同场景，是不是做了严格的辨别？服务端应用和管控是否辨别开等？员工和线上零碎是否辨别开？App利用中硬编码拜访密钥，导致呈现透露时，替换老本很大，不能马上进行轮转替换实现业务止损；其实App类业务不适宜应用永恒AK密钥来拜访OpenAPI。此外，利用反编译，hack曾经是多发事件了，代码中寄存永恒密钥，泄露的危险微小！三、标准的拜访密钥生命周期治理操作，保障平安生产进行上述实在的案例不仅带给咱们微小的警示，那么针对拜访密钥到底在哪些环节进行标准操作？又该当通过什么方法进行管理控制呢？ 1 、创立：拜访密钥再次敲黑板，不举荐应用主账号的拜访密钥，起因很显著，主账号领有的资源和权限太大，泄露后的危险不堪设想；能够通过云厂商的访问控制等页面查看，有没有创立租户级别下的子用户，并理论应用的是这些子用户的拜访密钥。2 、配置：适合的权限每个不同的利用应用不同子用户的拜访密钥，这样能够做到利用级别资源和权限隔离；每个子用户的权限是不是满足了最小可用准则，不扩充不要的权限；能够在测试环境试着缩小权限，看看测试是不是能失常，不失常的话大概率这个权限是不能去除的；通过RAM拜访控制台查问，能够看到某一个用户所具备的权限Policy，以及Policy里具体的权限形容。3 、删除：拜访密钥拜访密钥的删除是不可复原的，所以删除是具备肯定危险的，只有在平安确认这把拜访密钥没有任何应用记录后，能力删除，规范的流程如下：首先把原来拜访密钥应用的中央替换为新的拜访密钥，而后监控须要删除的拜访密钥的最初应用工夫；依照本人业务的情况，确定老的拜访密钥的生效工夫，比方依据业务情况确定7天为平安工夫，即一把拜访密钥7天没有应用记录就能够尝试删除老的密钥；所以在平安工夫既要达到删除的成果，又要在呈现突发状况下把删除的拜访密钥找回，云厂商都会提供一组这样的操作禁用/激活，应用禁用代替删除操作，禁用操作能够达到和删除一样的成果，然而能够满足突发状况下拜访密钥的找回，即通过激活操作，把禁用的拜访密钥恢复过来，就如同提供了一个垃圾箱的性能；在拜访密钥进行禁用后，继续察看业务是否有异样，直到一个最终平安工夫，比方7天，如果没有任何老的拜访密钥的应用记录，就能够实在删除了。4、泄露：密钥轮转每个RAM用户最多能够创立两个拜访密钥。如果您的拜访密钥曾经应用3个月以上，建议您及时轮换拜访密钥，升高拜访密钥被泄露的危险。在须要轮转的时候，再创立第二个拜访密钥。在应用拜访密钥的所有应用程序或零碎中，更新正在应用的拜访密钥为新创建的第二个拜访密钥。阐明：能够在控制台的用户详情页的用户AccessKey列表中，查看拜访密钥的最初应用工夫，以此初步判断第二个拜访密钥是否曾经被应用，原来的拜访密钥是否曾经不必。 3 禁用原来的拜访密钥。 4 验证应用拜访密钥的所有应用程序或零碎是否失常运行。如果运行失常，阐明拜访密钥更新胜利，您能够释怀地删除原来的拜访密钥。如果运行异样，您须要临时激活原来的拜访密钥，而后反复步骤2~4的操作，直至更新胜利。5 删除原来的拜访密钥。 5 开发：防止密钥硬编码到代码零碎属性在零碎属性里寻找环境凭证，如果定义了 alibabacloud.accessKeyId 和alibabacloud.accessKeyIdSecret 零碎属性且不为空，程序将应用它们创立默认凭证。环境凭证在环境变量里寻找环境凭证，如果定义了ALIBABA_CLOUD_ACCESS_KEY_ID和ALIBABA_CLOUD_ACCESS_KEY_SECRET环境变量且不为空，程序将应用它们创立默认凭证。配置文件如果用户主目录存在默认文件~/.alibabacloud/credentials （Windows 为 C:UsersUSER_NAME.alibabacloudcredentials），程序会主动创立指定类型和名称的凭证。默认文件能够不存在，但解析谬误会抛出异样。配置名小写。不同的我的项目、工具之间能够共用这个配置文件，因为不在我的项目之内，也不会被意外提交到版本控制。能够通过定义ALIBABA_CLOUD_CREDENTIALS_FILE 环境变量批改默认文件的门路。不配置则应用默认配置 default，也能够设置环境变量 ALIBABA_CLOUD_PROFILE 应用配置。 [default] # 默认配置enable = true # 启用，没有该选项默认不启用type = access_key # 认证形式为 access_keyaccess_key_id = foo # Keyaccess_key_secret = bar # Secret [client1] # 命名为 `client1` 的配置type = ecs_ram_role # 认证形式为 ecs_ram_rolerole_name = EcsRamRoleTest # Role Name [client2] # 命名为 `client2` 的配置enable = false # 不启用type = ram_role_arn # 认证形式为 ram_role_arnregion_id = cn-test # 获取session用的regionpolicy = test # 选填指定权限access_key_id = fooaccess_key_secret = barrole_arn = role_arnrole_session_name = session_name # 选填 [client3] # 命名为 `client3` 的配置type = rsa_key_pair # 认证形式为 rsa_key_pairpublic_key_id = publicKeyId # Public Key IDprivate_key_file = /your/pk.pem # Private Key 文件6、审计：定期剖析拜访密钥应用行为 ...

关于css3:两行代码纯css实现条纹图案

在一些购衣网站往往能够通过搜寻“条纹”关键词搜寻到对应的条纹衫。然而条纹衫的上面有一个抉择条纹样式的选项，如下图是优衣库的一个抉择截图。通过F12能够看到他们的前端人员是间接粘一张图片下来。然而我集体感觉业余的前端开发工程师能不必图片就不要用，因为一来会减少http申请去申请资源,造成些许性能影响，另一方面万一资源服务器宕机了，会造成资源失落的景象，对用户体验不好。那么如何实现一个条纹状的DIV呢。可能很多人感觉要依赖于 <div> <div class="pink"></div> <div class="grey"></div> <div class="pink"></div></div>然而事实上不须要嵌套只用一个div就行了。 html:<div class="stripe"></div>.stripe{ width:400px; height:180px; background:linear-gradient(#cf6152 50%,#e9e1ea 0%); background-size:100% 60px; /*因为应用的是线性突变，他须要两个色彩互相对应，所以都是以一对的模式存在。*/}

关于css3:Cssmac浏览器滚动条自动隐藏问题

大部分状况下,mac中应用谷歌时自动隐藏滚动条还是很友善的，然而某些时刻，又显得有些不近人情。比方：我想在不提醒用户这里是能够滚动的状况下还让用户晓得这里有别的内容能够通过滚动来查看，这个时候mac的暗藏滚动条性能就是妨碍了。须要滚动的元素设置 overflow: auto; 如果设置了scroll，即便不须要滚动条也会显示进去。贴下一下代码解决这一问题 ::-webkit-scrollbar{ width: 5px; height: 5px;}::-webkit-scrollbar-thumb{ border-radius: 1em; background-color: rgba(50,50,50,.3);}::-webkit-scrollbar-track{ border-radius: 1em; background-color: rgba(50,50,50,.1);}

关于css3:在Vue中使用tailwindcss

tailwindcss一个很好的一个css插件，这里留神肯定要依照这个版本！不然会提醒报错第1步：创立Vuevue create tailwind 第2步：进入根目录cd tailwind 第3步：装置tailwindcnpm i tailwindcss@1.4.6 -S 第4步：装置配置文件会生成一个tailwind.config.jsnpx tailwind init --full 第5步：创立postcss.config.js和第四步的tailwind.config.js同级 const purgecss = require('@fullhuman/postcss-purgecss')({ content: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], // Include any special characters you're using in this regular expression defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ...process.env.NODE_ENV === 'production' ? [purgecss] : [] ] }第6步：创立CSS文件在assets外面创立一个任意css：比方tailwind.css而后粘贴内容 @tailwind base;@tailwind components;@tailwind utilities;第7步：全局引入在mail中全局引入 import "./assets/tailwind.css" 第8步：开始启动cnpm run serve 测试是否胜利 ...

关于css3:CSS选择器和权重计算

CSS选择器类选择器ID选择器标签名选择器子选择器(ul>li)通配符选择器(*)属性选择器(a[name="input"])伪类选择器(li:nth-child) 一个标签的款式渲染程序:id>class/伪类>标签选择器的权重计算:假如:id选择器的权重为100class/伪类的权重为10标签选择器的权重为1则:--#box => 100 .box => 10 .box:hover => 20 .box.box2 => 20 div => 1 div:hover => 11

关于css3:伪类和伪元素的区别

1）伪类用来抉择DOM树之外的信息,以及增加一些选择器的特殊效果,能够了解为是标签的一种状态,这个状态是非动态的,当元素达到一个特定状态时,会有一个伪类的款式,当状态扭转时,又会失去这个款式比方:hover,:active,:visited,:link,:focus,:first-child2)伪元素DOM树没有定义的虚构元素,须要创立通常不存在于文档中的元素,比方::before,::after将非凡的成果增加到选择器 3)区别css3中伪类应用单冒号示意,伪元素应用双冒号示意要害区别在于有没有伪元素,如果须要增加元素能力达到成果,则为伪元素,反之则是伪类伪类是基于一般DOM元素而产生的不同状态,是DOM元素的某一特色伪元素是创立在DOM树中不存在的形象对象,而且这些形象对象是能拜访到的

关于css3:网站SEO搜索引擎

网站SEO(搜索引擎)的工作原理搜索引擎的网站后盾有一个数据库,数据库中存储这很多关键词,每个关键词都对应很多个网址,这些网址被称为搜索引擎蜘蛛/网络爬虫，引擎蜘蛛会每天在互联网查找内容,下载链接内容进行剖析,找到其中关键字,如果蜘蛛认为关键词在数据库中没有并且对用户有用就会存到数据库,反之则会认为是垃圾信息,再去寻找新的信息。进步SEO的搜寻的查找1.语义化html标签2.图片加上alt3.搜索引擎抓取内容的程序是自上而下,所以把重要的内容放到HTML页面下面4.少用iframe,iframe抓不到5.页面尽量扁平化,层级不要太深6.管制页面大小,缩小http申请进步网站速度

关于css3:前端面试每日-31-第654天

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

关于css3:CSS百叶快速知识点

鼠标通过图片，全副显示创立a，将b全副横过去！而后b设置溢出暗藏，并且退出动画时帧速度为0.8这里的图300其实是为了自适应高度 <template> <div class="a"> <div class="b"><img src="1.jpg"></div> <div class="b"><img src="2.jpg"></div> <div class="b"><img src="3.jpg"></div> <div class="b"><img src="4.jpg"></div> <div class="b"><img src="5.jpg"></div> </div></template><style lang="less" scoped="scoped"> .a { display: flex; .b { overflow: hidden; transition: all 0.8s; img { width: 300px; } &:hover { flex:0 0 auto } } }</style>

关于css3:borderimage与borderradius不兼容你造吗

本贴分享歌曲：追梦人 - 阿木 > 让青春吹动了你的长发让它牵引你的梦> 人不知;鬼不觉这红尘的历史已记取了你的笑容> 红红心中蓝蓝的天是个生命的开始> 春雨不眠隔夜的你曾空独眠的日子> 让青春娇艳的花朵绽开了深藏的红颜> 飞去飞来的满天的飞絮是空想你的笑脸> 秋来春去红尘中谁在宿命里安顿> 冰雪不语寒夜的你那难暗藏的光采> 看我看一眼吧莫让红颜守空枕> 青春无悔不死永远的爱人> 让漂泊的脚印在荒漠里写下永恒的回顾> 飘去飘来的笔迹是深藏的激情你的心语> 前尘红世轮回中谁在宿命里彷徨> 薄情笑我凡俗的人间终难解的关心> 看我看一眼吧莫让红颜守空枕> 青春无悔不死永远的爱人> 让青春吹动了你的长发让它牵引你的梦> 人不知;鬼不觉这红尘的历史已记取了你的笑容> 红红心中蓝蓝的天是个生命的开始> 春雨不眠隔夜的你曾空独眠的日子哈哈哈，切实是忍不住想分享最近循环听的这首老歌，歌词写的切实是太美了，所以更没忍住全都copy至上。也真是想不到唱“有一种爱叫做离别”的嗓音唱这首老歌也是那么好听，对我胃口！想当初听他那首火爆歌曲的时候，我刚读初一，过后只听过那首歌曲。现在，弹指一挥间已过十四年，才发现听的“追梦人”正是他当初的同张专辑。好啦，跑题至此为止吧！开始记录最近遇到的问题。 border-image 不兼容 border-radius最近我的项目遇到的一个问题就是实现如下设计师提供的效果图-选中按钮时圆变径向圆，可是依据设计图提供的代码死活都无奈实现成果，圆角属性 border-radius 不起作用变成了径向方块了。设计稿：依据设计稿，boder-image与border-radius一起应用的成果如下: 对啊，我过后也在想那个效果图是个什么鬼，问题困扰我这个菜鸟几天了，也只有周末有这个工夫来解决它。计划如下：给原先增加上述属性的标签 van-radio__icon--checked 再增加一个子块级标签 activeIcon 原标签（现在的父级标签）：将 border-image 改写成 background-image，值不变；增加内边距 padding；子标签：代码如下 .van-radio__icon--checked { box-sizing: border-box; padding: .08rem; border-radius: 50%; background-image: linear-gradient(to bottom, #efcea6, #dab591); .activeIcon { width: 100%; height: 100%; border-radius: 50%; background: #2f2f34; } } 复制代码最终效果图： ...

关于css3:如何做好技术-Team-Leader

简介：作为一个技术TL（Team Leader），除了本身技能，还会面临诸多团队治理上的艰难和挑战。如何定义和明确团队的指标？怎么建设优良的工程文化？让团队长期施展战斗力和创新能力的外围是什么？本文作者基于四年的团队治理教训，分享他在招聘、指标治理、团队沟通和工程文化等方面的思考与总结，介绍相干的教训办法，并举荐几本对于体验、思考的书籍。心愿对同学们有所启发。曾子曰：吾日三省吾身，反思是人类进化进去的一项异样贵重的能力。我在阿里带团队也有四年多的工夫，有必要总结一下此间得失；另外，前几天和一个刚开始带团队的同学聊天，他感觉角色转变对于他有不小的挑战，因而我想做一点不算成熟的总结并分享进去。当然，此文第一不代表我必然是一个如许成熟的管理者；第二不代表我的总结放之四海而皆准（事实上很多人的治理形式和我推崇的办法是反的，然而如果从某些角度评估，这些人更胜利）；第三我并无雄心壮志解答所有问题。总结仅仅是冀望通过反思，帮忙本人成为更好的管理者，而分享是心愿可能多多少少帮忙到其余的管理者。本文会重点讲述我对招聘、指标治理、团队沟通和工程文化的了解。筛选这几个主题讲述，次要是因为在带团队的这一段时间内，我认为这几个因素是团队长期施展战斗力和创新能力的外围。失去这个意识对我来说并不容易，市面上有纷繁复杂的书籍（机场书店尤其多）尝试通知你什么叫领导力，公司也有相干的培训介绍，四周也有很多 TL 用每日的言行通知你他们是怎么做的。然而我认为这些来自四周的常识，很多是有效的，有更多是谬误的。例如有 TL 每天在办公室坐到中午上班，给团队微小的加班压力，外表看起来是奋斗，实际上会让大家趋向于更多关注工作时长，从而升高对了对工作价值的思考；又有一些例子是，当团队同学犯错后，把故障和绩效强关联，在我看来这不仅无助于大家深刻思考零碎健壮性，更是激励推责，扼杀翻新；更常见的例子可能是 TL 积极向上汇报，承诺超出团队负责的交付能力，导致团队齐全忽视工程师文化，长此以往优良的人才逐步散失，团队整体研发能力实则越来越弱。很多事件是知易行难的，技术 TL 实际更是这样，之后一直学习，执行，反思，能力缓缓做得更好。如果我团队的同学在来到这个团队五年或者十年后，回想起这段时间，会感叹：“咱们过后的团队多好啊，大家一起做了很多有意思的事件。” 那我这个技术 TL 的工作，就算做的杰出了。一招聘招聘的第一准则是宁缺毋滥。这么说进去大家都会认同，然而理论执行往往会因为短期压力而变形，尤其是招聘越来越难，好不容易面到一个看起来差不多的同学，难免会心田有点小歪斜，算了，先招进来了。这其实是十分危险的，因为一旦招聘了谬误的人，对于 TL 须要消耗的治理工夫会成倍增加，这些工夫原本能够用来做更重要的工夫。更危险的是，谬误的人可能会对团队整体产生负面的影响，例如须要其他人一直地补位，或者和人一直争吵，耗费大家的精力。因而招聘肯定是要严格要求的，如何面试我就不具体讲了，通常我会关注以下一些方面，基本上是缺一不可： coding 能力对技术的激情能简明扼要地沟通踊跃乐观对团队指标的认同招聘是个长期的事件，如果仅仅是在有名额的窗口去找人，通常是十分艰难的。遇到适合的人，我会长期和他放弃沟通，理解对方工作的状态，这其实也是一个一直建设信赖的关系。当机会适合的时候，对方必定会优先思考你。当候选人抉择机会的时候，团队的 TL 是个怎么的人必定是他重点思考的因素之一。因而 TL 肯定要做技术发声，不论是开源我的项目的参加，撰写技术文章，还是在技术大会做演讲，都是充分体现 TL 集体技术能力，技术思考，以及集体特质的重要机会。二指标团队之所以为团队，是因为这些人有独特的指标，如果没有独特指标，这些人就是散兵游勇，不可能互相协同，无奈成就微小价值。而团队的指标，次要还是由 TL 去负责定义和明确的。近期比拟风行谈 OKR（Objectives and Key Results，指标与要害成绩法），我认为这就是一种协同团队聚焦指标的办法。定方向 O（Objective），定数字指标 KR（Key Result），就是冀望团队可能凝聚在一起，朝独特的方向致力，相互理解和反对。量化的指标（KR）用来领导方向，裸露问题。我比拟拥护用 KR 或者其余量化指标来简略粗犷地考核工程师，数字指标如果用来考核，很容易导致大家本末倒置。例如有人 KR 实现了 200%，却挖了一堆坑；而有人 KR 实现 50%，但确实解决了辣手问题，代码扎扎实实。我必然会把好的绩效给后者，差的绩效给前者。定义团队指标实际上是个十分艰难的事件，因为这个指标的定义要求你答复：是否和你的用户/客户做了充沛沟通，是否了解他们真正须要什么，你能给他们解决什么问题，他们的工作因为有了你团队会产生怎么的扭转。和上下游合作方可能做好协同，要兑现你给客户承诺的价值，你会依赖于谁做什么事件？须要谁和你一起参加？这些依赖和合作方，是否认同你的指标？你定义的指标和价值，和你本人的的 TL 的指标，或者本人部门的指标，是否是统一的？在技术团队，你的指标定义中有没有思考技术竞争力？继续建设技术竞争力不仅能帮忙团队长期倒退得更好，也能帮忙吸引更多优良的人才。当然，如果这个指标有那么点理想主义，那就更好了。工程师骨子都有那么点容易被理想主义吸引。有了清晰的团队指标后，就是要和团队一直的沟通了，让每个人都清晰地了解指标，不要怕反复，不要怕啰嗦。下一步是把团队指标合成为每个人的指标，这件事实质上是产品架构或者技术架构。为什么这么说呢？在做软件设计的时候，咱们都会说高内聚，低耦合；会说面向契约设计。人与人合作的时候，咱们也心愿每个人的指标足够清晰（比照软件交付性能的定义，或者非功能性指标的度量），以及人和人之间的合作边界清晰（比照软件系统之间的契约）。因而咱们要一直去思考团队负责产品的架构，和团队同学一直探讨细化，直至架构及指标足够清晰。当然还有一些横向的指标，或者项目管理的工作指标，须要有同学去承当，这没什么问题，但我十分不倡议在研发团队中，让一个同学有超过一半的工夫在做横向，因为技术没有深度是谈不上广度的。三沟通如果团队同学找你，那就要尽可能立刻响应。立刻响应的意思是，如果你当下有工夫，就立即和他沟通；如果你白天工夫排满了，那就早晨和他沟通；如果你切实早晨的工夫也被占了，那就立即安顿今天一个工夫，收回会议邀约。同学如果没有他认为重要的事件，个别是不会被动找主管沟通的，立刻响应是和同学建设信赖的重要形式。如果同学找你一次两次都没失去响应，或者响应比较慢（给人不器重的感觉），那缓缓的很多事件就不会找你了。最差的状况，同学下次找你的时候可能是提转岗了。要尽量和同学做 1-on-1，国外专职做治理岗位的，把 1-on-1 作为一个十分正经的日常工作在做，频率也很高，例如两周一次。在阿里巴巴，技术 TL 通常没有这么多的工夫，因为身上承当的职责除了治理外，还要带技术，带我的项目等等。但还是应该做好日常的 1-on-1 沟通，而不仅仅是绩效季。比拟现实的频率是一个月一次。在 1-on-1 的时候，一方面要给到十分具体的反馈，例如：你做的 x 计划，在设计上十分好，思考到了和隔壁团队的合作。你近期的代码，在 UT 笼罩上做的不够。我看到你推动的 y 我的项目，停顿不迭现实，是遇到了什么问题吗？须要我提供什么帮忙？除了反馈 1-on-1 更重要的是聆听，同学在表述本人工作的时候，状态好不好？在什么中央遇到了问题，作为 TL 能提供什么帮忙？_其实很多时候，即便你临时帮不了什么，然而用认真的态度去听一下同学的情绪，无论这个情绪是充满热情，还是丧气，还是迷茫，对于同学来说都是十分重要的。我在做 1-on-1 的时候，都会做个简略的记录，留着下次 1-on-1 的时候 review，做好追踪。 ...

关于css3:为什么线程安全的List推荐使用CopyOnWriteArrayList而不是Vector

注：本系列文章中用到的jdk版本均为java8相比很多同学在刚接触Java汇合的时候，线程平安的List用的肯定是Vector。然而当初用到的线程平安的List个别都会用CopyOnWriteArrayList，很少有人再去用Vector了，至于为什么，文章中会具体说到。接下来，咱们先来简略剖析以下Vector的源码。一、Vector汇合源码简析因为本文的重点不是Vector汇合，因而只是简略的剖析一下Vector的初始化办法和增加元素的办法。 Vector的底层实现和ArrayList一样，都是由数组实现的。 Vector的次要变量如下： /** * 寄存元素的数组 */protected Object[] elementData;/** * 元素个数 */protected int elementCount;/** * 扩容自增容量大小 */protected int capacityIncrement; 1.1 Vector初始化Vector的初始化提供了三个办法，除了能够指定初始容量的大小，还能够指定扩容容量的大小。结构器别离如下：无参结构器 public Vector() { this(10);} 指定初始化容量的结构器 public Vector(int initialCapacity) { this(initialCapacity, 0);} 指定初始化容量和扩容容量大小的结构器 public Vector(int initialCapacity, int capacityIncrement) { super(); if (initialCapacity < 0) throw new IllegalArgumentException("Illegal Capacity: "+initialCapacity); this.elementData = new Object[initialCapacity]; this.capacityIncrement = capacityIncrement;} 从下面的结构器中能够看出，如果调用无参结构器，则会创立一个初始化容量为10，扩容容量为0的Vector汇合。 1.2 如何扩容Vector的扩容机制和ArrayList的很像，如果不分明ArrayList的扩容机制，能够看看这篇文章。这里咱们间接看Vector的扩容办法grow。 private void grow(int minCapacity) { // overflow-conscious code // 初始化数组的长度，默认为10 int oldCapacity = elementData.length; // 是否指定扩容容量，不指定扩容为原来的2倍 int newCapacity = oldCapacity + ((capacityIncrement > 0) ? capacityIncrement : oldCapacity); if (newCapacity - minCapacity < 0) newCapacity = minCapacity; if (newCapacity - MAX_ARRAY_SIZE > 0) newCapacity = hugeCapacity(minCapacity); elementData = Arrays.copyOf(elementData, newCapacity);} 通过下面的办法，咱们能够看出，如果指定了扩容容量的大小则扩容的新数组大小为原来的数组加上扩容容量的大小，如果不指定扩容容量的大小则扩容的新数组大小为原来数组大小的2倍。这样扩容为原来的2倍是很耗费空间的，这也是Vector被弃用的起因之一。 ...

关于css3:MSHA-x-Chaos-容灾高可用实践

简介： 2020 年 12 月份，阿里云利用高可用产品 AHAS（Application High Availability Service）公布了新的功能模块 AHAS-MSHA，它是在阿⾥巴巴电商业务环境演进进去的多活容灾架构解决⽅案。本篇文章咱们首先介绍容灾畛域的几个重要概念，而后将联合一个的电商微服务案例，分享一下如何基于 AHAS 的异地多活能力（AHAS-MSHA）和混沌工程能力（AHAS-Chaos）帮忙业务实现容灾架构的高可用实际。作者 | 远跖、瀚阑起源|阿里巴巴云原生公众号前言因为外部环境的简单以及硬件的不牢靠，互联网服务的高可用面临着微小的挑战，因为断网、断电等事变导致的各大互联网公司服务不可用的案例也不在少数。业务不可用，小到带来经济损失影响企业口碑，大到微信、支付宝这些国民级利用，影响国计民生。面对难以避免的天下大乱，容灾架构的建设就成为了数字化企业的迫切诉求。 2020 年 12 月份，阿里云利用高可用产品 AHAS（Application High Availability Service）公布了新的功能模块 AHAS-MSHA，它是在阿⾥巴巴电商业务环境演进进去的多活容灾架构解决⽅案。本篇文章咱们首先介绍容灾畛域的几个重要概念，而后将联合一个的电商微服务案例，分享一下如何基于 AHAS 的异地多活能力（AHAS-MSHA）和混沌工程能力（AHAS-Chaos）帮忙业务实现容灾架构的高可用实际。容灾与评估指标什么是容灾？容灾（Disaster Tolerance）是指在相隔较远的异地，建设两套或多套性能雷同的零碎，零碎之间能够互相进行衰弱状态监督和性能切换，当一处零碎因意外（如火灾、洪水、地震、人为蓄意毁坏等）进行工作时，整个利用零碎能够切换到另一处，使得该零碎性能能够持续失常工作。容灾能力如何评估？容灾零碎次要为了在劫难产生时业务不产生中断，那么容灾能力如何评估和量化呢？这里须要介绍一下业界通常采纳的容灾能力评估指标： RPO（Recovery Point Objective）即数据恢复点指标，以工夫为单位，即在劫难产生时，零碎和数据必须复原的工夫点要求。RPO 标记零碎可能容忍的最大数据失落量，零碎容忍失落的数据量越小，RPO 的值越小。 RTO（Recovery Time Objective）即复原工夫指标，以工夫为单位，即在劫难产生后，信息系统或业务性能从进行到必须复原的工夫要求。RTO 标记零碎可能容忍的服务进行的最长工夫，零碎服务的紧迫性要求越高，RTO 的值越小。 AHAS-MSHA介绍MSHA（Multi-Site High Availability）是一个多活容灾架构解决⽅案（解决方案=技术产品+咨询服务+生态搭档），能够将业务复原和故障复原解耦，反对故障场景下业务的疾速复原，助⼒企业的容灾稳定性建设。 1）产品架构MSHA 采纳异地多活的容灾架构，核心思想是 “隔离的冗余”，咱们将各个冗余的逻辑数据中心称为单元，MSHA 做到了业务流量在单元内关闭，单元之间隔离，把故障爆炸半径管制在一个单元内，不仅能解决容灾问题，晋升业务连续性，并且能实现容量的扩大。 2）支流容灾架构比照性能个性故障疾速复原秉承先复原，再定位的准则，MSHA 提供了容灾切流能力，在数据保护的前提下让业务复原工夫和故障复原工夫解耦合，保障业务连续性。容量异地扩大业务⾼速倒退，受限于单地无限资源，也存在数据库瓶颈等问题。应用 MSHA 能够在其它地区、机房疾速扩建业务单元，实现疾速程度扩容的目标。流量调配与纠错MSHA 提供了从接入层到应用层的层层流量纠错和校验，将不合乎流量路由规定的调用从新转发，将故障爆炸半径可管制在一个单元内。数据防脏写多单元写数据可能造成脏写笼罩的问题，MSHA 提供流量打入谬误单元时的禁写爱护，以及切流数据同步延时期间的禁写/禁更新爱护。利用场景MSHA 可实用于以下典型业务场景的多活容灾架构建设：读多写少型业务业务场景：典型的业务场景就是资讯、导购类服务（如商品浏览、新闻资讯）。数据特点：读多写少型业务，外围是读业务，可能承受写业务的临时不可用。流水单据型业务业务场景：典型的业务场景就是电商交易、账单流水类服务（如订单、通话记录等）。数据特点：数据能够按肯定的维度进行分片且能承受数据的最终统一。业务容灾实际上面咱们通过一个电商微服务案例，来介绍不同场景的容灾架构建设案例。电商业务背景1）业务利用frontend，入口 WEB 利用，负责和用户交互cartservice，购物车利用。记录用户的购物车数据，应用自建的 Redisproductservice，商品利用。提供商品、库存服务，应用 RDS MySQLcheckoutservice，下单利用。将购物车中的商品生成购买订单，应用 RDS MySQL2）技术栈SpringBootRPC 框架：SpringCloud，注册核心应用自建的 Eureka3）电商利用架构 1.0电商业务初期，跟很多互联网企业一样，没有思考容灾问题，只在单地区进行了部署。 ...

关于css3:制造业全链数字化业务转型实践

近日，阿里云Lindorm与Intel、OSIsoft推出了面向工业物联网信息经济（Infonomics）的IT & OT超交融工业数据云解决方案。计划通过云端买通阿里云、Intel的IT技术积攒和OSIsoft的OT教训能力，实现对传统技术供需关系的超过，打造数据链和价值链混搭形式连贯企业和供应商的凋谢、平安、共享的制造业数据云社区生态。信息时代背景下的制造业数字化市场时机5G + 工业物联网/互联网浪潮推动的制造业数字化转型，无疑是企业降级生产效力，晋升企业整体竞争力的难得时机。Mckinsey预测，寰球工业物联网市场规模在2025年可能达到3.7万亿美元，寰球物联网市场将从 2016 年的 1570 亿美元增长到 2020 年的 4570 亿美元，复合年增长率（CAGR）为 28.5%。到2020年，离散的制作、运输和物流以及公用事业将引领所有行业在物联网收入方面的倒退，均匀每个行业为 400 亿美元。国内，国家在政策层面积极支持我国工业互联网倒退，2019 、2020年相继出台了《“5G+ 工业互联网”512 工程推动计划》和《对于推动工业互联网放慢倒退的告诉》，明确了我国要由工业大国倒退迈向工业强国的战略目标，放慢推动“互联网 + 制造业”、“5G+ 工业互联网” 的交融翻新。2018、2019 年工业互联网交融带动的经济影响增加值规模别离为 9808 亿元、15953 亿元。预计 2020 年，我国工业互联网交融带动的经济影响增加值规模将达 24850 亿元。在过来数十年间，OT 团队部署了自动化、流程管制和分布式管制软件系统，为工厂人员提供了可监控、管制和优化工业流程的计算资源。这些零碎积攒了对于过来和目前流程与资产的海量工业信息。同时，IT 团队施行了大量的业务零碎、信息架构和先进的剖析工具。明天，云计算和大数据技术逐步成熟带来了一个前所未有的时机 - 通过整合 IT 和 OT 的人员、数据、软件工具和策略，能够为企业发明新的数字化价值，进步业务灵便度，晋升经营效率和企业整体竞争力。然而，制造业固有的流程复杂性、环境多变性，以及短少新技术和新平台技术积攒、实践经验等问题重大妨碍了数字化业务落地，企业IT和OT无奈有买通，数据孤岛化重大利用率低，价值施展不进去。统计数据显示，只有不到30%的企业通过数字化业务转型晋升了盈利能力，而大多数企业都陷入了技术陷阱之中。新技术落地的问题与挑战新技术在发明新机遇带动产业降级的同时，也为制作企业践行数字化转型带来了新的问题与挑战，更加简单的零碎架构和更高的性能、稳定性要求制约了IT与OT交融，妨碍了工业物联网系统实施落地。总的来说，以后企业面临的次要问题有以下几点： 1.工业物联网IT技术栈简单，建设施行危险高：要实现工业设施全链接入网络，买通新旧不同IT技术栈打造的信息系统，实现跨地区遍在数据共享，须要IT 部门把握更全面的IT技术，须要微小投入和专家反对，而且，云计算、工业互联网技术迭代更新速度快，IT基础设施建设难度大，使得自建TCO老本高，对制造业企业带来很大的老本累赘。 2.制造业生产环境复杂多变，现有OT零碎灵活性有余：一座中等规模工厂通常领有上百台独立设施，且有可能是别离购买于不同期间的不同供应商。每个供应商的自动化程度、软硬件平台以及通信协议均不雷同，导致数据的收集、整合和场景化十分艰难。不仅如此，一些设施制造商甚至将数据分析洞见作为需购买的增值服务，进一步妨碍了数据的可获得性。此外，OT的工业自动化层的软硬件自身极其简单，包含了从制造执行系统（MES）、维修保养软件、生产打算软件、分布式控制系统（DCS）等从企业资源布局到产品生命周期治理的各个方面，数字化革新降级须要有丰盛OT教训厂商撑持。 3.不足规模化的OT最初一公里接入能力：制造业企业要落地工业互联网，须具备从独立工作的离散系统中提取、解读和协调数据的能力。无论是在企业外部还是与第三方搭建工业物联网平台，企业都必须找到具备相应能力的OT服务提供商既能反对不同地点的多个工厂，又能协调从工厂可编程逻辑控制器（PLC）、传感器和历史数据库中取得的数据（和连贯能力）。如果没有这一步，再欠缺的分析模型和用户界面也会因不足相应数据而无奈交付预期的价值洞见。 4.IT和OT之间不足合作，能力无奈互联互通：制造业企业IT和OT流动从来就短少分割，特地是现场制作流程工程师所施行的流动。OT通常关注以后业绩、失常经营的可预测性以及如何防止失常工作的零碎不被烦扰。IT则更多地偏向于安全性以及如何获取可信赖的技术提供商通常这些技术已被广泛应用。在用户治理和机器治理上的不同偏重通常会导致非常不同的问题解决方案。因而， IT和OT工作人员必须从一开始就相互协作。 5.IT 与OT底层计算基础架构和通信之间的异构性：因为业务指标不同IT与OT底层计算和通信撑持基础架构存在较大差别。实现数据互联互通，IT可能平安地拜访 OT 数据，来自 OT 零碎的时序数据可能以 IT 零碎可应用的格局出现，企业通过高级的IT 业务智能和剖析工具让整个企业可能自助拜访和应用 OT 数据，而没有影响要害经营的危险并不容易。阿里云Lindorm、Intel与OSIsoft整合IT & OT超交融工业数据云解决方案解决制造业企业以后面临的数字化转型问题，靠企业本身能力和积攒远远不够，因而须要既有残缺、丰盛IT技术堆栈能力积攒，又有丰盛OT实践经验撑持的科技公司提供撑持。如愿景图1所示，计划通过云端买通阿里云、Intel的IT技术积攒和OSIsoft的OT教训能力，实现对传统技术供需关系的超过，打造数据链和价值链混搭形式连贯企业和供应商的凋谢、平安、共享的制造业数据云社区生态。阿里云、Intel与OSIsoft在工业数据云计划层面的联合，为制造业交融IT与OT能力，屏蔽较高技术复杂度躲避事件危险，一站解决工业数据采集、传输、存储、剖析及可视化全链数据处理系统建设难点提供了切实可行的解决方案。在信息技术（IT）方面，阿里云原生多模数据库Lindorm和Intel Analytics Zoo大数据分析平台具备行业当先的技术积攒和残缺的软、硬件工业数据存储剖析能力，可能为制造业企业提供云计算、多模数据库、ML/AI、流数据计算等为代表的经营治理业务零碎撑持能力；经营技术（OT）方面，OSIsoft PI System具备丰盛的对接可编程逻辑控制器（PLC）、近程终端单元（RTU），数据采集与监督控制系统（SCADA）及嵌入式计算零碎教训，可能提供过程监控管理系统撑持教训与技术。 ...

关于css3:阿里云性能测试工具PTS介绍

简介：性能测试 PTS（Performance Testing Service）是具备弱小的分布式压测能力的 SaaS 压测平台，可模仿海量用户的实在业务场景，全方位验证业务站点的性能、容量和稳定性。阿里云阿里云智能GTS-平台技术部-SRE团队1.简介（1）概述性能测试 PTS（Performance Testing Service）是具备弱小的分布式压测能力的 SaaS 压测平台，可模仿海量用户的实在业务场景，全方位验证业务站点的性能、容量和稳定性。PTS 指标是将性能压测自身的工作继续简化，使用户能够将更多的精力回归到关注业务和性能问题自身。在 PTS 平台上，用户能够用较低的人力和资源老本，结构出最靠近实在业务场景的简单交互式流量，疾速掂量零碎的业务性能情况，为性能问题定位、容量最佳配比、全链路压测的流量结构提供最好的帮忙。进而晋升用户体验，促成业务倒退，最大水平实现企业的商业价值。（2）压测流程PTS 提供全面高效的压测流程，具体如下图所示。图1：PTS压测流程图压测流程阐明：在 PTS 管制台上，筹备压测 API 数据，结构压测场景，定义压测模式、量级等；反对随时启停压测，压测过程中可调速。压测启动后，PTS 后盾的压测控制中心将主动调度压测数据、压测工作和压测引擎。通过随机调度全国上百个城市和运营商的内容散发网络 CDN （Content Delivery Network）节点，发动压测流量。保障从虚构用户并发量、压测流量的分散度等维度都靠近真正的用户行为，压测后果更加全面和真实可信。通过压测引擎向用户指定的业务站点发动压测。压测过程中，通过集成云监控产品，联合 PTS 自有的监控指标，实时采集压测数据。在 PTS 控制台，实时展示压测数据，进行过程监控；压测完结后，生成压测报告。基于整个压测场景的性能体现，定位性能问题、发现零碎瓶颈。（3）压测创立形式PTS 反对以下 4 种形式创立压测场景（或称压测用例），如图所示：图2：压测场景创立形式阐明：形式一： PTS 自研零编码可视化编排，应用自研弱小引擎压测。形式二：应用 PTS 自研云端录制器的应用，零侵入录制业务申请并导入 1 中的自研交互中进行进一步设置。形式三：将导入脚本压测 1 中的 PTS 自研交互中，应用 PTS 自研引擎。形式四： JMeter 原生压测并应用原生 JMeter 引擎进行压测，PTS 提供自定义的压力结构和监控数据汇聚等产品服务。其中，形式一、二、三因为应用了 PTS 的自研引擎，具备 RPS（Requests per Second）吞吐量压测模式、秒级启动、实时控制、定时压测和流量遍布全国运营商网络的差异化能力，其中形式一是 PTS 最外围的一种压测场景创立形式。 ...

关于css3:6岁是时候重新认识下Serverless了-云原生趣谈

一、背景Serverless 概念从2012年开始提出，真正推出相干云产品是2014年AWS推出Lambda。如果咱们将 Serverless 比作一个婴儿，那么它曾经6岁了。尽管业界对Serverless尚无统一认可的定义，然而我置信大部分开发者在听到 Serverless时，会联想到Lambda，并且冒出“函数”、“按需（调用次数）免费”、“事件驱动”等关键词。的确当年刚刚诞生的Serverless就像上面可恶的“紫薯人”，紫色充斥神秘感（当年刚推出的时候相对是黑科技），让人印象粗浅。 AWS的微小影响力以及自身携带的一身黑科技，的确让人记住了 Serverless，然而也正因为诞生的时候太印象粗浅，以至于当初提到曾经6岁的 Serverless，很多人的印象还是停留在Serverless=Lambda或者Serverless=FC（Function Compute），这不得不说是某种遗憾。明天企业都在全面数字化转型，整个技术架构体系都渴望依靠云原生来获取微小技术红利，Serverless从诞生的第一天起就是云原生的，所以咱们有必要再零碎的认识一下Serverless的理念以及这些年诞生的相干产品，置信不论你是前端、后端、架构师、SRE、CTO都会有所播种，并且在将来能更好的施展Serverless的技术价值助力商业胜利。二、定义业界始终在尝试定义Serverless，比方CNCF给出的定义是：NoOps 和Pay as You Run，还有伯克利说 Serverless=FaaS+BaaS。然而我想说，Serverless 其实无需再去定义，他自身就曾经十分清晰明确：“Server+less”，他是一个理念，核心思想就是你不再须要关注 Server，作为比照的是 IaaS 时代，购买服务器，装置各种工具，再在下面开发本人的业务。 Server不会隐没，而是让个别的开发者不须要再关注 Server，这意味着【智能弹性】、【疾速交付】、【更低成本】，这也是 Serverless 相干产品的典型个性。所以没必要再去给 Serverless 做什么定义，他自身曾经形容的很清晰。咱们抛开概念，具体看看在各个具体技术畛域的产品，置信你会有更直观的意识。三、PaaS在 Serverless 时代的新生PaaS 自身的概念挺大，狭义的说它处于IaaS和SaaS之间，咱们先从一个具体的产品说起：GAE（Google App Engine）。2006年AWS推出了IaaS的云计算，Google认为云计算不应该是IaaS这样的底层状态，所以在2008年推出了本人的云计算代表产品GAE（对于这里的倒退原因，能够参考张磊的这篇文章：容器十年，一部软件交付编年史）。初推出的GAE，也像Lambda，让人眼前一亮，然而很快开发者就发现它的限度十分多，用明天的话说就是典型的“我不要你感觉，我要我感觉”，最初的后果就是大家都纷纷回到了IaaS的怀抱。到起初的PaaS产品比方Cloud Foundry，这类PaaS产品绝对更理论一些，底层IaaS还是云厂商提供，下层提供一套利用治理生态，背地的思维还是不心愿开发者通过IaaS这么底层的形式去应用云计算，而是从PaaS开始，不过它也不是Serverless化的，你还是要思考服务器的保护、更新、扩大和容量布局等等。 SAE（Serverless App Engine）到了当初，随着容器技术的成熟，以及Serverless理念的进一步倒退，PaaS和Serverless理念也开始交融，这样的产品既有PaaS为代表的【疾速交付】，又有Serverless的特点【智能弹性】、【更低成本】，典型的产品代表就是阿里云在2019年推出的产品：SAE（Serverless App Engine）。首先，它是一个PaaS，再具体一点说，是一个利用PaaS。这意味着大部分开发者应用起来都会十分天然，因为外面的概念你会十分相熟，比方利用公布、重启、灰度、环境变量、配置管理等等。同时，它也是Serverless化的。这意味着你不用再关怀服务器，不必再申请机器，保护服务器，装一堆工具，而是按需应用，按分钟计费，联合弱小的弹性能力（定时弹性、指标弹性）实现极致老本。最初，得益于Docker为代表的容器技术的倒退，SAE解决了经典PaaS的突出问题（各种限度和强绑定），依靠于容器镜像，在下面能够跑任意的语言的利用看到这里，我置信大部分开发者对于 PaaS 和 Serverless 联合的产品曾经有了一个轮廓，在中国云原生用户调研报告中(2020年) ，这种状态的Serverless产品开始被越来越多的开发者采纳。在这个根底上，还有另外一个话题值得再讨论一下，那就是微服务和 Serverless。微服务和 Serverless当初业界对于微服务和 Serverless，会有局部这样的认知：认为以后云计算典型代表技术是微服务，下一代的代表技术是 Serverless，这会让你 Serverless 比微服务要先进，甚至会感觉将来有了 Serverless 就没有微服务了，相似上面这张图：集体认为产生这一认知还是因为将 Serverless 的理念具象化到函数计算（FaaS）这样的产品。当初咱们聊到微服务，会想到背地的技术框架，比方Spring Cloud、Dubbo，然而其实微服务这个词曾经远远超出了纯技术框架的领域，他背地也有外围的撑持思维，包含： 1 . 微服务尽管肯定水平上减少了技术复杂度，然而在肯定规模下他会升高零碎复杂度和组织复杂度。 2 . 古代业务零碎越来越简单，很多业务零碎会基于畛域驱动设计（DDD）设计，微服务其实是DDD背地的撑持技术。 ...

关于css3:我看技术人的成长路径

简介：有一句诗词说：宠辱不惊，看庭前花开花落；去留无心，望天上云卷云舒。其实就是讲心田修炼到了一种心情温和，恬淡天然的境界。作者 | 儒枭为什么要成长成长是为了退职场贬值，晋升职场竞争力！ **衡量标准：你成长的速度要匹配甚至超过业务倒退的速度。**当你成长速度超过业务倒退速度的时候，组织才会把更重要的职责交给你，如果你成长的速度跟不上业务倒退的速度，可能会面临被调整。成长的维度阿里的技术人绝大部分是做业务技术的，即业务和技术要同时倒退，纯技术倒退路线是指中间件、数据库、操作系统、硬件之类的实打实的技术。阿里对业务技术人的要求，既要有技术的深度，又要有业务的高度，此外还须要你有领导力、影响力等软技能，当然心态也是不容忽视的。我的代表作是 MOZI ，2018 年年初开始做 MOZI ，我抉择做 MOZI 的起因是我就要开始站在业务线或者公司层面去思考，MOZI 做了会给业务带来什么扭转。做 MOZI 的时候是站在经济体的的角度在思考问题，另外那个时候经济体的云化产品化才刚刚开始，做出 MOZI 提供一套对立解决方案正逢其时。技术的深度咱们是做业务技术的，业务技术如何做得更加“技术”，这里我学习了很多大牛的文章，尤其是张建飞巨匠对我启发十分大。这里我总结下两点： 1 . 业务复杂度：“基于简单业务场景的形象能力”是一种能体现你技术深度的能力，业务的实质是模型，如果咱们能基于简单业务场景形象出畛域模型或者基于简单业务场景做流程编排，做好分层，不仅反映你对业务认知的深度，也反映了你的技术深度。 2 . 技术复杂度：“针对大用户量或者大数据量的可用性建设”这个是能很好的反映你的技术深度，然而咱们在做这一块的时候要有一些创新性的思考，可用性年年做，然而基于新的业务场景会有什么不一样？比方 MOZI 提供了一个多租户&多账号的能力，那么咱们做限流的时候是不是能够按租户限流，做缓存逐出的时候能够按租户来进行逐出，一种特地的租户咱们能够辨别看待。这些都是咱们要去思考的问题，不能总是吃老本。另外咱们其实都是属于“利用架构”畛域的，张建飞巨匠总结的利用架构的道是：“外围业务逻辑和技术细节拆散”，我感觉十分有情理，咱们应该利用分治的思维，把业务和技术做拆散，从而升高零碎的复杂度。业务的高度马云曾说，咱们既要能活在当下，又要有远大的现实，活在当下是一种求实，让客户先赢。远大的现实是咱们长期倒退的路线，也十分重要，背地体现你的一种“务实”的能力。为什么优良的业务开发人员肯定要有“想法”？如果没有想法，基本上就是产品经理安顿什么，而后就做什么，不会思考将来的倒退，也不能很好的造就你的业务敏锐度，更加不会有前瞻性。什么是前瞻性，就是你思考的货色和业务真正倒退的门路其实是统一的，那么就是有很好前瞻性。如果你思考的货色和业务倒退南辕北辙，那其实不叫前瞻性。另外咱们在做业务的时候，业务积淀是十分重要的。阿里有句土话说，“规模可复制的后果才是好的后果”，你做的货色能不能影响更多的人，就看你的业务积淀如何，如果你做的货色一年后通过几次改版都隐没不见了，那其实没有什么积淀。那么咱们应该如何去做业务布局？留神这里的业务布局不是产品经理的布局，也不是你老板的布局，是你本人的布局。分享两点：一、要联合你以后的业务，不能脱离现状谈布局；二、要去参考你的行业标杆，咱们能够借鉴他人的胜利理念，而后融入到咱们的业务场景外面。首先联合 MOZI 的两块业务，一块是经济体客户，一块是政务客户，另外我参考了 MOZI 的行业龙头来做的布局：软技能咱们的软技能大体分为两局部：一种是影响别人的能力，次要是领导力&影响力；另外一种是强化本人的能力，比方结构化思维，形象能力和构建认知坐标，最终你会具备一眼看穿实质的能力。领导力领导力是一种人人应该具备的能力，然而与你有没有领导力有很大的关系。那么到底什么是领导力，我感觉领导力就是“一种压服并且引领别人达成指标的能力”。领导力的晋升外围就是下面这张图，这个图其实叫做乔哈里视窗，也叫沟通视窗，实质是一种对于沟通的技巧和实践，领导力的外围其实是沟通，通过沟通建设信赖，从而来引领他人一起去达成指标。乔哈里将人际沟通信息划分为四个区，别离是公开象限，隐衷象限，盲点象限和潜能象限。咱们应该一直的从别的象限拿出一点货色而后放到公开象限外面去，让公开象限放大，这样你的领导力就晋升了，比方国家领导人和明星，他们的公开象限就十分大。隐衷象限：隐衷象限就是本人晓得然而别人不晓得，把隐衷象限往公开象限外面移动最重要的形式就是自我揭示。比方你写个人成长经验，或者和共事聊聊你的过来，就是一种很好的自我揭示的形式，让他人更理解你是一个什么样的人，从而建设信赖。盲点象限：盲点象限就是本人不晓得然而别人晓得，把盲点象限往公开象限外面移动最重要的形式是恳请反馈。比方两夫妻吵架，妻子说你这人的嘴特损，就喜爱说人毛病。丈夫说“有吗，我素来没感觉”。前面丈夫去找敌人确认：“我妻子说我嘴特损，专门喜爱说人毛病，有这回事吗？”，敌人说“别把嫂子的话放在心上，大家都曾经习惯了~~~”。哈哈，这里其实就是在吵架这种场景下发现了一个人的盲点象限。比方在分享的时候，咱们要让听分享的人给你反馈，这个时候就能很好的发现分享人的盲点象限，从而晋升你本人。潜能象限：大家都说人的潜能是有限的，咱们应该去开掘他。你们晓得巴菲特最拜服的人是谁吗？他最拜服的是弗吉尼亚的一个老太太，这个老太太在88的时候开始守业，没看错就是88岁，她创立了弗吉尼亚毛毯厂，带人开始织毛毯，他从88岁始终干到104岁逝世，公司做到了几百人的规模，取得和很大的胜利，逝世的时候她仍然是CEO。这个故事其实就很好的阐明，人的潜能是有限的，这个老太太88岁还在一直的学习和实际。那么怎么去从本人的潜能象限外面移动一部分到公开象限呢，最重要的就是一直学习和实际，让你一生成长。阿里其实也有一套领导力的方法论：心力：其实是让大家对这件事件心田统一认同；脑力：是对事件的深度思考；膂力：是引领大家把事件做好，拿到后果。用阿里土话就是“一群有情有义的人一起做一件有价值的事件”。这个事件有没有价值，你要去压服他人，压服完后要引领大家做进去。这个和后面的领导力“一种压服并且引领别人达成指标的能力”，其实是差不多的。影响力影响力蕴含两个维度：一个是你做的产品影响力；另外是你的集体影响力。产品影响力：某大佬曾说，你做的货色影响范畴如果只能影响 1 米和你能影响 100 米，甚至你做的货色能影响 1 公里，意义齐全不同。所以你做进去了货色，要想方法去找资源横向放大你的价值，这个十分重要，比方你能够去写文章，去做分享，去找经营帮你写稿子。我在做 MOZI的时候，我组织了 4 次视频分享，组织大家写了几十篇文章，而后还特意找了 ATA 的经营去帮忙推广 MOZI ，不然 MOZI 可能还是会名不见经传。 ...

关于css3:前端面试每日-31-第584天

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

关于css3:你可能不知道的Animation动画技巧与细节

作者：阿文原文：https://aotu.io/notes/2020/10... 本篇将着重对animation的应用做个总结。引言在 web 利用中，前端同学在实现动画成果时往往罕用的几种计划： css3 transition / animation - 实现过渡动画setInterval / setTimeout - 通过设置一个间隔时间来一直的扭转图像的地位requestAnimationFrame - 通过一个回调函数来扭转图像地位，由零碎来决定这个回调函数的执行机会，比定时批改的性能更好，不存在失帧景象在大多数需要中，css3 的 transition / animation 都能满足咱们的需要，并且绝对于 js 实现，能够大大晋升咱们的开发效率，升高开发成本。本篇文章将着重对 animation 的应用做个总结，如果你的工作中动画需要较多，置信本篇文章可能让你有所播种： Animation 罕用动画属性Animation 实现不间断播报Animation 实现回弹成果Animation 实现直播点赞成果 ❤️Animation 与 Svg 又会擦出怎么的火花呢？???? Loading 组件进度条组件Animation steps() 使用 ⏰ 实现打字成果绘制帧动画Animation 罕用动画属性介绍完 animation 罕用属性，为了将这些属性更好地了解与使用，上面将手把手实现一些 DEMO 具体讲述 Animation 实现不间断播报实现不间断播报 DEMO 通过批改内容在父元素中的 y 轴的地位来实现播送成果 @keyframes scroll { 0%{ transform: translate(0, 0); } 100%{ transform: translate(0, -$height); } } .ul { animation-name: scroll; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; /\* animation: scroll 5s linear infinite; 动画属性简写 */ } 此处为了保留播送滚动成果的连贯性，避免滚动到最初一帧时没有内容，须要多增加一条反复数据进行填充 ...

关于css3:transform-2D-转换

作用：对元素进行挪动、缩放、转动、拉长或拉伸语法：transform: transform-functions;rotate，元素顺时针旋转给定的角度。容许负值，元素将逆时针旋转translate，元素从其以后地位挪动，依据给定的 left（x 坐标）和 top（y 坐标）地位参数

关于css3:阿里云数据湖解决方案全面满足数据需求帮助企业释放数据价值

简介：基于阿里云对象存储OSS构建的数据湖解决方案，能够全面满足数据的存储、离线剖析、交互查问等各种业务诉求，帮忙企业开释数据的价值 1、行业综述游戏市场需求旺盛，行业景气度继续晋升2020年从天而降的疫情，使全国上下在2—3月处于全面抗疫，严防死守的状态，各行各业都受到了冲击，对国民经济造成了不小的影响。尽管此次疫情对于各行各业产生的影响颇深，然而对于“宅经济”来说，的确一针兴奋剂。据统计，2020年第一季度，国内游戏市场稳中有升，理论营销支出732.03亿元。一季度中国自主研发游戏海内市场营销支出37.81亿美元，环比增长31.19%，同比增长40.56%，持续放弃较高增速。相比今年，往年在8月份刚完结的ChinaJoy，会发现一个高频词浮现，那就是“云游戏”。依据往年早些时候公布的《2020年云游戏产业调查报告》，往年中国云游戏的市场规模将超过10亿元，将来两年每年增长率超过100%，接下来的3到5年将是中国云游戏的疾速成长期。 2、行业倒退方向换皮游戏时代曾经终结，大数据驱动智能化精准经营随着国内游戏行业的迅速倒退，游戏画面更加精良，游戏引擎也更加实在，玩家对于游戏内容品质要求越来越高，且游戏厂商泛滥，游戏迭代速度放慢，玩家留存率大大降低。流量称王的时代终结，单纯靠流量导流的形式获取客户的行为收益极低。因而“换皮游戏”逐步被这个时代所摈弃，游戏厂商要想在行业立足，在提供画面更优质、内容更丰盛、游戏性更强的游戏同时，还须要依附大数据分析，解决玩家个性化的需要以及进行更加精准的营销。在解决完画面、内容以及游戏性等“硬件要求”后，越来越多的企业曾经开始意识到须要把游戏数据进行更加精细化的经营剖析，依据用户的沉闷数据、充值数据、偏好数据等为用户推送不同的流动以及玩法。同时还会依据用户的战绩数据、玩耍时长等为不同的用户提供不同的匹配逻辑与关卡难度。置信大家在玩耍MOBA类游戏时会发现，个别在连胜后，就会遭逢连败，输到本人狐疑人生。然而连败后又往往会迎接一波连胜，如此循环，最初将胜率稳固在50%高低。可能这一把匹配到的队友超强，“全场带飞”，下一把的队友就可能是个“萌新小可爱”，蹦蹦跳跳地进入敌方进攻塔范畴送人头。这其实就是使用大数据驱动的一种形式，通过综合剖析游戏玩家每把游戏体现来为玩家匹配不同的队友，最终让大部分玩家的胜率放弃在50%高低，防止玩家因为连胜或者连败对该款游戏失去趣味，大大加强了玩家的整体游戏体验，加强玩家的留存率，刺激更多的玩家为晋升本人的实力进行生产。面临的痛点大数据驱动下数据存储成难题，资源节约成难题尽管在大数据的驱动下，能够准确地对相干用户进行营销，然而在大数据系统构建的时候，很多企业又遇到各种各样的技术挑战。比方，一份数据存储在在生产存储上，须要通过RAID或者多正本的形式进行冗余存储。这个时候咱们要做大数据分析，须要把这些数据进行抽取、ETL解决，来复制到像Hadoop、HDFS存储上。然而通常状况下HDFS须要做三正本，因而一份数据通常须要拷贝5，6份以上，占用了大量的存储空间。随着前期数据量的一直增长，扩容也逐步成为了一个头疼的问题，像Hadoop原生的这种计算、存储交融的架构，如果须要进行扩容，就必须购买原来同规格服务器，极易造成计算、存储资源的节约。更让人头疼的是，多个业务零碎的数据往往是孤立的竖井状的，各个数据处理、剖析零碎不兼容，不能用一套大数据平台进行对立的数据存储、剖析，治理复杂度极高。数据湖解决方案**阿里云数据湖解决方案，助力企业真正开释数据价值**基于阿里云对象存储OSS构建的数据湖解决方案，能够全面满足数据的存储、离线剖析、交互查问等各种业务诉求，帮忙解决下面提到的这些难题。首先，数据湖解决方案可为用户存储的数据提供高达12个9的可靠性，让数据安全寄存，保障用户数据不丢不坏。其次，阿里云的数据湖解决方案，也是一套非常智能的解决方案。其中对象存储OSS，能够对接个多业务零碎，存储来自不同业务零碎的多种数据源，如些零碎的原始数据、游戏日志数据等。等数据汇聚到数据湖之后，它的下层零碎能够兼容多种计算引擎，如开源大数据引擎像Hadoop，Spark，阿里云EMR、DLA等，帮忙用户便捷地实现数据处理和剖析，不须要再反复拷贝多份。同时采纳 Jindofs提供缓存减速计划，还能够取得比应用HDFS更好的体验。同时DLA所提供的双引擎，SQL(兼容Presto)和Spark为用户提供了在计算引擎层面job级别的弹性能力，只须要为每一个job耗费的计算资源付费，而无需搭建集群，Serverless化的计算能力，让用户能够应用SQL&Spark赋能业务，联合OSS的弹性能力，真正意义做到按量付费，降本增效。这样一套整体的数据存储、解决剖析解决方案，能很大水平地缩小零碎兼容性问题，治理保护也更加简略，帮忙IT人员从简单且繁琐的运维中解放出来，更加专一在产品翻新和业务模式的经营上。最佳案例实际客户介绍国内顶级游戏公司，出海手游TOP10，波及的游戏类型包含休闲类游戏、卡牌类游戏、回合类游戏等。业务痛点：出海经验了最后的跑马圈地阶段，中国厂商对出海器重水平来到了更高级别。游戏比拼的聚焦在精细化经营下面，精细化经营作为出海的必备技能如何晋升经营效率，如何实时渠道和流量剖析，ROI剖析，如何智能化晋升玩家活跃度，用户行为剖析进步游戏体验。经常会碰到上面这些问题： 1.须要解决海量并且日益增长的日志数据。2.须要提供弹性能力，达到最优的财务均衡。3.数据分析师相熟SQL，经常会有大数据量的多表join。4.须要提供全面的游戏经营指标剖析性能。5.须要无效剖析渠道成果，使每分钱都花在刀刃上。6.对付费用户追踪剖析，从而更好的反映付费用户在整7.个生命周期的要害行为和价值。8.剖析玩家游戏行为，购买道具改良产品体验，进步游戏收益解决方案：1、利用DLA的弹性计算能力，配合OSS的近乎有限的弹性存储能力，构建弹性数据湖计划，打造最优性价比。2、对数据做分层解决，历史日志数据通过SLS投递到OSS，实时日志存入AnalyticDB。3、利用DLA对数据做汇聚和ETL解决，并将统计后果放在AnalyticDB上存储。业务价值：1、玩家链路实时监控，进步游戏体验，达到千万DAU2、用户精细化实时经营，T+1->实时，客户留存率晋升30%3、实时渠道统计，节俭约200万/月广告老本分享：原文链接本文为阿里云原创内容，未经容许不得转载。

关于css3:animation动画

作用：css3动画属性语法animation: name duration timing-function delay iteration-count direction fill-mode play-state;默认：none 0 ease 0 1 normal搭配 @keyframes animation-name{}应用 animation-name，规定须要绑定到选择器的 keyframe 名称animation-duration，规定实现动画所破费的工夫，以秒或毫秒计animation-timing-function，规定动画的速度曲线animation-delay：规定在动画开始之前的提早animation-iteration-count，规定动画应该播放的次数animation-direction，规定是否应该轮流反向播放动画实例：动画与设定实现工夫语法animation-name: keyframename | none;animation-duration: time;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画与设定实现工夫<h1> <div></div></body>实例：动画开始工夫（提早开始工夫）语法animation-delay: time;留神：容许负值，-2s 使动画马上开始，但跳过 2 秒进入动画周期<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画开始工夫 */ animation-delay: 2s; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画开始工夫（提早开始工夫）<h1> <div></div></body>实例：动画播放次数语法animation-iteration-count: n | infinite;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画播放次数 */ animation-iteration-count: 2; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画播放次数<h1> <div></div></body>实例：动画播放次数语法animation-iteration-count: n | infinite;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画播放次数 */ animation-iteration-count: 2; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画播放次数<h1> <div></div></body>

关于css3:小红书推荐大数据在阿里云上的实践

简介：本篇内容次要分三个局部，在第一局部讲一下实时计算在举荐业务中的应用场景。第二局部讲一下小红书是怎么应用Flink的一些新的性能。第三局部次要是讲一些OLAP的实时剖析的场景，以及和阿里云MC-Hologres的单干。作者：小红书举荐工程负责人郭一小红书举荐业务架构首先这个图上画了一些比拟典型的举荐业务，应用大数据的次要模块，其中最右边是线上举荐引擎，个别举荐引擎会分成召回、排序、后排等几步，在这里就不细说了。次要是从大数据的角度来说，举荐引擎次要是使用预测模型来预估用户对每个候选笔记的喜爱水平。依据肯定的策略来决定给用户举荐哪些笔记。举荐模型在使用时须要抓取笔记特色，这些特色又会回流到咱们的训练数据中，来训练新的模型。举荐引擎返回笔记之后，用户对笔记的消费行为，包含展现、点击、点赞等行为，会造成用户的行为流。这些用户行为流联合了特色流，从而产生了模型训练的数据来迭代模型。联合用户和笔记的信息之后，就会产生用户和笔记画像和举荐业务所用到的一些剖析报表。通过一年多的革新，小红书在举荐场景中，除了从剖析数据到策略这一块，须要人为参加迭代策略之外，其余的模块的更新基本上是做到了实时或近实时的进行。举荐业务的实时计算利用这里略微开展讲一下特色和用户行为的数据回流之后的实时计算，以及咱们怎么应用他们产生的数据。在举荐引擎产生特色流的时候，特色流因为量特地大，包含了所有举荐返回的笔记，大略有近百篇，以及这些笔记的所有特色，所以这些特色总共大略有大几百个。目前咱们的做法是把特色写到一个咱们自研的高效的kv中缓存几个小时，而后用户行为数据是从客户端打点回流，而后咱们就开始了数据流的解决。咱们第一步是把客户端打点的用户行为进行归因和汇总。这里讲一下什么是归因和汇总。因为在小红书的APP下面，客户端的打点是分页面的，比如说用户在首页举荐中看了笔记并进行了点击，点击之后用户就会跳转到笔记页，而后用户在笔记页上浏览这篇笔记并进行点赞。同时用户可能会点击作者的头像进入作者的集体页，并在集体页中关注了作者。归因是指把这一系列的用户行为都要算作首页举荐产生的行为，而不会和其余的业务混起来。因为搜寻用户，在搜寻中看到同样一篇笔记，也可能返回同样的后果。所以咱们要辨别用户的行为到底是由哪一个业务所产生的，这个是归因。而后汇总指的是用户的这一系列行为，对于同一篇笔记，咱们会产生一条汇总的记录，汇总的记录能够便于后续的剖析。而后归因之后，会有一个实时的单条用户行为的数据流。而汇总这边，因为有一个窗口期，所以汇总的数据个别会提早目前大略是20分钟左右。当咱们产生归因和汇总的数据流之后，咱们就会补充上一些维表的数据，咱们会依据用户笔记来找过后咱们举荐产生的特色，同时咱们也会把一些用户的根底信息和笔记的根底信息加到数据流上。这外面其实次要有4个比拟重要的用户场景，第一个场景是产生分业务的Breakdown的信息，这个次要是能晓得某一个用户在不同的笔记维度，他的点击率和一些其余的业务指标，同时我也能够晓得某一篇笔记针对不同的用户，它产生的点击率，这个是咱们在实时举荐当中一个比拟重要的特色。另外一个很重要的是咱们实时剖析的一个宽表，宽表是咱们把用户的信息、笔记信息和用户笔记交互的汇总信息，都变成了一个多维度的表，进行实时剖析，这个前面会更加具体的和大家讲述。而后还有两个比拟重要的，一个是实时训练的信息，训练的信息就是我把用户和笔记交互的信息裁减了，过后排序的时候抓起的特色，这特色加上一些咱们汇总进去的标签，就给模型进行训练来更新模型。而后另外一个就是我所有的汇总信息都会进入离线数据数仓，而后会进行后续的一些剖析和报表的解决。流计算优化—Flink批流一体而后我这里讲一下咱们怎么使用Flink的一些新性能来优化流计算的过程。这外面我次要讲两点，其中第一点就是批流一体化。方才说了咱们把一个用户的行为依据笔记的行为汇总之后进行剖析，这里的汇总的信息其实很多的，汇总信息当中，除了最简略的，比如说用户有没有点赞珍藏这篇笔记，其实还有一些比较复杂的标签，比如说用户在笔记页上停留了多长时间，或者是说这篇笔记之前的点击是不是一个无效点击，咱们对于某些广告场景或者有些场景上面，咱们须要晓得如果用户点击之后停留了比如说超过5秒，那么这个点击是无效的。那么像这种简单的逻辑，咱们心愿在咱们的零碎当中只被实现一次，就能够同时使用在实时和批的计算当中。那么在传统意义上这点是很难的，因为大多数的实现中，批和流是两个版本，就是咱们在Flink下面，比如说实现了一个版本的无效点击的定义，咱们同时也会须要实现一个离线版本的无效点击的定义，这个可能是一个SQL写的版本。那么小红书是使用了FLIP-27外面的一个新的性能，日志文件是一个批的模式，它能够转换成一个流的模式，这样的话我就能够做到代码意义上的批流对立。流计算优化—Multi-sink Optimization 那么还有一个Flink的性能就是一个在Flink 1.11上的Multi-sink Optimization。它的意思是我一份数据会写到多个数据利用下来，比方我会同时须要做张用户行为的宽表，同时也生成一份离线的数据。那么Multi-sink Optimization做的是，你只须要从Kafka外面读一次，如果是同一个key的话，他只须要去Lookup一次kv就能够产生多份数据，同时写到多个sink，这样能够大大减少咱们对Kafka的压力和对 kv查问的压力。小红书OLAP典型场景最初我讲一下咱们的OLAP场景和阿里云MaxCompute、Hologres的一个单干。小红书在举荐业务上面有很多OLAP场景，这里我讲4个比拟常见的场景利用，最常见的其实就是依据用户的实验组分组进行比拟的一个实时剖析。因为咱们在举荐业务下面须要大量的调整策略或者是更新模型，而后每次调整策略和更新模型咱们都会开一个试验，把用户放到不同的ABtest外面来比拟用户的行为。那么一个用户其实在举荐当中会同时处于多个试验，在每一个试验外面是属于一个实验组，咱们按试验分组做的试验剖析，次要就是把一个试验拿进去，而后把用户的行为和汇总数据，依据这个试验当中的实验组进行分维度的剖析，看看不同的实验组它的用户指标有什么差异。而后这个场景是一个十分常见的场景，然而也是计算量十分大的场景，因为它须要依据用户的试验tag进行分组。而后另外一个场景就是咱们小红书的举荐其实是跑在了多个数据中心下面，不同的数据中心常常有一些变动，比如说是运维的变动，咱们要起一个新的服务，或者是咱们可能有些新的模型须要在某个计算中心先上线，那么咱们须要一个端到端的计划去验证不同的数据中心之间的数据是不是统一，用户在不同数据中心的体验是不是一样。这个时候就须要咱们依据不同的数据中心进行比拟，比拟用户在不同的数据中心当中产生的行为，他们最终的指标是不是统一，同样咱们也用到了咱们的模型和代码的公布当中。咱们会看一个模型公布或者一份代码公布的老版本和新版本，他们产生的用户的行为的指标比照，看他们是不是统一。同样咱们的OLAP还用在了实时业务指标的告警，如果用户的点击率和用户的点赞数忽然有一个大幅的降落，也会触发咱们的实时的告警。小红书OLAP数据的规模在顶峰时候咱们大略每秒钟有35万条用户行为被记入咱们的实时计算当中。而后咱们大宽表大略有300个字段，而后咱们心愿可能放弃两周多大略15天左右的数据，因为咱们在做试验剖析的时候，常常须要看本周和上一周的数据的比照，而后咱们大略每天有近千次的查问。小红书+Hologres咱们在7月和阿里云的MaxComputer和Hologres进行了一个单干。Hologres其实是新一代的智能数仓的解决方案，它可能把实时和离线的计算都通过一站式的办法来解决。同时它的利用次要能够用在实时大屏、Tableau和数据迷信当中，咱们钻研下来是比拟适宜咱们的举荐场景的。小红书Hologres利用场景Hologres做的事件次要是对离线的数据进行了查问和减速，而后对离线的数据做表级别的交互查问响应，他就无须再做从离线把数据搬到实时数仓的这么一个工作，因为它都在外面了。整个实时数仓，它是通过搭建用户洞察体系，实时监控平台的用户数据，能够从不同的角度对用户进行实时诊断，这样能够帮忙施行精细化的经营。这个其实对于咱们用户大宽表来说也是一个非常适合的场景。而后它的实时离线的联邦计算能够基于实时计算引擎和离线数仓MaxCompute交互剖析，实时离线联邦查问，构筑全链路精细化经营。 Hologres VS Clickhouse 在和阿里云MaxCompute单干之前，咱们是自建了Clickhouse的集群，过后咱们也是一个很大规模的集群，一共用了1320个core，因为Clickhouse它不是一个计算存储拆散的计划，所以过后咱们为了节约老本，只寄存了7天的数据，而后因为Clickhouse对于用户试验tag这个场景其实没有很好的优化，所以说咱们过后查问超过三天的数据就会特地慢。因为是个OLAP场景，咱们心愿每次用户的查问能在两分钟之内出后果，所以是限度了咱们只能查过来三天的数据。同时另外还有一个问题就是Clickhouse对于组件的反对是有些问题的，所以咱们没有在Clickhouse集群下面配置组件，如果上游的数据流有些抖动，数据造成一些反复的状况下，上游的Clickhouse外面其实会有一些反复的数据。同时咱们也是派了专人去运维Clickhouse，而后咱们通过调研发现，Clickhouse如果你要做成集群版的话，它的运维老本还是很高的。所以咱们在7月份的时候和阿里云单干，把咱们举荐的一个最大的用户宽表迁徙到了MaxCompute和Hologres下面，而后咱们在Hologres下面一共是1200个core，因为它是计算存储的计划，所以1200个core就足够咱们应用了。然而咱们在存储的方面是有更大的需要的，咱们一共存了15天的数据，而后因为Hologres对于用户依据试验分组这个场景是做了一些比拟定制化的优化，所以说咱们当初能够轻松地查问7天到15天的数据，在这个依据实验组分组的场景上面，其查问的性能与Clickhouse相比是有大幅晋升的。Hologres它其实也反对Primary Key，所以咱们也是配置了Primary Key，咱们在这个场景上面是用了insert or ignore这个办法，而后因为配置了Primary Key，它就人造具备去重的性能，这样的话咱们上游只有保障at least once，上游的数据就不会有反复。而后因为咱们是放在阿里云下面，所以说是没有任何的运维的老本。原文链接本文为阿里云原创内容，未经容许不得转载。

关于css3:CSS实现两个元素相融效果粘滞效果

记得前几年手机版淘宝左下角有个狠有意思的圆形按钮，点击后会呈现几个小按钮，并且出场动画很有意思，前面才晓得这种成果叫“粘滞”成果，如图：那这种成果到底用了什么属性呢？答案是次要用了filter:blur()属性，及filter:contrast()属性配合 <style> body{ margin: 0; padding: 0; } .box{ position: relative; width: 500px; height: 500px; filter: contrast(20); /* 背景色肯定要为实底色，否则两个元素边缘会有含糊成果 */ background-color: #fff; } .circle-big{ position: absolute; top: 20px; left: 100px; width: 100px; height: 100px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toRight 3s ease-out infinite; background-color: #333; } .circle-small{ position: absolute; top: 35px; left: 220px; width: 60px; height: 60px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toLeft 3s ease-out infinite; background-color: #FFFC00; } @keyframes toRight{ 50%{ left: 150px; } } @keyframes toLeft{ 50%{ left: 150px; } }</style><div class="box"> <div class="circle-big"></div> <div class="circle-small"></div></div>最终成果如图： ...

关于css3:mPaaSRPC-拦截器各种场景下的使用指南

简介： RPC拦截器机制在preHandle、postHandle、exceptionHandle以及H5等场景中的利用 mPaaS 挪动网关服务（Mobile Gateway Service，简称 MGS）作为 mPaas 最重要的组件之一，连贯了挪动客户端与服务端，简化了挪动端与服务端的数据协定和通信协定，从而可能显著晋升开发效率和网络通讯效率。在咱们日常运维过程中发现，很多用户在应用客户端RPC组件的时候，有很多不同场景的诉求，比方拦挡申请增加业务申请标记，免登，返回后果模仿，异样解决，限流等。本文旨在介绍通过利用RPC提供的拦截器机制，通过不同理论场景的形容，供业务参考应用。 RPC调用原理当 App 在挪动网关控制台接入后盾服务后，调用RPC的示例代码如下： RpcDemoClient client = MPRpc.getRpcProxy(RpcDemoClient.class);_// 设置申请_GetIdGetReq req = new GetIdGetReq();req.id = "123";req.age = 14;req.isMale = true;_// 发动 rpc 申请_String response = client.getIdGet(req);值得好奇的是，整个调用过程中其实咱们并没有去实现 RpcDemoClient 这个接口，而是通过 MPRpc.getRpcProxy 获取了一个代理，通过代理对象实现了调用。在这里其实次要应用了 Java 动静代理的技术。如下图所示，当调用RPC接口的时候，会通过动静代理的RpcInvocationHandler，回调其实现的invoke办法，最终在invoke内实现数据的序列化解决最初通过网络库发到服务端。 public <T> T getRpcProxy(Class<T> clazz) { LogCatUtil.info("RpcFactory", "clazz=[" + clazz.getName() + "]"); return Proxy.newProxyInstance(clazz.getClassLoader(), new Class[]{clazz}, new RpcInvocationHandler(this.mConfig, clazz, this.mRpcInvoker)); }在业务开发中，如果在某些状况下须要管制客户端的网络申请（拦挡网络申请，禁止拜访某些接口，或者限流），能够通过 RPC 拦截器实现。 ...

关于css3:CSS选择器优先级

！important　在属性前面写上这条款式，会笼罩掉页面上任何地位定义的元素的款式。 2. 行内款式，在style属性外面写的款式。 3. id选择器 4. class选择器 5. 标签选择器 6. 通配符选择器* 7. 浏览器的自定义属性和继承

关于css3:css3入门

一、在html中如何引入css在style属性中间接填写css款式（行内款式、内联式）填写到<style></style>标签中（内嵌式）将css代码写入.css文件，在html文件中引入该文件（内部款式），与内嵌式优先级相当。链接式<link>属于html标签，加载html的同时加载.css文件导入式@import 是css提供的，在html加载实现后再加载.css文件二、.选择器2.1外围选择器标签选择器 h1{} 类选择器 .class{} id选择器#id {} 组合选择器 div.one,div.two{} 并且选择器 ul.nav{} 广泛选择器 *{} 2.2档次选择器父子选择器：.nav > li {} 后辈选择器 .nav li{} 下一个兄弟选择器： div.b_first + div.b_second{} 之后所有兄弟选择器： div.b_first ~ div.b_second{} 2.3伪类选择器:first-child:last-child:nth-child（参数）参数：数字、表达式（n+3，从n=0开始）、关键字（odd、even） :hover2.4伪元素选择器ul::after{ clear:"both"; content:""; display:"block" } 2.5属性选择器[name] 抉择具备name属性的元素[name=username] 抉择具备name属性，并且属性值为username的元素[name^=u] 抉择具备name属性，并且属性值以u结尾的元素[name$=u] 抉择具备name属性，并且属性值以u结尾的元素[name*=u] 抉择具备name属性，并且属性值中蕴含u的元素三、优先级特权 !important 权值 1000 style属性 100 #id 10 .class、伪类、属性 1 标签（元素）、伪元素程序四、盒子模型(针对于块元素探讨盒子模型) 4.1款式外边距 margin-top、margin-right、margin-bottom、margin-left margin:0 auto（盒子居中，前提是曾经设置width值）内边距 padding(-top/-right/-bottom/-left) 边框 border(-top/-right/-bottom/-left) borde（速写模式): border-widthborder-style :soliddotteddasheddouble border-color（上下左右、上右左下、高低右左) ...

关于css3:css多列瀑布流布局

一、效果图二、代码<!DOCTYPE html><html><head><style> /* https://www.cnblogs.com/bbc66/p/9434217.html */ html,body{ padding: 0;margin: 0; } .box { padding: 10px; /* display: flex; flex-flow:column wrap; */ /* height: 100vh; */ column-count:2; /*指定列宽*/ /* column-width:500px; */ /*指定列与列之间的间距*/ column-gap: 10px; /*指定列与列之间间隙的款式*/ /*column-rule:2px dotted red*/ /*绝对应上面的三个属性*/ /* column-rule-color:red; column-rule-style:dotted; column-rule-width:2px; */ } .item { /* margin: 10px; */ margin-bottom: 10px; /* width: calc(100%/3 - 20px); */ height:300px; } .item img{ width: 100%; height:100%; background: pink; }</style></head><body> <div class="box"> <div class="item" style="height: 200px;"> <img src="banner.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item" style="height: 120px;"> <img src="cloth.jpg" alt="" /> </div> <div class="item" style="height: 500px;"> <img src="banner.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="banner.jpg" alt="" /> </div> <div class="item" style="height: 100px;"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="banner.jpg" alt="" /> </div> </div></body>

关于css3:分布式锁在存储系统中的技术实践

简介：阿里云存储提供了残缺的分布式锁解决方案，通过了阿里云泛滥云产品贵重的业务场景中长期锻炼，稳固高牢靠，且提供了多种语言的SDK抉择，甚至是RESTful集成计划。 1 背景针对共享资源的互斥拜访从来是很多业务零碎须要解决的问题。在分布式系统中，通常会采纳分布式锁这一通用型解决方案。本文将就分布式锁的实现原理、技术选型以及阿里云存储的具体实际进行阐述。图1 锁 2 从单机锁到分布式锁在单机环境中，当共享资源本身无奈提供互斥能力的时候，为了避免多线程/多过程对共享资源的同时读写访问造成的数据毁坏，就须要一个第三方提供的互斥的能力，这里往往是内核或者提供互斥能力的类库，如下图所示，过程首先从内核/类库获取一把互斥锁，拿到锁的过程就能够排他性的访问共享资源。演变到分布式环境，咱们就须要一个提供同样性能的分布式服务，不同的机器通过该服务获取一把锁，获取到锁的机器就能够排他性的访问共享资源，这样的服务咱们统称为分布式锁服务，锁也就叫分布式锁。图2 单机锁到分布式锁由此形象一下分布式锁的概念，首先分布式锁须要是一个资源，这个资源可能提供并发管制，并输入一个排他性的状态，也就是：锁 = 资源 + 并发管制 + 所有权展现以常见的单机锁为例： Spinlock = BOOL + CAS （乐观锁） Mutex = BOOL + CAS + 告诉（乐观锁） Spinlock和Mutex都是一个Bool资源，通过原子的CAS指令：当当初为0设置为1，胜利的话持有锁，失败的话不持有锁，如果不提供所有权的展现，例如AtomicInteger，也是通过资源（Interger）+CAS，然而不会明确的提醒所有权，因而不会被视为一种锁，当然，能够将“所有权展现”这个更多地视为某种服务提供模式的包装。单机环境下，内核具备“上帝视角”，可能晓得过程的存活，当过程挂掉的时候能够将该过程持有的锁资源开释，但倒退到分布式环境，这就变成了一个挑战，为了应答各种机器故障、宕机等，就须要给锁提供了一个新的个性：可用性。如下图所示，任何提供三个个性的服务都能够提供分布式锁的能力，资源能够是文件、KV等，通过创立文件、KV等原子操作，通过创立胜利的后果来表明所有权的归属，同时通过TTL或者会话来保障锁的可用性。图3 分布式锁的个性和实现 3 分布式锁的系统分类依据锁资源自身的安全性，咱们将分布式锁分为两个营垒： A：基于异步复制的分布式系统，例如mysql，tair，redis等； B：基于paxos协定的分布式一致性零碎，例如zookeeper，etcd，consul等；基于异步复制的分布式系统，存在数据失落（丢锁）的危险，不够平安，往往通过TTL的机制承当细粒度的锁服务，该零碎接入简略，实用于对工夫很敏感，冀望设置一个较短的有效期，执行短期工作，丢锁对业务影响绝对可控的服务。基于paxos协定的分布式系统，通过一致性协定保证数据的多正本，数据安全性高，往往通过租约（会话）的机制承当粗粒度的锁服务，该零碎须要肯定的门槛，实用于对安全性很敏感，心愿长期持有锁，不冀望产生丢锁景象的服务。 4 阿里云存储分布式锁阿里云存储在长期的实际过程中，在如何晋升分布式锁应用时的正确性、保障锁的可用性以及晋升锁的切换效率方面积攒比拟多的教训。 4.1 严格互斥性互斥性作为分布式锁最根本的要求，对用户而言就是不能呈现“一锁多占”，那么存储分布式锁是如何防止该状况的呢？答案是，服务端每把锁都和惟一的会话绑定，客户端通过定期发送心跳来保障会话的有效性，也就保障了锁的拥有权。当心跳不能维持时，会话连同关联的锁节点都会被开释，锁节点就能够被从新抢占。这里有一个要害的中央，就是如何保障客户端和服务端的同步，在服务端会话过期的时候，客户端也能感知，如下图所示，在客户端和服务端都保护了会话的有效期的工夫，客户端从心跳发送时刻（S0）开始计时，服务端从收到申请（S1）开始计时，这样就能保障客户端会先于服务端过期。用户在创立锁之后，外围工作线程在进行外围操作之前能够判断是否有足够的有效期，同时咱们不再依赖墙上工夫，而是基于零碎时钟来对工夫进行判断，零碎时钟更加准确，且不会向前或者向后挪动（秒级别误差毫秒级，同时在NTP跳变的场景，最多会批改时钟的速率）。图4 存储场景的应用形式在分布式锁互斥性上，咱们是不是做到完满了？并非如此，还是存在一种状况下业务基于分布式锁服务的拜访互斥会被毁坏。咱们来看上面的例子：如下图9所示，客户端在工夫点S0尝试去抢锁，在工夫点S1在后端抢锁胜利，因而也产生了一个分布式锁的有效期窗口。在有效期内，工夫点S2做了一个拜访存储的操作，很快实现，而后在工夫点S3判断锁的有效期仍旧成立，继续执行拜访存储操作，后果这个操作耗时好久，超过了分布式锁的过期工夫，那么可能这个时候，分布式锁曾经被其余客户端抢占胜利，进而呈现两个客户端同时操作同一批数据的可能性，这种可能性是存在的，尽管概率很小。图6 越界场景针对这个场景，具体的应答计划是在操作数据的时候确保有足够的锁有效期窗口，当然如果业务自身提供回滚机制的话，那么计划就更加齐备，该计划也在存储产品应用分布式锁的过程中被采纳。还有一个更佳的计划，即，存储系统自身引入IO Fence能力。这里就不得不提Martin Kleppmann和redis的作者antirez之间的探讨了，redis为了避免异步复制导致的锁失落的问题，引入redlock，该计划引入了多数派的机制，须要取得多数派的锁，最大水平的保障了可用性和正确性，但依然有两个问题： • 墙上工夫的不牢靠（NTP工夫） • 异构零碎的无奈做到严格正确性墙上工夫能够通过非墙上工夫MonoticTime来解决（redis目前依然依赖墙上工夫），然而异构零碎的只有一个零碎并没有方法保障完全正确，如下图10所示，Client1获取了锁，在操作数据的时候产生了GC，在GC实现时候失落了锁的所有权，造成了数据不统一。 ...

关于css3:CSS水平垂直居中布局方案概述述

在前端开发中，通过CSS实现布局容器的居中，也有诸多办法形式，当然也是CSS面试题中的经典面试题，在本文章中会零碎的剖析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中成果。在传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性来实现根本布局，包含本文章的居中排列。 **你可能须要CSDN网易云课堂教程掘金EDU学院教程知乎Flutter系列文章本文章首发于微信公众号（biglead）我的大前端生涯，同步登载各技术论坛。 1 Flexbox中实现程度垂直居中1.1 Flexible Box 的简述在2009年，W3C提出出的 Flex 布局计划，Flex是Flexible Box的缩写，可意为”弹性布局”，任何一个容器都能够指定为Flex布局，可用来为盒状模型提供最大的灵活性。采纳Flex布局的元素，称为Flex容器（flex container），以下称为 Flexbox ，Flex容器中的所有子元素称为Flex我的项目（flex item）。任何一个容器都能够指定为Flex布局，如下所示： .box{ display: flex;}或者是 .box{ display: inline-flex;}可点击这里查看 CSS中flex和inline-flex的区别 Flexbox 默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做main start，完结地位叫做main end；穿插轴的开始地位叫做cross start，完结地位叫做cross end，如下图所示： 1.2 Flexible Box 中子 Item的居中对齐在Flexbox布局模块中，使其子 Item (flex item) 居中对齐（程度方向与竖直方向全副居中），如下图 1-1 所示成果： 1.2.1 实现形式一只设置 Flex容器的属性如图 1-1 中所示的成果，只须要在Flex容器上设置justify-content、align-items的值为center时，能够让元素在Flex容器中达到程度垂直居中的成果，如下代码清单1-2所示： /*代码清单1-2*/<div class="flex__container"> <div class="flex__item"></div></div> /*Flex 容器*/ .flex__container { display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 100px; height: 100px; background-color: aqua; }justify-content 用来设置程度居中，如下图1-3所示：align-items 用来限度竖直居中，如下图1-4所示： ...

关于css3:实现盒子居中

一、规范流下的盒子程度居中只对块级元素起作用 margin : 0 auto ; 二、相对定位的盒子程度、竖直居中 1.通过具体的计算,让盒子居中 position : absolute ; /* 挪动父元素宽度的一半 */ left : 50% ; top : 50% ; /* 挪动的是元素自身本人的一半 */ margin-left : -60px ; margin-top : -25px ; 2.不必具体计算的居中position : absolute ; left : 0 ; top : 0 ; right : 0 ; bottom : 0 ; 3.2D位移形式实现定位元素居中 position : absolute ; left : 50% ; top : 50% ; ...

关于css3:css3实现灰白间隔斜角背景图

效果图代码background: repeating-linear-gradient(-35deg, #fff 0, #fff 1%, gray 1%, gray 2%);

关于css3:CSS-display的多种写法

CSS display的多种写法本文将介绍如何通过定义display属性创立一个 CSS formatting box display属性值先来看规范文档是怎么形容的吧从大的分类来讲，display能够分为6个大类: display-outside所谓display-outside，就是说这些值只会间接影响一个元素的内部体现，而不影响元素外面的儿子级孙子级元素的体现。 display: block：定义最根本的block-level display: inline：定义最根本的的inline-level display: run-in：会依据前面的元素进行转换display为inline | inlin-block | block。如果它后一个元素是block，那么它会变成inline并且神奇的是它会和后一个元素并排。如果它后一个元素是inline那么它会变成block。不过很遗憾，Chrome从32版本开始将这个属性移除了。想要理解其实现成果，能够参考规范文档 https://www.w3.org/TR/css-dis... 想要理解为什么chrome不反对这个属性，能够浏览 display-run-in-dropped-in-chrome display-insidedisplay-inside 艰深地讲，次要是用来管教本人上司的儿子级元素的排布的，规定它们的布局。 display: flow：处于试验阶段的一个属性值，渲染成哪个盒子与内部元素的显示类型无关。 If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.display: flow-root: 能够让元素块状化，同时蕴含格式化上下文BFC，能够用来革除浮动，去除margin合并，实现两栏自适应布局等。 <div class="box"> <img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832"> <p class="flow-root">zhaodao88.com</p></div><style> img { float: left; width: 50px; margin-right: 10px; } .flow-root { display: flow-root; background-color: #f0f3f9; padding: 10px; }</style> ...

关于css3:CSS-Sprites

CSS Sprites在国内很多人叫css精灵，是一种网页图片利用解决形式。它容许你将一个页面波及到的所有零星图片都蕴含到一张大图中去，这样一来，当拜访该页面时，载入的图片就不会像以前那样一幅一幅地缓缓显示进去了。利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position能够用数字准确的定位出背景图片的地位。长处: (1)利用CSS Sprites能很好地缩小网页的http申请，从而大大的进步页面的性能，这也是CSS Sprites最大的长处，也是其被广泛传播和利用的次要起因； (2)CSS Sprites能缩小图片的字节，如果屡次用3张图片合并成1张图片的字节和这3张图片的字节总和,相比拟,后果总是前者较小. (3)解决了网页设计师在图片命名上的困扰，只需对一张汇合的图片上命名就能够了，不须要对每一个小元素进行命名，从而进步了网页的制作效率。 (4)更换格调不便，只须要在一张或少张图片上批改图片的色彩或款式，整个网页的格调就能够扭转。保护起来更加不便。毛病（1）图片合并麻烦：图片合并时，须要把多张图片有序的正当的合并成一张图片，并留好足够的空间避免版块呈现不必要的背景。（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会呈现背景断裂。（3）图片定位繁琐：开发时须要通过工具测量计算每个背景单元的准确地位。（4）可维护性差：页面背景须要少许改变，可能要批改局部或整张已合并的图片，进而要改变css。在防止改变图片的前提下，又只能（最好）往下追加图片，但这样减少了图片字节。

关于css3:每天一个小技巧CSS-clippath-的妙用

CSS 的 clip-path 属性是 clip 属性的升级版，它们的作用都是对元素进行 “剪裁”，不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形，而 clip-path 更加弱小，能够以任意形态去裁剪元素，且对元素的定位形式没有要求。基于这样的个性，clip-path 罕用于实现一些炫酷的动画成果。比方：视差广告成果：实现请参考：CodePen 菜单栏弹出成果：实现请参考：CodePen Clip Path分类clip-path 有几大类，别离为： basic-shape: 根本图形，包含 inset()、circle()、ellipse()、polygon()clip-source: 通过 url() 办法援用一段 SVG 的 <clipPath> 来作为剪裁门路geometry-box: 独自应用时会将指定框的边缘作为剪裁门路，或者配合 basic-shape 应用，用于定义剪裁的参考框（Reference Box）（因为该属性浏览器反对度比拟低，本文暂不探讨）一、Basic Shape1. Insetinset() 用于定义一个插进的矩形，即被剪裁元素外部的一块矩形区域。参数类型：inset( <shape-arg>{1,4} [round <border-radius>]? )其中 shape-arg 别离为矩形的上右下左顶点到被剪裁元素边缘的间隔（和margin、padding参数相似），border-radius 为可选参数，用于定义 border 的圆角。 DEMO: html: <img class="img inset" src="http://source.unsplash.com/random/1000x1000" />css: .inset { clip-path: inset(0); &:active { clip-path: inset(100px 200px 10% 20% round 20px); }} ...

敲好用的伪类选择器-focuswithin

伪类选择器focus-within，它示意一个元素取得焦点，或，该元素的后辈元素取得焦点。划重点，它或它的后辈取得焦点。这也就意味着，它或它的后辈取得焦点，都能够触发 :focus-within。代码示例： //html<div class="container" tabindex="0"> <label for="text">Enter text</label> <input id="text" type="text" /> </div>//css.container:focus-within { background-color: #aaa; }上面是演示动画：包裹input元素的父元素，在Input被抉择时，款式也产生了扭转：它或它的后辈取得焦点，这一点使得让感知获焦区域变得更大，所以，最惯例的用法就是应用 :focus-within 感应用户操作聚焦区域，高亮揭示。

利用transform实现一个纯CSS弹出菜单

前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，新近的做法是用jQuery的来管制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这所有都变得异样简略先上成果制作方法外围就是利用了transform的区域位移办法，在配合上li标签的hover伪类和动画延时，从而简略实现了子菜单的显示 <nav> <ul> <li> <strong>home</strong> <div> <a href="">cms</a> <a href="">crm</a> </div> </li> <li> <strong>live</strong> <div> <a href="">java</a> <a href="">php</a> </div> </li> <li> <strong>pictrue</strong> <div> <a href="">mm</a> <a href="">dd</a> </div> </li> </ul></nav> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } nav{ margin: 10px; } nav ul { list-style-type: none; height: 32px; display: flex; } nav ul li{ margin-right: 10px; } nav ul li strong{ text-transform: uppercase; background-color: #9b59b6; color: white; padding: 5px 30px; line-height: 30px; cursor: pointer; } nav ul li strong+div{ display: flex; flex-direction: column; background-color: #3498db; padding: 10px; transform: translateY(-110%); opacity: 0; transition: .3s; transform-origin: top; } nav ul li:hover div{ transform: translateY(0); opacity: 1; } nav ul li strong+div a{ color: white; text-decoration: none; text-transform: uppercase; padding: 5px 0; }

css-实现直角三角形

支流浏览器根本都反对 <div class="triangle"></div>.triangle{ height: 200px; width: 200px; background-image: linear-gradient(to bottom right,red 50%, transparent 50%);}

Flex布局中子元素的最终宽度计算

之前有个共事布局时十分喜爱用flex布局，能用flex的他都用flex了，并且他在用flex布局的时候还总喜爱偏门布局，让人很难捉摸到元素的最终宽度，比方： .box{ display: flex; width: 600px; height: 300px;}.box .left { flex: 1 1 0; background: red;}.box .right { flex: 2 2 0; background: blue;}如上布局你能计算的出.left、'.right'两个子元素的高度吗？如果你还不晓得怎么计算，看我这篇文章你就会了。依据 flex-grow(扩张) 计算元素宽度.box{ display: flex; width: 600px; height: 300px;}.box .left { flex: 1 1 200px; background: red;}.box .right { flex: 2 1 300px; background: blue;}依据flex-grow计算元素宽度首先须要计算出：残余空间、扩张比总和残余空间：600 - (200 + 300) = 100扩张比总和：1 + 2 = 3每份扩张所占宽度：100 / 3 ≈ 33.33 因而两个子元素的宽度为：.left：300 + (1 * 33.33) = 333.33.right：200 + (2 * 33.33) = 266.67 ...

pointerevents-none的效果

整理自gitHub笔记：CSS3：pointer-events: none;的效果一、背景项目中要实现长按图片触发分享弹窗的功能，测试的时候发现长按图片会触发系统的弹窗（保存图片，分享图片等）。如何禁止系统的行为呢？bing了一下发现pointer-events: none;可以解决问题。二、细说pointer-events: none;2.1 语法pointer-events: none;表示元素不会对mouse/touch相关事件作出响应。 2.2 pointer-events: none;的效果1. 不会触发鼠标相关的事件，以及相关的hover效果clicktouchStarttouchMovetouchEndmouseMovemouseOvermouseLeavedrag相关事件2. 不影响事件冒泡、捕获，只是影响事件处理阶段inner元素被pointer-events: none;。点击inner元素虽然其不触发点击事件，但是其父元素outer会触发点击事件。 3. 穿透效果Front元素被pointer-events: none;。点击Front元素虽然其不触发点击事件，但是其Z轴底部的元素Backend会触发点击事件。也不影响Z轴底部的文本选择。穿透效果应用场景：日期选择组件的渐变效果上下两端的渐变效果一般使用伪元素覆盖上面，为了不影响滑动选择日期，可以给伪元素添加pointer-events: none;。4. 移动端禁止长按图片的系统弹窗5. 应用在a标签上可以禁止hover效果，跳转。参考CSS-TRICKS pointer-eventsCSS3 pointer-events:none应用举例及扩展

前端面试每日-31-第442天

今天的知识点 (2020.07.01) —— 第442天 (我也要出题)[html] 开发静态页面时，不依赖node相关的工具，如何提取出公共部分并引入？[css] 使用css3画个旋转的立方体[js] 一道变态题 Number.call.call(Number, undefined, 0) 等于什么？[软技能] 你喜欢在大城市工作还是小城市？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！欢迎在 Issues 和朋友们一同讨论学习！项目地址：前端面试每日3+1【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star]

一文汇总-CSS-两列布局和三列布局

前言随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。两列布局左列定宽，右列自适应 float + margin 布局html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>css 代码： #left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { margin-left: 200px; /* 大于或等于左列的宽度 */ height: 400px; background-color: lightgreen;}float + overflow 布局html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>css 代码 #left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { overflow: hidden; height: 400px; background-color: lightgreen;}绝对定位布局html 代码： ...

用CSS绘制我的世界暮色森林中的遗迹石方块纹理

原文地址：https://segmentfault.com/a/1190000022984416作者：Fw恶龙本文首发于：思否前言：在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化（如：平移、旋转）得到的，通常的做法是裁剪一块可重复的图片，设置为背景图即可，随着CSS3的普及，linear-gradient和radial-gradient属性已经得到了较好的支持，通过这两个属性可以很好的模拟许多背景纹理，如：条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代图片的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理，当时打牛头人时一直觉得这个纹理很好看（下图），于是尝试下用CSS来绘制这个纹理。一、分析纹理可以发现这个纹理的最小单元是下图，通过旋转三次可以得到一个地砖纹理。二、绘制纹理单元如果细分的话其实可以把这个单元继续拆分一半，旋转180度也可以得到目前的最小单元，就不搞这么复杂了。目前的最小单元是8*8的单元格，先考虑绘制第一行。 <div class="item"></div>由于定位图片地址有较多计算，以下用到stylus预处理器，也方便纹理颜色调整。 bp($w) $s = '' for i in (1..8) if(i != 8) $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ',' else $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) return unquote($s) .item $c1 = #738073 background-color $c1 $c2 = #747475 $w = 100px width $w height $w background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%) background-size $w 0.125*$w background-position bp($w) background-repeat no-repeat剩下的7行同理可得： ...

日常开发中一些常用的工具

收集了一些工作中常用的工具。如果你有好用的工具或者有意思的工具网站，要留言哦！图片在线图片压缩 | 在线图片压缩生成随机图片移除图片背景开发地图数据在线写代码各种库的在线CDN地址JavaScript API 在线兼容性查询在线工具网站在线短连接生成常用移动设备尺寸CSS在线三角代码生成器 | CSS在线三角代码生成器CSS在线生成渐变色在线编写代码(Vue,React,Angular,TypeScript)在线网站性能分析前端助手FeHelper(浏览器插件)画流程图画图1 | 画图2 | 画图3 | 画图4 | 画图5其他在线生成Logo | 在线生成Logo录制gif图给gif图加文字在线生成Markdown表格在线PDF转换支持多种格式一键下载网站所有图片&在线图片编辑在线图片编辑loading动画 | loading动画CSS制作loading加载动画在线格式转化(支持200+文件格式)在线生成二维码整理了学习资料以及学习视频，送给小伙伴们。公号内回复【学习资料】自行领取。和一些小伙伴们建了一个技术交流群，一起探讨技术、分享技术资料，旨在共同学习进步，如果感兴趣就扫码加入我们吧！

CSS3自定义滚动条样式-webkitscrollbar

windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下CSS3，还真能不用插件实现自定义滚动条的样式，正合我意代码如下： /定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; } /定义滚动条轨道内阴影+圆角/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #FFF; } /定义滑块内阴影+圆角/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #AAA; } 具体含义及其他设置项：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start { /滚动条上半边或左半边/ } ::-webkit-scrollbar-thumb:window-inactive { /当焦点不在当前区域滑块的状态/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /当鼠标在水平滚动条下面的按钮上的状态/ }

CSS-创意

背景本人一直对 CSS 很感兴趣，刚好我们团队有一位擅长CSS的大佬：COCO。于是我找到他，建议做一期关于CSS的分享，于是就有了《CSS创意构想》。分享的内容很棒，里面有很多技巧，有的很实用，有的很华丽。听完之后，我觉得十分受用，就想结合自己的一些理解，再次整理一番，加深印象，二次吸收，所以就有了今天的文章。满满的干货，也分享给大家，希望对大家有所启发。布局平行四边形先抛一个问题，如何实现平行四边形布局效果? transform ？叠加三角形？仅仅实现形状的话，上面两种方式都是可以的。但是，如果图形内部还有文字，需要正常排布，transform 、叠加三角形都不可行。那怎么办呢？答案就是： shape-outside. shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行排版clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域clip-path 语法： { clip-path: circle(50px at 0 100px); clip-path: ellipse(); clip-path: inset(10px 10px 10px 10px); clip-path: polygon(10px 10px, 20px 20px, 30px 30px);}图文混排 Demo:https://codepen.io/Chokcoco/p... CSS Shapes Demo：https://codepen.io/Chokcoco/p... 一个适用的场景：适配 iPhone X刘海头镂空使用阴影，可以非常简单的模拟遮罩效果，并且，圆角也是没有问题的。 box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); ...

Flex布局与缩放比例计算

一、Flex 布局简介Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，也就是说，行内元素也可以设置成Flex 布局。 // 将块级元素div设置为flex布局div { display: flex;}// 将行内元素span设置为flex布局span { display: flex;}采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。二、Flex布局的默认特性默认情况下，容器中的所有子元素都将进行水平排列，类似于强制进行了一个左浮动，所以容器子元素的float和clear属性会失效。同时，容器中的子元素的对齐方式将不受vertical-align控制，即vertical-align也会失效。 <style>#main{ width:800px; height:300px; display:flex; font-size: 20px; background: red;}</style><div id="main"> <div style="background-color:coral;" class="item-1">红色</div> <div style="background-color:lightblue;" class="item-2">蓝色</div> <div style="background-color:lightgreen;" class="item-3">带有更多内容的绿色啊</div></div>① 在没有给容器设置垂直方向对齐方式同时容器子元素也没有设置高度，那么容器子元素的高度是和容器的高度是一样的，如上，容器中所有的子元素的高度都会变为300px。 ② 默认情况下，容器下的子元素的宽度是不会自动放大的，即默认以元素自身的实际宽度显示。如图所示: ③ 默认情况下，容器下的子元素的宽度是可以缩小的，当容器中所有子元素的宽度之和超过了容器的宽度，默认不会换行显示，那么就需要缩小容器子元素的宽度以保证容器能够容纳下所有的子元素。但容器子元素的宽度并不是无限缩小的，即缩小到不能缩小为止。 .item-1 { width: 200px;}.item-2 { width: 8800px;}.item-3 { width: 8800px;}比如上面，item2、item3宽度设置成了8800px，容器中所有子元素的宽度和为17800px，远远超出了容器的宽度800px，所以容器中的所有子元素必须按比例压缩，item1元素的宽度应变为200 - 191.01 = 8.99px，而item1最小被压缩为存放一个字所需要的宽度，即刚好等于字体的大小，即20px，所以item1的宽度将变为20px。 ④ 默认情况下，容器中的子元素可以被压缩到最小为止，但是当压缩到最小后仍然放不下所有的子元素，那么子元素就会被放到容器的外面。⑤ 如果给容器添加一个垂直方向的对齐方式，那么容器中所有子元素的高度将变为实际的高度，不会与容器等高。 #main{ width:800px; height:300px; display:flex; font-size: 20px; background: red; align-items: flex-start;/*添加垂直方向对齐方式*/} ...

灵活运用CSS开发技巧66个实用技巧值得收藏

前言何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。目录既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。 Layout Skill：布局技巧Behavior Skill：行为技巧Color Skill：色彩技巧Figure Skill：图形技巧Component Skill：组件技巧备注代码只作演示用途，不会详细说明语法部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步Layout Skill使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制场景：rem页面布局(不兼容低版本移动端系统)兼容：vw、calc())/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}使用:nth-child()选择指定元素要点：通过:nth-child()筛选指定的元素设置样式场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)兼容：:nth-child())代码：在线演示使用writing-mode排版竖文要点：通过writing-mode调整文本排版方向场景：竖行文字、文言文、诗词兼容：writing-mode代码：在线演示使用text-align-last对齐两端文本要点：通过text-align-last:justify设置文本两端对齐场景：未知字数中文对齐兼容：text-align-last代码：在线演示使用:not()去除无用属性要点：通过:not()排除指定元素不使用设置样式场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)兼容：:not())代码：在线演示使用object-fit规定图像尺寸要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸场景：图片尺寸自适应兼容：object-fit代码：在线演示使用overflow-x排版横向列表要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看场景：横向滚动列表、元素过多但位置有限的导航栏兼容：overflow-x代码：在线演示使用text-overflow控制文本溢出要点：通过text-overflow:ellipsis对溢出的文本在末端添加...场景：单行文字溢出、多行文字溢出兼容：text-overflow、line-clamp、box-orient代码：在线演示使用transform描绘1px边框要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框场景：容器1px边框兼容：transform代码：在线演示使用transform翻转内容要点：通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)场景：内容翻转兼容：transform代码：在线演示使用letter-spacing排版倒序文本要点：通过letter-spacing设置负值字体间距将文本倒序场景：文言文、诗词兼容：letter-spacing代码：在线演示使用margin-left排版左重右轻列表要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐场景：右侧带图标的导航栏兼容：margin代码：在线演示 Behavior Skill使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度场景：iOS页面滚动兼容：iOS自带-webkit-overflow-scrollingbody { -webkit-overflow-scrolling: touch;}.elem { overflow: auto;}使用transform启动GPU硬件加速要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题场景：动画元素(绝对定位、同级中超过6个以上使用动画)兼容：transform.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */}使用attr()抓取data-*要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上场景：提示框兼容：data-*、attr())代码：在线演示使用:valid和:invalid校验表单要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容场景：表单校验兼容：pattern、:valid、:invalid代码：在线演示使用pointer-events禁用事件触发要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)兼容：pointer-events代码：在线演示使用+或~美化选项框要点：<label>使用+或~配合for绑定radio或checkbox的选择行为场景：选项框美化、选中项增加选中样式兼容：+、~代码：在线演示使用:focus-within分发冒泡响应要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式场景：登录注册弹框、表单校验、离屏导航、导航切换兼容：:focus-within、:placeholder-shown代码：在线演示使用:hover描绘鼠标跟随要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹场景：鼠标跟随轨迹、水波纹、怪圈兼容：:hover代码：在线演示使用max-height切换自动高度要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换场景：隐藏式子导航栏、悬浮式折叠面板兼容：max-height代码：在线演示使用transform模拟视差滚动要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影兼容：background-attachment、transform代码：在线演示使用animation-delay保留动画起始帧要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行场景：开场动画兼容：transform、animation代码：在线演示使用resize拉伸分栏要点：通过resize设置横向自由拉伸来调整目标元素的宽度场景：富文本编辑器、分栏阅读兼容：resize代码：在线演示 Color Skill使用color改变边框颜色要点：border没有定义border-color时，设置color后，border-color会被定义成color场景：边框颜色与文字颜色相同兼容：color.elem { border: 1px solid; color: #f66;} 使用filter开启悼念模式要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们场景：网站悼念兼容：filter代码：在线演示使用::selection改变文本选择颜色要点：通过::selection根据主题颜色自定义文本选择颜色场景：主题化兼容：::selection代码：在线演示 ...

简历所用代码

用CSS新属性实现特殊的图片显示效果

1 概述1.1 前言使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。详细代码及英文原文请访问Bennett Feely的主页。 2 效果列表2.1 铅笔画效果效果示例 SCSS代码.pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; }}查看示例程序 2.2 水彩效果效果示例 SCSS代码.watercolor-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(2px)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; } &:after { background-image: $url; background-position: center; mix-blend-mode: multiply; filter: brightness(1.3) blur(2px) contrast(2); } }}查看示例程序 ...

Columns多栏布局妙用解决用jspdf加html2canvas生成PDF时文字或图片被分页无情截断问题

前言生成PDF有很多种方案，现在只讨论用jspdf加html2canvas生成多页PDF时，相信用过的人也遇到如果文字或图片卡在分页位置处被无情裁断的问题。再次之前先简单介绍下我们用于解决问题的属性。 Columns 属性介绍columns:100px 3; //每列多少宽度分多少列也就是：column-count:3 // 分多少列column-width: 100px //每列多少宽度 column-fill: auto; //列排序充列 //默认是balance 就是代表尽量平均的内容； auto会设置成填满往后铺 column-gap:40px; //设置列之间的间隔column-rule:4px outset #ff6430; //列与列之间的分隔线宽度线类型颜色也就是：column-rule-width //列与列之间的分隔线宽度column-rule-style //列与列之间的分隔线类型column-rule-color //列与列之间的分隔线颜色 column-count:3; //分成多少列column-fill: auto; //列排序充列默认是balance 就是代表尽量平均的内容； auto会设置成填满往后铺 column-gap:40px; //列与列之间的距离column-rule:4px outset #ff6430; // 列与列之间的分隔线在线写html 可以过去试试：https://www.runoob.com/try/tr... 浏览器的兼容兼容截止我编写时间2019.09.07 实际应用：好，现在重新回到我们的问题。这个问题是很正常的，事关我们是用画布截图然后放进去PDF里面，而画布只会根据高度够了就截一张，它是不会去监控那个问题是不是刚好卡在字体或图片的中间呢~ 例如：我前阵子也遇到相同的问题，我这边的解决方法是，舍弃截图从上往下截的截图：方案：改用在排版时就已经分页排版好，除了封面外，其它时间页头页脚浮动是页面上方，截图是一页一页的截，这样好处是前端能清晰掌握整个过程和排版甚至是分页的计算。【采用】那么如果能解决按每页的排呢？？？条件发射解决方法：循环页面元素，计算该元素是否刚好卡在一页的高度位置，如果是，那么我们把它后面的就不显示了，或者插入个分页结束符等；很明显这个是行不通的。一方面是：因为整个document下来元素很多大量循环所有的元素来监控也很不科学；另一方面：现在这种基于dom结构渲染完了，生插一个标签的结束符。例如</div>这种，也是算不清有多少个种类不同的结束符；所以这很明显是个错误示范我们停止对于这边的思考。 ...

前端面试每日-31-第127天

今天的知识点 (2019.08.21) —— 第127天[html] html的button中的reset有什么作用？[css] 说说你对min-width和max-width的理解，它们有什么运用场景？[js] JavaScript有几种类型值？能否画出它们的内存图？[软技能] 说说你对移动端和web前端开发的主要区别是什么？项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎分享！项目地址：前端面试每日3+1

基于原生JS验证表单组件xyform

原生form表单form表单元素大家可能都用到过，除了可以提交表单外，还有一些内置的表单校验，比如require、minlength、maxlength，还有各种类型的input，比如type=email可以校验是否是邮箱类型，如果不满足还可以使用pattern进行正则校验。原生的表单验证大概如下虽然丑陋，功能却很强大，基本可以满足一般的需求，不过ui终究过于原生，而且也不方便自定义，所以很多情况下这种默认的表单验证并不使用。下面来看看xy-form下的效果结构基本和原生类似，也不需要额外的js逻辑可以说丑小鸭立马变成白天鹅了。 xy-formxy-form是xy-ui新增了一类组件，主要用于表单提交和表单验证，完全可以取代原生form表单，下面简单介绍一下主要属性和方法，建议阅读在线文档，可以实时交互。使用方式使用方式很简单 npmnpm i xy-uicdn<script type="module" src="https://unpkg.com/xy-ui/components/xy-form.js"></script><script type="module"> import 'https://unpkg.com/xy-ui/components/xy-form.js'</script>或者直接从github拷贝源码。<script type="module" src='./node_modules/xy-ui/components/xy-form.js'></script><script type="module"> import './node_modules/xy-ui/components/xy-form.js';</script>使用 <xy-form> ...</xy-form>表单默认行为属性xy-form内置了以下属性，基于html5规范。这里的默认行为指的是，点击submit按钮或者回车，表单首先对表单元素进行格式校验，如果有误则会将有误的地方标识出来，全部正确后才能进行提交。表单地址action值为URL，规定向何处发送表单数据。回车键会触发表单。请求方式method规定请求方式，默认为get,可选post。验证novalidate如果使用该属性，则提交表单时不进行验证。方法提交submit当表单内包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。可通过form.submit()主动触发。清空reset当表单内包含htmltype="reset"的按钮时，点击该按钮可以清空表单。可通过form.reset()主动触发。下面是一个最账号密码的登录框 <xy-form action="/login" method="post"> <xy-form-item legend="user"> <xy-input name="user" required placeholder="user"></xy-input> </xy-form-item> <xy-form-item legend="password"> <xy-input name="password" required type="password" placeholder="password" minlength="6"></xy-input> </xy-form-item> <xy-form-item> <xy-button type="primary" htmltype="submit">login</xy-button> <xy-button htmltype="reset">reset</xy-button> </xy-form-item></xy-form>渲染如下首先输入框均设置了required属性，表示必填项，如果不输入在submit时会提示以下信息其次，密码框规定了minlength属性，表示最小字符长度，如果不满足格式，会提示以下信息当全部满足要求才能进行提交，可在控制台查看提交的表单数据，格式为formData，可转换json。自定义表单自定义表单提交当表单带有action属性时，回车键可以触发表单提交，如果包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。如果想手动通过ajax提交，可以去除action属性，这样就不会触发默认表单提交效果了。可通过form.formdata获取表单的值。 sumbitBtn.onclick = function(){ fetch('/login', { method: 'POST', body: form.formdata, }) .then(function(data){ // })}自定义表单验证默认情况下，如果验证失败，表单则不会提交。 ...

前端面试每日-31-第125天

今天的知识点 (2019.08.19) —— 第125天[html] 举例说明table怎么合并行和列的？[css] 使用纯CSS代码实现动画的暂停与播放[js] 你有用过webRTC吗？它有什么运用场景？[软技能] 说说你对Web App 、Hybrid App和Native App这三者的理解？项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎分享！项目地址：前端面试每日3+1

前端面试每日31周汇总20190818

《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目地址： https://github.com/haizlin/fe... 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）htmlHTML5规范将元素分为哪几个大类？分别说说它们的特点使用canvas画出一个矩形说说form-data、x-www-form-urlencoded、raw、binary的区别是什么？请描述下application cache的更新过程？你知道富文本编辑器的实现原理吗？说说你对富文本的理解，你有用过哪些富文本编辑器呢？有使用过HTML5的跟踪元素吗？说说你对它的理解css举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？什么是zoom？它有什么作用？举例说明微信端兼容问题有哪些？请举例说明伪元素 (pseudo-elements) 有哪些用途？设置字体时为什么建议设置替换字体？你有没有自己写过一套UI库？说下遇到哪些难点？说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？js如何实现文件拖动上传？分析('b' + 'a' + +'a' + 'a').toLowerCase()返回的结果能否正确获取本地上传的文件路径？如果可以怎么做？如果不可以解释下为什么？请说说escape、encodeURI、decodeURI、encodeURIComponent和decodeURIComponent的区别？如何终止WebWork？写一个方法把多维数组降维使用正则去掉html中标签与标签之间的空格软技能你有开发过弹幕吗？知道它的原理吗？说说看你了解雅虎前端优化的35条军规吗？你能说上几条？如果一个项目要你重构成前后端分离，你的方法论是什么？用哪种格式可以存储包含Alpha通道的图像？Alpha通道是指什么？你有签过保密协议吗？说说你对保密协议的理解你对jsfuck有了解吗？它的原理是什么？请举例说明你有做过骨架屏吗？它的原理是什么知道吗？全部所有交流讨论项目地址： https://github.com/haizlin/fe...

前端面试每日31第114天

今天的知识点 (2019.08.08) —— 第114天[html] 举例说明HTML5的Canvas元素有什么用途？[css] 为什么要使用css sprites？[js] 写一个把数字转成中文的方法，例如：101转成一百零一[软技能] 你知道什么是B/S和C/S架构吗？说说它们的区别项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎分享！项目地址：前端面试每日3+1

HTML中的图片

HTML中的图片< img src="">图片的三种格式JPGJPG适合照片，包含一千六百多种颜色，这是一种有损格式，因为照片缩小时会丢掉图像的一些信息不支持透明度文件比较小不支持动画PNGPNG支持上百种颜色，的图像。PNG有三种：<blockquote>PNG-8,PNG-24,PNG-32</blockquote> <p>取决于你需要表示多少种颜色。 </p> 这是一种无损格式允许将颜色设置为“透明”，使图像下面的东西显示出来PNG文件的大小取决于颜色的多少GIFgif图支持256种颜色是一种“无损”格式也可以设置透明度，但是只支持将一种颜色设置为“透明”GIF文件一般比JPEG文件大支持动画——三种格式里唯一支持动画的总结： gif,png适合做小文本和logo图，JPEG适合照片** < img src="" alt="" width="" height=""> 其中src表示图片地址，alt表示图片未被加载时显示的替代文字,width表示图片宽度，htight表示图片高度最好不要用width和height控制图片大小，因为这样在获取网页资源的时候还是要加载原来的图片的，建议用ps调下分辨率再加载进去如果想要将图片设置为跳转则在img标签嵌套在a标签内就可以了** #### 蒙版蒙版即根据背景颜色柔滑文本边缘的一种效果,一般用于透明背景图片**如果把一个透明呢的图片放在web页面中，则要确定这个图像的蒙版颜色与web页面的背景色一致。透明图像可以使用PNG或GIF格式

选择器特殊性排名

按照特殊性优先级排名000从左到右第一个0：如果这个选择器包含id+1 例如：<pre>#choice {color:red;}</pre> 100第二个0：如果这个选择器包含类或伪类+1 例如：<pre>.choice {color:black;}</pre> 010第三个0：如果这个选择器包含元素名+1 例如：<pre>h1{color:blue;}</pre> 001用法将他们读作真正的数进行对比即可例如：100 > 010 > 001;

FECSS容易疏忽的CSS细节

flex-grow 与 flex-shrink 分配空间的计算规则flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x a / sum, x b / sum, x * c / sum，是为权重也。当所有元素的 flex-grow 之和小于 1 的时候（注意是 1，也就是说每个元素的 flex-grow 都是一个小数如 0.2 这样的），上面式子中的 sum 将会使用 1 来参与计算，而不论它们的和是多少。也就是说，当所有的元素的 flex-grow 之和小于 1 的时候，实际上用来分配的空间是 sum(flex-grow) / 1 * 剩余空间，这些用来分配的空间依然是按 flex-grow 的比例来分配。如果最终 grow 后的结果大于 max-width 指定的值，max-width 的值将会优先使用。同样会导致父元素有部分剩余空间没有分配。flex-shrink 可以在空间不够时让各个子元素收缩以适应有限的空间每个元素收缩的权重为其 flex-shrink 乘以其宽度。当所有元素的 flex-shrink 之和小于 1 时，只会收缩 flex-shrink 之和相对于 1 的比例的空间。类似 flex-grow，flex-shrink 也会受到 min-width 的影响。百分比值vertical-align的百分比值是相对于line-height计算的。 ...

Loading图总有一款适合你

总有一款适合你的Loadinggithub地址，喜欢的可以star下哦插件预览图使用教程1.插件代码拷贝下载后把components目录下countUp.vue文件拷贝到自己项目目录下2.插件全局配置在项目里main.js中配置如下代码import loading from './components/loading/loading.vue'Vue.component('loading',loading)3.插件使用 vue页面使用<template> <view> <loading ></loading> </view></template><script></script><style></style>还收集了一些其他的Loding Loaders.css css-loaders SVG-Loaders 暂时收集了这些，我相信能满足大部分人的需求了兼容性uni-app项目中使用都兼容

CSS3主要内容

CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... CSS3最新选择器规范: https://www.w3.org/TR/selectors !---问题---! 1.CSS的全称是什么？Cascading Style Sheets 2.样式表的组成：CSS选择器 + CSS声明块：（一个个CSS声明：属性名+属性值） 3.浏览器读取编译CSS的顺序？CSS选择器的解析顺序：从右往左。这样做是为了减少无效匹配次数，从而匹配快、性能更优。 1.基本选择器*,html,.,#,空格,>,+,~,,（1）通配符选择器：* {}（2）元素选择器：body {}任何一个HTML元素（3）类选择器：. .list {}（4）ID选择器：# #list {}（5）后代选择器：空格 .list li{}（6）选择器的分组：用逗号,隔开各个选择器 h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符基本选择器扩展（7）子元素选择器：>，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。 #wrap > .inner {color: pink;}（8）相邻兄弟选择器：+，它只会匹配紧跟着的兄弟元素。 #wrap #first + .inner {color: #f00;}（9）通用兄弟选择器：~，它会匹配所有的兄弟元素(不需要紧跟)。 #wrap #first ~ div { border: 1px solid;}2.属性选择器（1）存在和值属性选择器 [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。（2）子串值属性选择器 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。 [attr*=val] : 选择attr属性的值中包含字符串val的元素。 ...

VueCSS3实现转盘抽奖

最近有个转盘抽奖的需求，搜了一下现有的轮子，有的是用jQuery的动画函数实现的，有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法，前者太老了没法简单移植到vue项目，后者感觉性能表现可能不会太好。也有一些用CSS动画的方案，设计了加速-匀速-减速三个动画，再计算偏转角度让三个动画尽可能无缝衔接，但我感觉绕了大远路，应该有更简单轻量的实现方案。个人更倾向于用transition来实现，不过网上的例子感觉还不够好，有的倾斜文字都没有对齐，最后还是自己手写了一个。无需jQuery，不用js脚本实现动画细节，动画效果完全连续无需衔接，支持动态设置2个以上任意数量的奖项。核心思路是用transition以及rotate实现旋转动画，使用transition-origin和rotate绘制出定位较为精确的轮盘奖项。代码及实例展示 <script src="//unpkg.com/vue/dist/vue.js"></script><span id="app"> <span>Prize number: {{ prizeNumber }}</span> <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++)" :disabled="rolling || prizeNumber === 8">Add</button> <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--)" :disabled="rolling || prizeNumber === 2">Remove</button> <div class="wheel-wrapper"> <div class="wheel-pointer" @click="onClickRotate" > Start </div> <div class="wheel-bg" :class="{freeze: freeze}" :style="`transform: rotate(${wheelDeg}deg)`" > <div class="prize-list"> <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index" > <div class="prize-item" :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`" > <div class="prize-name"> {{ item.name }} </div> <div class="prize-icon"> <img :src="item.icon"> </div> </div> </div> </div> </div> </div></div>html { background: #DD7C7D;}.wheel-wrapper { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wheel-pointer { width: 60px; height: 60px; border-radius: 1000px; background: yellow; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; line-height: 60px; z-index: 10; } .wheel-bg { width: 100%; height: 100%; border-radius: 1000px; overflow: hidden; transition: transform 4s ease-in-out; background: #7EEF97; &.freeze { transition: none; background: red; } } .prize-list { width: 100%; height: 100%; position: relative; text-align: center; } .prize-item-wrapper { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; } .prize-item { width: 100%; height: 100%; transform-origin: bottom; .prize-name { padding: 16px 0; } .prize-icon {} }var Main = { data() { return { freeze: false, rolling: false, wheelDeg: 0, prizeNumber: 8, prizeListOrigin: [ { icon: "https://picsum.photos/40?random=1", name: "$10000" }, { icon: "https://picsum.photos/40?random=6", name: "Thank you!" }, { icon: "https://picsum.photos/40?random=2", name: "$500" }, { icon: "https://picsum.photos/40?random=3", name: "$100" }, { icon: "https://picsum.photos/40?random=6", name: "Thank you!" }, { icon: "https://picsum.photos/40?random=4", name: "$50" }, { icon: "https://picsum.photos/40?random=5", name: "$10" }, { icon: "https://picsum.photos/40?random=6", name: "Thank you!" } ] }; }, computed: { prizeList () { return this.prizeListOrigin.slice(0, this.prizeNumber) } }, methods: { onClickRotate() { if (this.rolling) { return; } this.rolling = true; const { wheelDeg, prizeList } = this; const random = Math.floor(Math.random() * (prizeList.length )); console.log(random); this.wheelDeg = wheelDeg - wheelDeg % 360 + 6 * 360 + (360 - 360 / prizeList.length * random); setTimeout(() => { this.rolling = false; alert("Result：" + prizeList[random].name); }, 4500); } }, watch: { prizeNumber () { this.freeze = true this.wheelDeg = 0 setTimeout(() => { this.freeze = false }, 0) } }};var App = Vue.extend(Main);new App().$mount("#app");

CSS3-渐变Gradients

1：基本概念在两个或者多个指定的颜色之间显示平稳的过渡渐变的效果是由浏览器生成的渐变的类型主要分为两种：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）；线性渐变是一个向上、向下、向左、向右或者对角方向的渐变，而径向渐变则是由它们的中心定义。作为元素的background-image（background）使用2：浏览器的支持情况因为它是一个比较新的属性，所以它在浏览器中使用时需要添加它的前缀，下面的图片是完全支持该属性的第一个浏览器版本：不同厂商的浏览器的前缀也是不一样的，比如： .header { /* Safari */ background: -webkit-linear-gradient(red, blue); /* Opera */ background: -o-linear-gradient(red, blue); /* Firefox */ background: -moz-linear-gradient(red, blue); /* 标准的语法, 放在最后 */ background: linear-gradient(red, blue);}不同的浏览器厂商在实现这个标准时也是略有不同的，比如关于方向的定义，角度的定义，是顺时针还是逆时针。 3：线性渐变（Linear Gradients）基本语法 background: linear-gradient(direction, color-stop1, color-stop2, ...);在不添加角度和方向的前提下，默认是从上到下 background: linear-gradient(color1, color2); 从左到右 to right/left/bottom/topbackground:linear-gradient(to right,#147B96,#E6D205);对角（需要把两个方向相结合） to right bottom/right top/left bottom/left topbackground:linear-gradient(to bottom right,#147B96,#E6D205);使用角度 background: linear-gradient(45deg, #147B96 , transparent);多种颜色 background: linear-gradient(to right, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);background: linear-gradient(to right, #147B96, #E6D205 50px, #147B96 50px, #E6D205 50px, #147B96);重复渐变 ...

前端每日实战-169-视频演示如何为世界上最长单词的制作一个数略词交互动画内含2个视频

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/byvRxB 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。视频1: https://scrimba.com/p/pEgDAM/cR4gpGsa视频2: https://scrimba.com/p/pEgDAM/czNp3MUZ 源代码下载每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-end-daily-challenges 代码解读大家是否见过 “i18n”、“a11y” 这样的英文单词？它们其实是一些单词的缩写，“i18n” 代表的是 “internationalization”（国际化），“a11y” 代表的是 “accessibility”（可访问性），因为包含的字母太多了，所以缩写时只保留头尾的字母，再把余下的字符个数写在中间，这种写法称为“Numeronym”，我把它翻译成“数略词”。据说最长的单词是 “pneumonoultramicroscopicsilicovolcanoconiosis”，由 45 个字母组成，意思是一种肺部疾病。本项目将制作一个交互动画效果，令其在单词原词和“数略词”之间切换。整个项目分成二个步骤开发，第一步先实现一个固定单词的交互动画，第二步改写为能自动处理任意的单词，然后扩展应用到多个单词上。一、一个固定单词的交互动画 dom 结构如下，最外侧的容器名为 .container，其中包含一个名为 .word 的 <div> 元素，它代表一个单词，它的子元素是 4 个 <p> 元素，分别代表单词的第1个字母、中间字符的个数（.middle.short）、中间的若干字符（.middle.long）、单词的最后1个字母。因为动画时将交替显示“中间字符的个数”和“中间的若干字符”，所以为它们设置了特殊类名，以便在随后的 css 代码中引用它们，当要同时选择它们时，就用它们共同的类名 middle，当要分别选择时，就指定它们各自的类名 short 和 long： <div class="container"> <div class="word"> <p>i</p> <p class="middle short"> <span>18</span> </p> <p class="middle long"> <span>nternationalizatio</span> </p> <p>n</p> </div></div>令容器居于页面正中： body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(bisque, lightcyan);}让 4 个 <p> 标签包含的文字横向排列在容器中部： ...

通过动图学习-CSS-Flex

翻译：疯狂的技术宅原文：https://www.freecodecamp.org/... 未经允许严禁转载如果一张图片胜过千言万语 —— 那么动画呢？ Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解，我制作了这些动画演示。注意 overflow: hidden 行为类型是默认值，因为 flex-wrap 还未设置。为了获得更好的想法，你可以在这个页面上去尝试一下 Flex Layout Editor。按默认 flex不会包装你的内容。它的工作原理很像 overflow: hidden。可能你在学习 flex 时第一个接触到的就是 flex-wrap。 Flex Wrap让我们添加 flex-wrap:wrap 来看看它是如何改变 flex 项的行为的。基本上，它只会扩展容器高度并将物品包裹起来。注意：即便是未指定容器得高度（auto/unset）仍然会这样。 wrap 如果你有一些内容大小未知且数量也未知的项目，并且希望在屏幕上全部显示它们时，这是一种常见模式。可以用 flex-direction: row-reverse 来反转项目的实际顺序。 row-reverse 这可以用于需要从右到左的顺序阅读的内容。你可以 “float:right” 所有与 flex-end 在同一行上的项目。这与 row-reverse 不同，因为它保留了项目的顺序。 Justify Contentjustify-content 属性负责 flex 项目的水平对齐。它看起来很像前面的例子……除了项目的顺序。 flex-end 在以下示例中（justify-content: center），所有项目将自然地聚集到父容器的中心 —— 无论其宽度怎样。它与 position: relative; margin: auto 相似。 ...

弹窗实现自制

自制手写弹窗在实际开发中，我们不可避免的需要使用到弹窗，但是我们经常总是直接使用的第三方模态框，这就导致我们自己对于弹窗的理解并不深；如果有时候需要我们手写一个简单弹窗时，你可能写不出来（不要笑，大部分都是，包括有些前端也写不出来）。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者，我们一定要既知其然又知其所以然，虽然我们不是专业的前端，但是我们也要向全栈方向努力嘛????直接看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自写弹窗，体会原理</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style type="text/css"> @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css"); </style></head><body><div id="app"> <h1>自制弹窗，理解实现原理</h1> <p>首页内容</p> <p>用户列表: </p> <el-table ref="multipleTable" :data="userList" border style="width:50%;" height="200px" highlight-current-row > <el-table-column fixed type="selection" align="center" width="50"></el-table-column> <el-table-column prop="name" align="center" label="姓名" show-overflow-tooltip min-width="100"></el-table-column> <el-table-column prop="pwd" align="center" label="密码" show-overflow-tooltip min-width="100"></el-table-column> </el-table> <button @click="showDialog">显示对话框</button>  <div id="addUserDialog">  <div class="addUser"> <h3 style="background-color: antiquewhite;padding-left: 144px;">添加用户</h3> <a href="#" id="addUserClose">关闭</a> <el-form v-model="userForm" style="width: 350px; padding-left: 50px;"> <el-form-item label="账号" > <el-input type="text" v-model="userForm.userName" placeholder="请输入账号" style="width: 220px;"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="userForm.userPwd" placeholder="请输入账号" style="width: 220px;"></el-input> </el-form-item> </el-form> <el-button type="success" @click="addUser" style="margin-left: 120px;">确定</el-button> <el-button type="danger" @click="cancelAddUser">取消</el-button> </div>  <div class="addUserBackground"></div> </div></div><script> let vm = new Vue({ el: '#app', data(){ return{ userName:'', userPwd: '', userList:[ {name: '小米', pwd: '123456'}, {name: '劫', pwd: '任我行'} ], userForm:[], } }, methods:{ showDialog(){ // 点击显示对话框目的：将对话框的 display 变成 block let addUserDialog = document.getElementById('addUserDialog'); let addUserClose = document.getElementById('addUserClose'); addUserDialog.style.display = 'block'; addUserClose.onclick = function () { addUserDialog.style.display = 'none'; } }, cancelAddUser(){ // 取消或者关闭窗口，就是要讲该窗口的 display 设置成 none 即可 let addUserDialog = document.getElementById('addUserDialog'); addUserDialog.style.display = 'none'; }, addUser(){ let self = this; self.userList.push({'name': self.userForm.userName, 'pwd': self.userForm.userPwd}); // 添加完后，将遮罩层去掉 let addUserDialog = document.getElementById('addUserDialog'); addUserDialog.style.display = 'none'; } } });</script><style type="text/css"> /*全局样式*/ body{ background-color: #00FFFF; } /** 以下这四部分样式，是制作一个弹窗最少需要的样式控制,当然你可以再在此基础上优化 addUser addUserBackground 是最关键的两部分，刚开始背下来样式控制即可，后续理解后再回过头来就明白了 **/ /*隐藏弹窗*/ #addUserDialog { display: none; } /*弹窗样式*/ .addUser { width: 400px; height: 300px; background-color: #fff; border: 1px solid #000; position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; /*层次级别*/ z-index: 9999; } /*弹窗背景灰度*/ .addUserBackground { position: fixed; width: 100%; height: 100%; background-color: #000; left: 0; top: 0; /*透明度*/ opacity: 0.3; /*兼容ie*/ filter: alpha(opacity=30); z-index: 9990; } #addUserClose { text-decoration: none; position: absolute; right: 10px; top: 10px; }</style></body></html>为了方便大家直接使用理解，我这里使用的脚本等都是在线链接，确保大家直接 down 下来就能运行处效果的。而那四个css就是弹窗最核心，最关键的部分。大家只要理解这两点就够了：1).弹窗之所以能起到弹窗效果，是因为它的图层(z-index) 高于背景层，所以才能跃然背景上；2).弹窗的启用与关闭，其实就是切换弹窗体的 display 即可。额外说明：在初学时我们一定不明白或者不好想到怎么设置 .addUserBackground 和 .addUser 这两个最关键的 class 属性，没关系，你只需要记住，并且经常使用，慢慢就理解了【有一句话说得好：当我们不理解一件事时，我们只需要去照做、背记即可，用的多了慢慢就理解了】声明原创手敲不易，转载请注明出处，谢谢。我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以邮我哦(util.you.com@gmail.com)

面试之盒模型

标准的CSS的盒子模型与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin border与padding向内容外填充低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin border与padding向内容内填充标准盒子模型IE盒子模型上刺刀box1box2可以看出我们设置了box-sizing box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽，定义的宽度和高度之外绘制元素的内边距和边框border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽适用场景比如我们在写一个头部，background：gray，我们需要两边有10px的距离，如果设margin：0 10px的话，会发现两边有了间距，但是间距不是灰色背景，而且出现了滚动条，这个时候就需要我们的padding：0 10px,完美解决了两边留白的尴尬，但是滚动条还在，这就需要上大刀box-sizing:border-box;就会发现滚动条没了，头部也很美观。

借助CSS来管理js事件

CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。原链接 https://notes.codelabo.cn/art... 原issues https://github.com/XboxYan/no... 很多都是开脑洞想出来的，实现效果却意外的惊人事件禁用在js中对事件禁用并不复杂，但是却容易影响到业务逻辑 function buy(){ if(XX){ return false; } //其他业务代码}当然，元素也要设置相应的样式，让它看起来不可点击。 css对事件禁用就比较简单了，主要有两种方式 1. disabled 原生表单元素是有默认的禁用属性的，比如 <button disabled onclick="alert(11)">按钮</button> 可以看出，禁用的默认样式为 button:disabled { color: graytext;}所以，在这里你可以随意的修改禁用的样式 button:disabled { color: red;}button[disabled] {/**属性选择器也行**/ color: red;}button:hover { /**:hover支持**/ color: red;}button:active,button:focus{/**不支持，其实也好理解，会触发focus()事件，所以也禁用了**/ color:red}一般情况下，使用这种方式是比较好的，天然的禁用属性，兼容性也不错 2. pointer-events:none 这个属性应该也不陌生，最常见的用法就是禁用一个按钮，而且不局限于表单元素，任意元素均可（比如很多人喜欢用的a标签） button.disabled { pointer-events:none; user-select:none;/*去除选中效果*/ color: graytext;}这个属性用处很多，很多js绞尽脑汁想要过滤掉的方法，直接就用一行属性解决，这里就不展开了，网上教程很多。查看这个demo <iframe height="300" style="width: 100%;" scrolling="no" title="css 禁用事件" src="//codepen.io/xboxyan/embed/KLGXjR/?height=300&theme-id=34022&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen css 禁用事件 by XboxYan (@xboxyan) on CodePen.</iframe> 长按事件原生js中并没有长按事件，通常开发者一般会顺着思路，使用定时器来完成下面是伪代码 el.onmousedown = function(){ this.timer && clearTimeout(this.timer); this.timer = settimeout(function(){ //业务代码 },350)}el.onmouseup = function(){ this.timer && clearTimeout(this.timer);}当然，可以借助css来完成，而且效果更好，易于控制 ...

实用的-Web-布局技巧Flex-主轴上的自动外边距

问题描述先来看一个需求场景：上图中需要实现在水平方向上子元素之间、子元素和父容器边框之间的间距要相等。实现的方法有很多，我们这里要讨论的是：如何简洁地使用 Flex 布局来实现？我这里采用的方法是：使用自动的外边距在主轴上对齐。自动的外边距在主轴上对齐我们先来看一下 MDN 关于这个的解释： ... 自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。两边尽可能占据多的空间，块就被置于中间位置了。这很好理解：自动外边距将平分全部的剩余空间。下面就来尝试下这个方案吧，代码如下： <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>.container { display: flex; align-items: center; box-sizing: border-box; border: 2px dashed #7cb305; width: 600px; height: 200px; margin: auto;}.item { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100px; height: 100px; background: #722ed1; border-radius: 50%; color: #fff; font-size: 22pt;}然后看一下效果：貌似有点不对。仔细看看子元素之间的间距比到边框的大，大概是子元素到边框的两倍，跟我们预期的效果有差异。按照 MDN 的解释来看，自动的外边距会等分剩余空间，但为什么会出现上图的情况呢？下面来谈一下我的理解。主轴剩余空间“分配权重”与子元素自动外边距的关系这个分配权重关系没有在 MDN 上找到相关解释，纯粹是个人见解，我们可以这样来理解：如果一个子元素在主轴的一个区域（或方向）上声明了 margin-*: auto，那么这个空间的分配权重 + 1如果另外一个子元素也在同样的区域（或方向）上有自动外边距的声明，那么分配权重再 + 1在这些声明了自动外边距的区域上，剩余空间根据分配权重来划分间距大小首先，这个理解显然是可以满足 MDN 上的解释。然后我们再来看看上图的情况怎么解释： ...

CSS阴影效果的比较dropShadow与boxShadow

drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))}.box-shadow { box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);}因为都是阴影效果（光晕效果），所以二者可以设定的参数（value）几乎一样：以上面的例子来说，参数的所有数值从左到右代表了：水平偏移，垂直偏移，阴影模糊距离阴影颜色。接下来将为您进一步比较drop-shadow与box-shadow 边框和变形效果 drop-shadow与box-shadow的阴影都可以反应出边框圆角和变形效果。不同的是：drop-shadow反应出实际边框的形状、实线框有实线的影子、虚线框有虚线的影子；box-shadow则是把边框和里面的内容当成是一个完整的方块、并制造出整个方块的影子，而边框的样式会被忽略，直接当成是实线框。 .box { border: 5px solid #262b57; width: 120px; height: 120px; border-radius: 10px; transform: rotate(15deg); font-size: 40px; text-align: center; line-height: 120px;}.dashed { border-style: dashed;}背景与透明度如果方块有设定颜色（不是透明的），drop-shadow与box-shadow的阴影效果看来就会差不多。如果方块的背景是半透明的呢？我们可以从图片中发现，影子周围的颜色比较深，中间的颜色比较淡，所以可以推论出透明度对drop-shadow会造成影响、对box-shadow则没有影响。 .bk { background-color: #ffcc66;}.bk-alpha { background-color: rgba(255, 204, 102, 0.3);}图形边框（image border） ...

前端培训初级阶段场景实战20190516聊天头像微信头像群组头像

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。我们要讲什么？这节还是聊天消息中遇到的问题，群组消息之头像，哈哈是不是感觉好熟悉，对的是我之前抛出的一个问题。我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。 flex 实现微信头像布局效果地址，本来是在JSRun的，但是大哥最近有点不稳定老连不上。如果你说什么Flex我不会啊，之前写的Flex的教程一发入魂。看第一个效果（avatar3）一个在上，两个在下，想想有什么属性适合？flex-wrap 用来规定内容放不下，如何换行 nowrap(不换行)（默认值）wrap(换行，第一行在上方)（两个在上，一个在下）wrap-reverse(换行，第一行在下方)（两个在下，一个在上）是不是发现，效果对了，但是排序的头像错了？微信头像是加群时间升序的。不用担心，渲染的时候取反就ok，负负得正嘛。。头像等分，我是参照100px。一个90px,两个45px，三个30px。然后使用百分比实现。为什么要用百分比呢？因为你也不能保证所有地方都是100px吧。然后你是不是发现多行的时候，间距有问题？align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。设置一下就好了background-image 实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。这个效果的实现依赖于多重背景实现，background --MDN absolute 实现效果地址，写起来感觉比上一个方案要简单一点，但是，还是不好写。我只写了前几个。文档流+after/before填充效果地址，基本上属于看到哪里不对改哪里，操作上来说，比上两个方案要简单一些。其他思路需要换行的地方插入br标签，然后水平居中。垂直居中使用padding。方案同上垂直居中换成table-cell。等其他方法。grid方案优缺点方案理解程度位置控制描述flex易弱很好理解，思路清晰，但是无法对于设计稿精细微调背景图难强高可控性，但是代码复杂，不易理解修改绝对定位难强高可控性，但是代码复杂，不易理解修改，比背景图还是要好理解一点文档流中中可控性较好，但是代码无关联，易于修改。不推荐。grid中强后记你有什么方案可以在评论区留言讨论

前端培训初级阶段场景实战20190509聊天框发送框

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。初级阶段已经完结，之后会针对之前提到过的内容，对实际场景进行分享。正好前段时间我不是一直在加班做聊天的功能嘛。今天我们就来说一说其中遇到的东西。我们要讲什么？contentEditableNode 与 Element插入功能（表情、截图等等）粘贴功能拖入功能测试地址-测试下面的特性关键词文字换行图片input√××textarea√√×contentEditable√√√contentEditable你会说这东西我知道，给元素加上就可以编辑内容。老铁，这么简单当然不行了。当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入、IE/Opera将使用<p>、 Chrome/Safari 将使用 <div>）css 也可以支持同样的功能-webkit-user-modify，值有 inherit（继承）;initial（默认）;read-only（只读）;read-write（读写）;read-write-plaintext-only（读写、非富文本）;unset（未设置）;当一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial同上 contentEditable 属性支持的也不是逻辑值。plaintext-only 就是其中最亮的仔。最早还是在张鑫旭大佬-小tip: 如何让contenteditable元素只能输入纯文本哪里看的到的当然我们用的还是富文本的样式。因为我们里面需要表情 Node 与 ElementNodeNode 是一个接口，许多 DOM API 对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。以下接口都从 Node 继承其方法和属性：Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference-----------------https://developer.mozilla.org...Node.nodeName返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。HTMLElement 的名字跟它所关联的标签对应，比如 HTMLAudioElement 对应的是 'audio'Text 节点对应 '#text'。Document 节点对应 '#document'。Node.nodeType NameValuestatusELEMENT_NODE1 ATTRIBUTE_NODE2warnTEXT_NODE3 CDATA_SECTION_NODE4 ENTITY_REFERENCE_NODE5warnENTITY_NODE6warnPROCESSING_INSTRUCTION_NODE7 COMMENT_NODE8 DOCUMENT_NODE9 DOCUMENT_TYPE_NODE10 DOCUMENT_FRAGMENT_NODE11 NOTATION_NODE12warn上面两个属于比较重要的 ElementElement是非常通用的基类，所有 Document对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口，而 SVGElement 接口是所有SVG元素的基本接口.大多数功能在类的层次中进一步制定.在web以外的语言,像 XUL 可以通过 XULElement 接口, 同样也实现了Element接口.Node 与 Element 差别Node 中是会包含文本节点的。比如Text。而 Element 包含的都是标签节点。 ...

css和css3弹性盒模型实现元素宽度高度自适应

一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应</title> <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200px; position: absolute;/*定位*/ left: 0; top:0; } .right{ background: blue; height: 200px; margin-left: 210px; } </style></head><body> <div class="left"> 定宽 </div> <div class="right"> 自适应</div></body></html>2、浮动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应</title> <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200px; float: left;/*浮动*/ } .right{ background: blue; height: 200px; margin-left: 210px; } </style></head><body> <div class="left"> 定宽 </div> <div class="right"> 自适应</div></body></html>3、margin ...

FontAwesome

Font-Awesome（一套绝佳的图标字体库和CSS框架）它跟阿里矢量库不同的是：他不需要引入一些繁琐的文件。只需要几个命令就可以直接使用icon图标方法一 : css导入 <link href="css/font-awesome.css" rel="stylesheet" />方法二: 定义安装 npm install font-awesome-sass复制 font-awesome/ 目录到你的项目中，打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录示例：想要实现如下效果：就可以这样写： <i class="fa team-member-icons fa-facebook"></i><i class="fa team-member-icons fa-twitter"></i><i class="fa team-member-icons fa-google-plus"></i>

10个有趣的javascript和css库2019年最新

我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源，这些资源是我们偶然发现并认为值得您关注的。 1.Cube.js强大的开源框架，用于开发复杂的定制分析系统。由前端sdk和一个后端API组成，该后端与大多数数据库（包括mysql、postreges和mongodb）可以一起工作。 2.Water.css只需添加CSS框架即可应用样式，无需定义元素类。只需通过cdn将其包含在您的项目中，您的所有页面将自动变化。包括明暗主题，可通过SCSS定制。 3.Editor.js以JSON格式输出数据的富文本和媒体编辑器。它是完全模块化的，由“块”组成，这意味着每个结构单元都是它自己的块（例如段落、标题、图像都是块），用户可以轻松地编写自己的插件来进一步扩展编辑器。 4.Stepper非常好的数字步进控件，非常适合上/下式的增减控制或其他计数器控件。点击箭头会产生非常帮的动画与光滑的CSS效果。 5.DropCSS彻底的CSS清理程序，它将获取HTML和CSS，并只返回实际使用的样式。它删除所有未使用的样式块、重复的选择器、@keyframes等等。高度优化，速度极快。 6.TwemojiTwitter团队提供的强大表情符号库，在所有平台上提供标准的Unicode emoji支持。有了超过3000个emojis和一个稳定的API，当你想将emojis添加到你的应用程序中时，它是一个完美的解决方案。 7.React LoadConReact组件，允许您使用一系列动态生成的图像来使网站的favicon图标产生动画。这个效果可以用作进度或加载指示器，也可以作为一个很酷的小动画，使您的页面脱颖而出。 8.Indigo Player高度扩展，现代的javascript视频播放器。支持MPEG-Dash / HLS / MPEG-4，并构建在HTML5视频元素之上。视频播放器具有开箱即用的功能，如字幕、缩略图、质量选择等。高度可扩展、现代化，并为大多数流行的视频格式和编解码器提供支持。 9.html2canvas这个很酷的脚本获取页面中的元素和样式，并通过呈现DOM的副本来获取“屏幕截图”。由于屏幕截图是基于DOM的，它们可能不是100%准确，但是本库仍然是调试和自动化测试的一个很好的工具。 10.Choices轻量级库，用于制作高度可自定义的选择框、文本区域和其他输入表单。类似于select2和selectize，但没有依赖jquery。

display-flex布局下使用‘whitespace-nowrap导致的问题

需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图：代码：wxml布局: <view class="member-item"> <image class="avatar" src=""></image> <view class="info"> <view class="name">姓名</view> <view class="signature">这个人很懒，什么都没写。这个人很懒，什么都没写。</view> </view> </view>wxss样式：.member-item { margin-top: 1px; padding: 15rpx 30rpx; display: flex; flex-direction: row; background-color: white; width: auto;} .avatar { background-color: whitesmoke; width: 96rpx; height: 96rpx; border-radius: 50%;}.info { display: flex; flex-direction: column; margin-left: 30rpx; flex: 1;}.name { font-size: 30rpx; color: #333; line-height: 48rpx;}.signature { font-size: 28rpx; color: #888; line-height: 48rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}效果：问题：为了自适应屏幕大小，这里父布局采用flex，展示个性签名的view对应的class为signature，其中我通过“overflow: hidden; text-overflow: ellipsis; white-space: nowrap;”来实现单行显示，超出实际能显示的最大宽度则用‘...’代替的效果。但是在实际效果如上图所示，当内容超出实际可显示宽度时，挤压推出左侧布局以显示signature中的内容，导致左侧布局的变形甚至被挤出。 ...

前端面试题及答案-浏览器篇

这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。1. 谈谈Cookie的优劣Cookie不同之处： IE6或更低版本最多20个cookieIE7和之后的版本最后可以有50个cookie。Firefox最多50个cookiechrome和Safari没有做硬性限制优点：极高的扩展性和可用性通过良好的编程，控制保存在cookie中的session对象的大小。通过加密和安全传输技术（SSL），减少cookie被破解的可能性。只在cookie中存放不敏感数据，即使被盗也不会有重大损失。控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。缺点： Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。例子JavaScript 中，创建 cookie 如下所示： document.cookie="username=John Doe";还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除： document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。 document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";2、浏览器本地存储 - cookie、localStorage、sessionStorage区别相同：在本地（浏览器端）存储数据不同： localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。localStorage是永久存储，除非手动删除。sessionStorage当会话结束（当前页面关闭的时候，自动销毁）cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。了解更多前端面试题及答案 - HTML篇前端面试题及答案 - CSS篇前端面试题及答案 - JS篇

normalize与css-reset的区别

Normalize.css只是一个很小的css文件，相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。也就是说，Normalize.css是一种CSS reset的替代方案。 Normalize.css 保护了有价值的默认值 reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。 Normalize.css 修复了浏览器的bug 它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。 Normalize.css 不会让你的调试工具变的杂乱使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。 Normalize.css 是模块化的这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。 Normalize.css 拥有详细的文档 Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。

使用CSS实现逼真的水波纹点击效果

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用“叠”的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着最重要的就是将背景设为固定：background-attachment:fixed；，然后让背景的尺寸有大有小，就可以完成了，只要把六个div叠在一起，搭配CSS的animation，就可以让六个div依序出现。 HTML: <div class="wave wave5"></div><div class="wave wave4"></div><div class="wave wave3"></div><div class="wave wave2"></div><div class="wave wave1"></div><div class="wave wave0"></div>CSS: .wave{ position:absolute; top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; border-radius:300px;}.wave0{ background:#f00; z-index:2; background-size:auto 106%; animation:w 1s forwards;}.wave1{ background:#d00; z-index:3; animation:w 1s .2s forwards;}.wave2{ background:#b00; z-index:4; animation:w 1s .4s forwards;}.wave3{ background:#900; z-index:5; animation:w 1s .5s forwards;}.wave4{ background:#700; z-index:6; animation:w 1s .8s forwards;}.wave5{ background:#500; z-index:7; animation:w 1s 1s forwards;}@keyframes w{ 0%{ top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; } 100%{ top:calc((100% - 300px)/2); left:calc((100% - 300px)/2); width:300px; height:300px; }} ...

移动端的textoverflow多行文本溢出显示省略号…

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/ 跨浏览器兼容的方案比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；例如： p { position:relative; line-height:1.4em; /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden;}p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y;}这里注意几点： height高度真好是line-height的3倍；结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；要支持IE8，需要将::after替换成:after；JavaScript 方案用js也可以根据上面的思路去模拟，实现也很简单，推荐几个做类似工作的成熟小工具： 1.Clamp.js下载及文档地址：https://github.com/josephschmitt/Clamp.js使用也非常简单： var module = document.getElementById("clamp-this-module");$clamp(module, {clamp: 3});2.jQuery插件-jQuery.dotdotdot这个使用起来也很方便： ...

编写高效的-CSS-选择器-–-CSS魔法

高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识到，CSS在我们手中，既能很高效，也可以变得很低能。这很容易被忘记，尤其是当你意识到你会的太少，CSS代码效率很低的时候。下面的规则只真正被应用到那些速度要求很高，有成百上千的DOM元素被绘制在页面上的大型网站。但是，实践出真理，多知道一点总是好的。 CSS 选择器对我们大多数人来说，CSS选择器并不陌生。最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。一些的不常见的选择器包括伪类选择器(:hover)，很多复杂的CSS3和正则选择器，比如：first-child，class ^= “grid-”。 CSS选择器具有高效的继承性， CSS选择器效率从高到低的排序如下： ID选择器比如#header类选择器比如.promo元素选择器比如 div兄弟选择器比如 h2 + p子选择器比如 ul > li后代选择器比如 ul a通用选择器比如 *属性选择器比如 type = “text”伪类/伪元素选择器比如 a:hover我们不得不提的是，纵使ID选择器很快、高效，但是它也仅仅如此。从CSS Test我们可以看出ID选择器和类选择器在速度上的差异很小很小。在Windows系统上的Firefox 6上，我测得了一个简单类选择器的（reflow figure）重绘速度为10.9ms，而ID选择器为12.5ms，所以事实上ID比类选择器重绘要慢一点点。 ID选择器和类选择器在速度上的差异基本上没有关系。在一个标签选择器(a)的测试上显示，它比类或ID选择器的速度慢了很多。在一个嵌套很深的后代选择器的测试上，显示数据为440左右！从这里我们可以看出ID/类选择器和元素/后代选择器中间的差异较大，但是相互之间的差异较小。组合选择器你可以有一个标准的选择器比如 #nav，来选择任何带有ID为”nav”的元素，或在你可以有一个组合选择器比如#nav a,来选择任何在ID为’nav’的元素里面的链接元素此刻，我们读这些是从左到右的方式。我们是先找到#nav，然后从它的里面找其他元素。但是浏览器解析这些不是这样的：浏览器解析选择器是从右到左的方式。在我们看来，#nav里面带了一个a，浏览器却是看到的a在#nav里面。这些细微的差异对选择器的效率有很大的影响，同时学这些差异也是很有价值的。浏览器从最右边的元素开始（它想要渲染的元素），然后用它的方式回溯DOM树比从DOM树的最高层开始选择向下寻找。这些对CSS选择器的效率有很大的影响。关键选择器关键选择器，正如前面讨论的一样，是一个复杂的CSS选择器中最右边部分。它是浏览器最先寻找的。现在我们回到讨论开始的地方，哪类选择器是最高效的？哪个是会影响选择器效率的关键选择器；写CSS代码的时候，关键选择器是能否高效的决定因素。一个关键CSS选择器像这样： #content .intro {}是不是高效选择器比如类选择器天生就高效？浏览器会寻找.intro的实例（可能会很多），然后沿着DOM树向上查找，确定刚才找到的实例是否在一个带有ID为”content”的容器里面。但是，下面的选择器就表现的不是那么好了： #content * {}这个选择器所做的是选择所有在页面上的单个元素（是每个单个的元素），然后去看看它们是否有一个 #content 的父元素。这是一个非常不高效选择器因为它的关键选择器执行开销太大了。运用这些知识我们就可以在分类和选择元素的时候做出更好的选择。假设你有一个复杂的页面，它相当巨大并且在你的一个很大很大的站点上。在那个页面上有成百上千甚至上万的 a 标签。它还有一个小的社交链接区域放在一个ID为#social的Ul里面。我们假设它们是Twitter，Facebook，Dribbble还有 Google+的链接吧。在这个页面上我们有四个社交链接和成百上千的其他链接。下面的这个选择器就自然的不是那么高效和合理了： ...