Css

HTML5、CSS3和JavaScript API一起造成了新的网页规范，很多浏览器曾经开始施行其中的局部新性能。其中CSS3负责网页款式的体现，为了达到更好的体现成果，减少了一些新属性。 目前CSS3的局部属性在一些浏览器上处在试验阶段，为了在文档中无效利用这条规定，必须应用相应的前缀申明。 ·-moz- 是Firefox的前缀 ·-webkit- 是Safari和Chrome的前缀 ·-o- 是Opera的前缀 ·-khtml- 是Konqueror的前缀 ·-ms- 是Internet Explorer的前缀 ·-chrome- 是Google Chrome的专用前缀 1.文本与字体：在CSS3中，在文本润饰方面，能够减少暗影、描边和发光等成果。在排版办法，能够对溢出及换行进行良好的管制，甚至对于非凡少见的字体，也能在客户端显示良好。 1）text-shadow属性： CSS3中的暗影属性text-shadow，岂但能够给文本增加暗影，还能够实现文本的描边和发光成果。语法为： text-shadow:length||length||opacity||color 其中，length示意暗影在程度和垂直方向绝对于文字自身的偏移间隔，能够为负值；opacity示意暗影成果含糊的间隔，不能为负，0示意没有含糊；color示意暗影的色彩值。已取得所有浏览器厂商新版本的反对。 示例：text-shadow:5px 5px 3px #333; text-shadow:-5px -5px 3px #00f; 还能够在上下左右四个方向为文字设置多个暗影： text-shadow:-5px -5px 3px #00f,5px 5px 3px #333; 不设置含糊间隔，就能够实现文本描边成果： text-shadow:-1px 0 #333,0 -1px #333,1px 0 #333,0 1px #333; 能够为每个方向上的暗影设置不同的色彩。如果将左和上的暗影色彩设为红色，会有凸起成果；而向下和右的暗影色彩设为红色，会有凸起成果： text-shadow:-1px 0 #fff,0 -1px #fff,1px 0 #333,0 1px #333; text-shadow:-1px 0 #333,0 -1px #333,1px 0 #fff,0 1px #fff; 如果不设置暗影程度和垂直的偏移间隔，仅设置含糊作用间隔，配合背景，可实现发光成果： text-shadow:0 0 10px #fff; ...

动画1) 介绍 1. 因为以后动画的技术不太稳固，要思考浏览器的兼容性问题2. 写动画是不须要任何的js根底3. 通过@keyframes来定义动画，规定在肯定工夫内，扭转css的属性4) 语法 1. 定义动画【在style标签外部定义】 @keyframes 动画名 { from {} // from是关键帧，动画开始的地位 to {} // to是关键帧，动画完结的地位 } ==>等价于 @keyframes 动画名 { 0% {} 100% {} } @keyframes 动画名 { 0% {} 25% {} 50% {} 75% {} 100% {} } 应用百分数的益处，不仅仅能够打上开始地位和完结地位的关键帧，也能够在某一个须要中央设置关键帧应用动画animation-name 动画名称(@keyframes中定义的动画名) animation-duration 动画继续的工夫 秒 animation-delay 动画提早的工夫 秒 也就是以后文件在浏览器首次关上后，多少秒再执行动画animation-direction 动画的方向 normal 失常播放动画reverse 反方向alternate 交替反转【须要动画的次数】 默认1次animation-iteration-count 动画的次数 infinite 有限次n【整数】 规定动画执行n次animation-timing-function 动画的速度曲线 linear 线性【匀速】ease-in 先慢后快ease-out 先快后慢ease-in-out 先慢后快再慢steps(5) 逐帧动画animation-fill-mode 动画填充 ...

先上效果图： 首先，先用一个元素的:before和:after画两个粒子。这样的益处是一个元素就能有两个粒子，节俭dom。粒子都是相对定位在核心。 i { &:before, &:after { position: absolute; top: 50%; left: 50%; background: radial-gradient(#fff, #fff 10%, rgba(255, 255, 255, 0) 56%); border-radius: 50%; content: ""; opacity: 0; }再写一个for循环生成30个元素，给粒子设随机的大小： @for $i from 1 through 30 { .particle { i:nth-child(#{$i}) { &:before { $w: #{random(5) + 10}px; width: $w; height: $w; } &:after { $w: #{random(6) + 3}px; width: $w; height: $w; } } }}接下来咱们要给每个粒子生成随机的从各个方向进入圆心的动画。为了能让x与y轴的方向有的是正有的是负，咱们用随机函数来生成1和-1： random(2) * 2 - 3，而后让粒子从随机不同的地位移向核心。 ...

Sass 中定义了各种类型的函数，其中大部分函数咱们能够通过 CSS 语句间接调用。上面是 Sass 中的函数分类： 字符串函数数字函数列表函数映射函数选择器函数Introspection函数色彩值函数本节咱们先来学习字符串相干函数。 字符串函数有哪些Sass 中的字符串函数用于解决字符串并获取相干信息。有一点须要留神，个别编程语言中字符串的索引都是从 0开始的，然而留神哟，Sass 中字符串的索引是从 1 开始的。 Sass 字符串函数如下所示： 函数形容quote给字符串增加引号unquote移除字符串的引号str-length返回字符串的长度str-index返回 substring 子字符串第一次在 string 中呈现的地位。str-insert在字符串 string 中指定索引地位插入内容str-slice从字符串中截取子字符串，容许设置始末地位，未指定完结索引值则默认截取到字符串开端to-upper-case将字符串转成大写to-lower-case将字符串转成小写unique-id返回一个无引号的随机字符串作为 idquote函数quote 函数次要用来给字符串增加引号，如果字符串自身就带有引号，则会默认变为双引号。 示例：上面这个例子中，定义了两个变量，这两个变量的值都为字符串，其中一个没有带引号，一个带有单引号： $str1: java;$str2: 'python'; .func1{ content: quote($str1);}.func2{ content: quote($str2);}编译成 CSS 代码： .func1 { content: "java";}.func2 { content: "python";}应用 quote() 函数给上述两个字符串增加引号后，不论原来的字符串是带有单引号还是不带引号，最终两个字符串输入后都默认带有双引号。 unquote函数unquote 函数与 quote 函数性能相同，用于移除字符串所带的引号。 示例：$str1: "hello,xkd";.func1{ content: unquote($str1);}编译成 CSS 代码： .func1 { content: hello,xkd;}从输入的 CSS 代码能够看出，通过 unquote() 函数解决的字符串，所带的双引号会被移除。 str-length函数 str-length 函数用于返回字符串的长度。此函数 示例：.func{ content: str-length("hello, xkd");}编译成 CSS 代码： ...

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

1.盒子模型 文档中的每个元素都能够被看作是一个矩形盒子1) 盒子的属性 width height margin 外边距 盒子与其余盒子之间的间隔 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left 左外边距 margin:10px; 上下左右都是10px margin:5px 10px; 高低为5px，左右为10px margin:5px 10px 15px; 上为5px，左右为10px，下为15px margin:5px 10px 15px 20px; 上5px，右10px，下15px，左20px border 边框 border-width 边框线的宽度 px border-style 边框线的款式 solid 实线 dotted 点状线 dashed 虚线 double 双实线 border-color 边框线的色彩 速写 border:10px double #333; border-radius 边框圆角 border-radius:100%; 圆 border-radius:10px; 10px的圆角 padding 内边距 background-color background-image:url(); background-position background-repeat no-repeat 不反复 repeat-x x轴反复 repeat-y y轴反复 background-size 背景图的尺寸 background-size:100% 100%;2) 盒子的组成 width、padding、border、margin3) 盒子的分类 通过box-sizing设置盒子的类型 1) box-sizing:content-box; 内容盒子【W3C盒子】【默认】 width 200px= 内容width 所占的宽 = width + padding + border + margin 2) box-sizing:border-box; 边框盒子【IE盒子】 width 200px = 内容width + padding + border 所占的宽 = width + margin 4) 边框塌陷(margin塌陷) 浏览器中有两个盒子，高低布局，如果给下面的盒子加上margin-bottom:10px;给下面的盒子加上margin-top:10;两个盒子之间的间隔为10px，不是20px 两个盒子之间间隔取margin大的那一个

一.字体款式 fontfont-color 字体色彩font-style 字体款式 italic 斜体 normal 失常字体【默认】font-weight 字体粗细 bold 粗体 lighter 更细的字体 normal 失常字体【默认】 100 ~ 900 数值越大，字体越粗 400 normal 800 boldfont-size 字体大小 px 浏览器的默认字体大小是16pxline-height 行高 取值是包裹该字体的元素高度，即可文字垂直居中 <div style="height:200px; line-height:200px;">123</div>font-family 字体族 '微软雅黑' 'Microsoft YaHei' serif 衬线 sans-serif 没有衬线 fangsong 政府文件速写 font:font-style font-weight font-size fonnt-family； 1. 必须蕴含font-size、font-family 2. font-style和font-weight必须在font-size之前 3. font-family必须放在最初webfont @font-face 1. 下载ttf字体文件 2. 放到绝对应的目录(我的项目的目录) 3. style标签中通过@font-face引入 @font-face { font-family: 'myfont'; src: url('./文件名.ttf'); } 4. 在须要字体的中央应用 div { font-family:'myfont'; } 字体图表库iconfont、fontawesome ...

1、布局 1) 默认文档流 1. 元素在网页中显示的程序与元素在代码中呈现的程序统一 2. 块级元素独占一行空间 3. 行内元素与其余元素共享一行空间2) 扭转默认布局 1. float：left/right 浮动布局，采纳浮动布局的元素会向左或者向右挪动 留神： 1、元素应用了浮动之后，会脱离文档流,从左向右排列，以后行宽度不够会主动换行 2、应用了浮动之后的元素，宽高由内容决定 3、元素在网页中本来的地位会被其余块级元素代替 4、应用了浮动之后的元素，其父元素的高度因为失去了撑持，所以变为0 革除浮动的形式: 1. 浮动元素的父元素::after { clear:both; content:''; display:block; } 2. 浮动元素的父元素 { overflow:hidden; } 3. 浮动元素的兄弟元素 { clear:both; content:''; }

参考资源bilibili阿里图标 代码<!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"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2441200_03qjw9nywe4z.css"> <link rel="stylesheet" href="css/style.css"> <title>Document</title></head><body> <div class="form-wrapper"> <div class="header"> login </div> <div class="input-wrapper"> <div class="border-wrapper"> <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off"> </div> <div class="border-wrapper"> <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off"> </div> </div> <div class="action"> <div class="btn">login</div> </div> <div class="icon-wrapper"> <i class="iconfont icon-github"></i> <i class="iconfont icon-weibo"></i> <i class="iconfont icon-weixin"></i> </div> </div></body></html>* { padding: 0; margin: 0;}html { height: 100%;}body { height: 100%; font-family: 'JetBrains Mono Medium'; display: flex; align-items: center; justify-content: center; background-color: #0e92b3;}.form-wrapper { width: 300px; background-color: rgb(41, 45, 62); color: #fff; border-radius: 2px; padding: 50px;}.form-wrapper .header { text-align: center; font-size: 35px; text-transform: uppercase; line-height: 100px;}.form-wrapper .input-wrapper input { background-color: rgb(41, 45, 62); border: 0; width: 100%; text-align: center; font-size: 15px; color: #fff; outline: none;}.form-wrapper .input-wrapper input::placeholder { text-transform: uppercase;}.form-wrapper .input-wrapper .border-wrapper { background-image: linear-gradient(to right, #e8198b, #0eb4dd); width: 100%; height: 50px; margin-bottom: 20px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}.form-wrapper .input-wrapper .border-wrapper .border-item { height: calc(100% - 4px); width: calc(100% - 4px); border-radius: 30px;}.form-wrapper .action { display: flex; justify-content: center;}.form-wrapper .action .btn { width: 60%; text-transform: uppercase; border: 2px solid #0392b3; text-align: center; line-height: 50px; border-radius: 30px; transition: 0.2s; cursor: pointer;}.form-wrapper .action .btn:hover { background-color: #0392b3;}.form-wrapper .icon-wrapper { text-align: center; width: 60%; margin: 0 auto; margin-top: 20px; border-top: 1px dashed rgb(146, 146, 146); padding: 20px;}.form-wrapper .icon-wrapper i { font-size: 20px; color: rgb(187, 187, 187); cursor: pointer; border: 1px solid #fff; padding: 5px; border-radius: 20px;}github源代码 ...

前沿: 聊起css，印象最粗浅的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名 cut picture boy （切图仔），在页面布局及还原设计图中宽泛应用css来开发页面，我记得刚开始接触最多的就是Bootstrap（用于开发响应式布局、挪动设施优先的 WEB）。然而随着前端突飞猛进的编进，诸如element，ant design等优良的ui库呈现，在比照中感到审美疲劳。言归正传，css近年来了也催生了蛮多新的解决方案，比方 CSS Modules、styled-components（css in js ）、Functional CSS、CSS 原子类、CSS沙盒等等1. CSS ModuleCSS Module 顾名思义就是 CSS 模块化，为什么须要模块化？咱们晓得随着基于vue、react开发SPA的web利用，实质上是由多组件搭建而成，就好比用积木来搭房子，如果这个时候两个组件的款式类名反复了，那岂不是就抵触了？为了解决抵触就须要进行模块化辨别，没有了命名抵触，更好的让组件间沙箱化，而CSS Module就是css模块化的实现形式之一CSS Module 在打包的时候会将类名转换成带有hash值的新类名，依据命名规矩，从而杜绝css类名抵触的问题。 啊呆同学：CSS Module是不是就是Vue: scoped 款式的实现形式呢？答：不是的，CSS Scope是通过限度作用域来实现，款式在部分失效，而不是真正意义上的css Module 咱们晓得，当一个style标签领有scoped属性时候，它的css款式只能用于以后的Vue组件，它的实现原理是通过PostCSS来实现，通过给想对应的dom新增一个属性，同时给css选择器新增一个对应的属性，来对应这个惟一的dom，如下所示 而css module 是怎么样实现的呢，以vue为例子，如何应用CSS module webpack 间接 引入 vue-loader 应用文档vue-cli3内置，能够间接开箱即用， 只须要在style标签标记module，就能够在组件内应用CSS Modules了，更多操作看文档应用文档上面咱们看看CSS Module在vue我的项目中的编译成果 咱们能够看到，CSS Modules在最终构建页面时会主动重命名class，用vue官网形容就是，这个 module 个性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 部分对象。而后你就能够在模板中通过一个动静类绑定来应用它了 啊乐同学：你说CSS Module是 css 模块化的一种实现形式，还有其余CSS模块化实现形式吗？有的，比方BEM 命名标准，还有下节会介绍的 CSS in JS 这里简略介绍下BEM ...

本节咱们学习 Sass 中的循环语句，Sass 中的循环语句能够应用 @for 指令和 @while 指令来实现。 @for指令@for 指令能够用于循环生成款式，@for 指令有两种类型，如下所示： // 第一种@for $i from <start> through <end> // 第二种@for $i from <start> to <end>其中 $i 示意变量，start 示意起始值，end 示意完结值。其实这两种形式的区别就在于，应用关键字 through 时会包含 end 这个数，而应用关键字 to 则不会包含 end 这个数。 示例：如下代码，应用 through 关键字实现 @for 循环： @for $i from 1 through 3{ .width#{$i} { width: $i * 10px; }}编译成 CSS 代码： .width1 { width: 10px;}.width2 { width: 20px;}.width3 { width: 30px;}上述代码中，循环一共循环了三次，从 $i 的值为 1 开始循环，始终到 3 完结，并且包含了 3。 ...

想写一篇对于 SVG 滤镜的文章已久，SVG 滤镜的存在，让原本就十分弱小的 CSS 锦上添花。让仅仅应用 CSS/HTML/SVG 创作的成果更上一层楼。题图为袁川老师应用 SVG 滤镜实现的云彩成果 -- CodePen Demo -- Cloud (SVG filter + CSS)。 什么是 SVG 滤镜SVG 滤镜与 CSS 滤镜相似，是 SVG 中用于创立简单成果的一种机制。很多人看到 SVG 滤镜简单的语法容易心生退意。本文力求应用最简洁明了的形式让大家尽量弄懂 SVG 滤镜的应用形式。 本文默认读者曾经把握了肯定 SVG 的基本概念和用法。 SVG 滤镜的品种SVG 滤镜包含了： feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffsetfeSpecularLightingfeTilefeTurbulencefeDistantLightfePointLightfeSpotLight看着内容很多，有点相似于 CSS 滤镜中的不同性能：blur()、contrast()、drop-shadow() 。 SVG 滤镜的语法咱们须要应用 <defs> 和 <filter> 标签来定义一个 SVG 滤镜。 通常所有的 SVG 滤镜元素都须要定义在 <defs> 标记内。 当初，基本上古代浏览器，即便不应用 <defs> 包裹 <filter>，也可能定义一个 SVG 滤镜。这个 <defs> 标记是 definitions 这个单词的缩写，能够蕴含很多种其它标签，包含各种滤镜。 其次，应用 <filter> 标记用来定义 SVG 滤镜。 <filter> 标签须要一个 id 属性，它是这个滤镜的标记。SVG 图形应用这个 id 来援用滤镜。 ...

办法一：float布局 html局部 <div class="main"> <div class="left"></div> <div class="right"></div></div>CSS局部 .main{ position: relative; width: 100%; height: 100%;} .right{ width: 100%; height: 100%; background: #4caf50;}.left{ width: 200px; height: 100%; background: #4a1362; float: left;}办法二：相对定位 1、右边相对定位，左边设置padding-left html局部 <div class="main"> <div class="right"></div> <div class="left"></div> </div>css局部 .main{ position: relative; width: 100%; height: 100%;}.right{ position: relative; width: 100%; height: 100%; background: #4caf50;}.left{ position: absolute; top:0; width: 200px; height: 100%; background: #4a1362; }2，左边相对定位，左边设置padding html局部同上 css局部 .main{ position: relative; width: 100%; height: 100%;}.right{ position: absolute; padding-left: 200px; top:0; width: 100%; height: 100%; background: #4caf50;}.left{ position: relative; width: 200px; height: 100%; background: #4a1362;}办法三：flex布局 ...

1.css如何作用于html元素？ 1. 内部link导入【内部样式表】 将样式表通过 head标签外部的link标签引入2. 外部style标签【外部样式表】 在style标签外部书写款式 <style> </style>3. 内联style属性【内联样式表】 <div style='款式名:款式值;'></div>4. @import @import '样式表的门路'; <style> @import './1-style.css'; </style>link和@import的区别？ 1) 所属范畴 link 是html中标签，不仅仅能够导入样式表，还能够设置rel属性 rel="stylesheet" 示意导入内部样式表 @import 是css的语法，只可能导入样式表 2) 加载程序 link 导入的款式文件是在浏览器加载html文件的同时被加载 @import 导入的款式文件，是在浏览器加载完html文件之后，再去加载 3) 兼容性问题 link是一个标签，不存在兼容性问题 @import存在兼容性问题，IE低版本无奈反对该语法css选择器 1) 根本选择器 标签选择器 标签名 { 款式名:款式值;}留神： 1、标签选择器能够选中以后文件中所有具备该标签名的元素，而不是某一个 2. 元素不管嵌套多少层，都能够被选中 3. 只有是html的标签，都能够用于标签选择器类名选择器 .类名 { 款式名:款式值;}留神： 1、同一个文件中*类名容许反复* 3、类名选择器存在命名标准问题 数字、字母、下划线 不能以数字结尾 不能以其余标签名作为类名 4、同一个元素能够同时存在多个类名 <div class='one two ...'></div>id选择器 #id { 款式名:款式值; }留神： 1、在同一个文件中id不容许反复 2、id的命名标准与类名的统一通配选择器 用于选中以后文件中的所有元素 * { 款式名:款式值; }留神： 通配选择器个别用于网页款式的初始化逗号选择器 给多个选择器选中的元素设置款式 选择器一,选择器二,选择器三 { ...

1、html 超文本标记语言1. 是标记语言，通知浏览器如何解析html文件2. 超文本与一般文本的区别 一般的文本： 纯字符 超文本： 图片、链接、音视频...3. 浏览器会依照从上往下的程序解析文件4. 对于语法错误不会打印进去5. 能够应用.html和.htm作为文件后缀8、元素属性 1) 外围属性 id 惟一标识 title 题目提醒 style 款式 class 类名2) 特有属性 img src 加载的图片的地址 alt 图片无奈加载时的文本提醒 a href 拜访的链接 target 设置打形式 _self 在以后选项卡关上链接 _blank 新建选项卡关上链接9、html语法 1) 在css中的正文 /* 正文 */ 在html中的正文 <!-- 正文 -->2) 空格 &nbsp; 3) 在文档中无论呈现多少个空白或者换行，浏览器都解析为一个空白 2.块级元素和行内元素 块级元素 div、h1~h5、p、html、body 1) 独占一行空间，不与其余元素共享空间 2) 宽度默认是100%，也就是占满整个屏幕，高度由内容撑开 3) 能够设置宽高行内元素 span、i、bold、img、a、strong 1) 能够与其余元素共享一行空间 2) 宽度由内容决定 3) 默认状况下不能够设置宽高 (给行内元素设置宽高--先将行内元素设置为块级元素或者是行内块元素，再设置宽高) 如何转换块级元素和行内元素? 块转行： display：inline；行转块： display：block；将元素转换为行级，保留块级特色（宽，高） display：inline-block；5、表格 ...

1.单行和多行文本超出省略号<div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契;懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙;有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。 </p> <p class="mutiple"> <span class="c-red">多行溢出：</span>静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然;只管平稳流离，脚步仍然，谋求仍然;只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远;守住最美风光，成为一种境界，悠然而豁达;守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。 </p></div>/*容器*/ .container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } .c-red { color: red; } p { background-color: rgba(189, 227, 255, 0.28); padding: 2px 5px; } /*单行*/ .single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /*多行*/ .mutiple { display: -webkit-box; /*重点，不能用block等其余，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）*/ -webkit-line-clamp: 3; /*行数，超出三行暗藏且多余的用省略号示意...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%; } ...

记得点击蓝字关注咱们哦！ 明天是第六十一个世界气象日主题是 陆地、咱们的气象和天气 （The ocean, our climate and weather） 陆地和天气本就属于同一个公域，两者之间无时无刻不在进行着对话。英国著名作家西蒙·温彻斯特在他的代表作《大西洋的故事》里写到，因为易于取得食物，人类抉择了在海边扎根并建设起文化，对陆地的摸索也由此起步。彼时的人类或者不会想到，陆地不仅提供了食物和远方，也是大部分天气现象的孵化器，同时也决定着寰球的生态格局。随风而行的洋流和水汽，与海洋上的山谷独特作用，塑造了各地不同的风貌——哪里会成为丰饶的良田，牛羊遍地的牧场，或是人迹罕至的荒漠。能够说，陆地是地球气候系统最间接的调节器。甚至能够说，所有对于天气的问题，都能在陆地中找到答案。 厄尔尼诺（El Niño）就是个例子，在厄尔尼诺景象产生期间，秘鲁沿岸地区的海温升高，导致蒸发量减少，进而影响到环流，因而扭转了寒带降雨量，并顺次影响到寰球大多数地区的气流模式，其中，EL负责陆地的局部，SO负责大气的局部。所以气象学家通常将其合称为ENSO景象。对我国来说，厄尔尼诺极易导致北方暴雨洪涝和南方的低温干旱。近百年来我国的重大洪水，如1931年、1954年和1998年长江中下游地区的洪水，都产生在厄尔尼诺景象呈现的次年。从大历史的角度看，比方划分我国农耕文化边界的长城，也是依照由陆地决定的400毫米雨量线建设的。 航海帮人类驯服了宇宙空间，同时也催生了气象学的倒退，笛卡尔在《气象学》中提到：大航海时代，风暴实践、风压定律以及最后的气象观测都从海上而来。借助无限的观测数据，绘制海平面气压、风和温度图，进而对天气的简略意识进行天气预报。明天，古代天气预报的伎俩与当年曾经有了天壤之别。 古代陆地气象——辞别“数据孤岛” 现代化的陆地气象观测零碎能够说无所不包，不仅有海岛主动气象站等观测，还包含气象卫星、海洋卫星等遥感监测伎俩。宏大的观测网络提供了海量的观测数据，这些数据为天气预报提供了可能。有学者认为，古代的天气预报就是在海量的数据中，提取那些不确定、性但却有价值的信息。天气预报技术的通过近百年的倒退，随着遥感时代的到来，数据的采集曾经不再是预报的瓶颈，随着硬件和算力的一直晋升，数据的剖析难度也逐步升高，而数据采集后的存储及高速读取如何实现逐步成为要害的一环。古代陆地气象观测体系图片起源：WIGOS and JCOMM明天，面临数据爆发式增长的年代，如何进步气象数据的读取性能，开掘气象数据价值、是进步预报准确率的关键问题。深耕天气预报服务70多年，中央气象台积攒了海量的气象数据，以国家级中短期天气预报数据系统为例，日增量近4TB左右，如果换算成高清视频的话，这相当于要每天24小时间断不间断的看128天。随着预报精细化水平的晋升和模式分辨率的进步，将来数据将面临指数量级增长。如何高效治理、利用数据，使之服务于本身以及其余行业的倒退，成为亟待解决的难题。中央气象台自主研发的“智慧台风检索利用零碎”就是实现这一诉求的最好案例之一。 智慧台风检索利用零碎平台在台风预报中，预报员常常会借助“历史类似台风”作为预报的重要参考根据，这不仅提醒台风将来可能的倒退变化趋势，也能够预感其可能造成的风雨影响和次生灾祸。“智慧台风检索利用零碎”数据库记录了有记录以来所有台风生命史卫星影像、雷达图像、海温、高低空大气环流模式等海量数据资料信息，平台还将扩散在气象零碎内各部门的气象数据，依照数据格式、数据体量、数据品种、数据维度进行聚类、采集，并与其余行业进行了跨部门、跨零碎、跨业务的集中汇聚，借助华为OceanStor海量存储的高效存储和扩大能力，造成了独特的“行业+天气”数据集，成绩已在保险公司、农业、航空、物流、等行业中利用，突破了气象与行业之间的信息孤岛和壁垒，最大限度的施展了数据的价值。 台风“利奇马”倒退全过程 星辰大海模式领航—— 近海气象导航服务在近海船舶航行中，一艘三万吨的货船在海上航行一天将消耗10000美金的租金和油耗老本，在“平安第一”兼顾“省季节油”的问题上，始终存在着一个利益制衡点。近海船舶气象导航服务被公认为缩小事变、省季节能、进步营运效益的无效伎俩。因而启航前，依据天气和海况材料制订一条航程短、航时少的举荐航线，同时，在航行中实时获取最新天气和可能的航线调整。近年来，中央气象台自主研发的寰球船舶气象导航技术CMRC保障了多艘近海航次。依附高牢靠、高性能的存储及疾速获取形式，海流流向、流速、风浪、涌浪、海温、10米风、能见度等预报数据的及时传递到用户手中。 陆地决定人类将来 向海而兴，背海而衰，陆地不仅蕴含着人类社会可继续倒退的策略资源，也是大国博弈的策略空间。航海家郑和曾说：“欲国家富强，不可至陆地于不顾，财产取之陆地，危险亦来自海上。”陆地决定人类的将来，在走向深海时代的文明化过程里，不仅要器重陆地在全球化中的位置，更要警觉其带来的天然危险和人为挑战。随同大数据、人工智能等技术的疾速倒退，开掘海量数据的价值，实现行业交融迸发出的新能量，不仅对于气象行业自身，对于其余行业也是极大的时机和挑战。开释数据生机，晋升服务效率、做好应答措施，让海量数据不再成为孤岛，是深海时代应有的气象奉献。  往期精选  ·END· 中央气象台科技翻新服务 翻新·绿色·共享 微信号:kjcx\_nmc 我就晓得你“在看”

记得点击蓝字关注咱们哦！ 第六十一个世界气象日即将来临往年的主题是：陆地、咱们的气象和天气（The ocean, our climate and weather）陆地和天气属于同一个公域，两者之间无时无刻不在进行着对话。能够说，陆地是地球气候系统最间接的调节器。甚至能够说，所有对于天气的问题，都能在陆地中找到答案。明天开始，咱们推出系列陆地气象科技翻新产品，带大家一起乘风破浪纵横四海。明天的“陆地故事”是——海雾海雾始终是诗人笔下浪漫的化身“斜月沉沉藏海雾，碣石潇湘有限路”“春风吹柳眼，海雾暗沙头”...... 其实 海雾是一种陆地灾害性天气据统计海上船舶碰撞事变60\%-70\%是由海雾引起。海雾造成能见度升高，也影响海上交通出行。 2018年2月15-25日，琼州海峡呈现间断多日大雾天气 导致琼州海峡大面积开航出岛车辆滞留重大 10万人被堵在海南岛 时至春运完结返程期间引起强烈社会关注。 海雾是怎么产生的？ 海雾是指在陆地的影响下呈现在海上（包含岸滨和岛屿）的雾。也就是说，只有受陆地影响产生的雾能力称为海雾。那些在海洋上生成并随天气零碎挪动到海面上的雾不能称为海雾，只能叫作“海上的雾”。在冷、暖空气接壤地区呈现的雾是一种受天气零碎锋面的影响而产生的雾，海洋上有，海上也有。尽管陆地也可给它带去肯定的影响，但它的生成却是因为海洋天气零碎所致，因此不能列入海雾的范畴。反之，受海上的影响生成并随风挪动到沿岸的雾，尽管产生在海洋上，却被叫作海雾。例如，青岛夏天呈现的雾大部分是由海上吹过来的海雾。海雾如何监测？ 因为海上的观测条件稀缺，对海雾的观测多借助气象卫星FY-4A、Himawari-8卫星的动静阈值实时海雾反演技术等遥感伎俩来进行，以及沿海能见度激光雷达实时监测及基于沿海石油平台、船舶、浮标以及海岛站的监测。近年来，人工智能辨认海雾技术也在海雾的监测中广泛应用。基于人工智能的海雾反演产品（左图为可见光云图，右图为反演产品）海雾如何预报？海雾的预报能够通过天气学的伎俩，综合思考各种可能引起海雾的因素及大气环流场的特色来进行，但因为海雾的造成是一个比较复杂的过程，与大气和陆地的相互作用密切相关，因而对海雾的预报也具备复杂性，目前的预报形式次要是基于海雾数值模式预报零碎，联合能源统计释用技术等主观预报办法实现海雾预报指数。GRAPES海雾区域和雾顶高度预报 中央气象台海雾主观预报办法倒退历程 海雾服务成果如何？通过定量化、精细化、多因素预报和专业化定制服务，中央气象台向公众和国家重大流动提供气象保障。例如“一带一路”、“海上丝绸之路”大雾监测、海军建军70周年青岛海上阅兵保障等。基于FY-4卫星反演的“一带一路”区域海雾监测产品 海上大风除海雾外，远海大风天气过程也十分复杂，间接影响航运平安及海上生产作业。中央气象台采纳概率密度匹配办法对海上10米风场进行了主观勘误，目前已能提供空间分辨率5公里，最长时效达到168小时的主客观海上大风交融预报产品，以及行将推出的逐小时精细化阵风预报产品。 我国陆地气象预报业务起步于20世纪60年代，通过几十年的倒退，已逐渐建设了残缺的以数值预报体系为撑持的，笼罩东南太平洋和南海台风的监测、剖析、预报、预警和服务，中国远海海上大风、海雾、远海强对流等陆地灾害性天气监测预警的陆地气象保障业务体系。往年世界气象日的主题再次把眼光聚焦到陆地，意在呐喊人们器重陆地气象预报技术能力的倒退，开掘陆地气象数据的价值后劲。在走向“深海时代”的文明化过程里，中央气象台将为建设陆地强国，推动陆地命运共同体持续奉献气象智慧。  往期精选  ·END· 中央气象台科技翻新服务 翻新·绿色·共享 微信号:kjcx\_nmc 我就晓得你“在看”

记得点击蓝字关注咱们哦！ 第六十一个世界气象日即将来临往年的主题是：陆地、咱们的气象和天气（The ocean, our climate and weather）陆地和天气属于同一个公域，两者之间无时无刻不在进行着对话。能够说，陆地是地球气候系统最间接的调节器。甚至能够说，所有对于天气的问题，都能在陆地中找到答案。明天开始，咱们推出系列陆地气象科技翻新产品，带大家一起乘风破浪纵横四海。明天的“陆地故事”是台风   2020年，我国经验了历史上绝无仅有的“空台7月”以及常见的西南台风“三连击”，多项指标发明历史，非常常见。热带海洋是台风的老家， 台风能够说是最为强烈的多尺度的海气相互作用的典型代表。台风是如何生成的？首先要有足够广大的寒带洋面，淡水表面温度要高于26.5℃，空气的回升借助弱小的地转偏差力，造成气旋，借助洋面上稳固的下垫面条件，有充沛的工夫积蓄能量，最终酝酿出台风。台风定强是什么？台风强度指的是寒带气旋底层核心左近的最大均匀风速，台风定强就是要确定这个最大风速。因为台风大部分工夫在海上，海上观测站无限，因而只能依附卫星从低空对其进行观测，后利用云图定强。自上个世纪70年代开始，利用卫星图像上的台风波型特色预计台风强度的技术（Dvorak）在业务中广泛应用。明天，随着深度学习技术在人工智能畛域广泛应用，特地是在图像识别方面展示了微小的潜在劣势，为咱们对台风的定强提供了一些新思路。 什么是深度学习？ 深度学习是基于多层神经网络建设模仿人类剖析、学习的模型，模拟人脑机制辨认指标，感知信息，模型通过训练可能主动提取原始数据中隐含的信息造成形象的高层特色示意，将特色示意通过拟合函数进行计算失去决策后果。大气迷信畛域始终在应用机器学习的办法进行钻研，随着高空主动气象站、雷达、卫星等获取的观测数据越来越多，在气象大数据背景下，联合具备弱小的数据学习能力和简单结构特征刻画能力的深度学习已有很多气象畛域的案例，例如短临，气象预测，AQI预测，数据异化，台风，极其天气预测，数值预报优化等等。深度学习在台风强度估测中如何利用？台风个别生成于宽阔洋面，而陆地上观测材料稀少，特地是在台风进入雷达无效探测范畴之前，台风的监测次要依附气象卫星探测来实现。因而在台风业务预报实际中，卫星云图就成为了确定台风强度的最次要的根据，深度学习通过机器对大量样本的剖析和学习，可能隐式提取图像中深层形象的简单特色，越来越多地被利用到估测台风强度的畛域中。国家气象中心联结北京邮电大学，提出了一种端到端的可视化智能台风定强模型，该模型通过计算机视觉畛域成熟的预训练CNN深度学习模型为根底，比方：RESNET、VGG等，对卫星云图数据进行台风强度相干的特征提取，而后依据提取的特色别离构建分类模型和基于类似度的检索模型获取决策后果；最初，交融两个模型的辨认后果，给出最终台风的强度、置信度和参考云图。 端到端的外围模型 人工智能台风定强性能剖析 以2019年登陆我国最强的台风“利奇马”为例来剖析一下深度学习在台风强度估测中的体现。下图是“利奇马”全过程ResNet模型依据云图预计的台风强度与最佳门路强度的时序图。总体而言，模型对台风各个阶段强度的预计与理论变动均比拟统一。在台风加强阶段，对台风在8月6日12时之前的强度预计略有偏弱。在台风倒退阶段，能较好辨认出台风在8月7日疾速加强的过程，对台风峰值强度预计亦较为精确，特地是较为精确地估测出了“利奇马”在8月8日和9日的两次强度峰值。最初，在台风深刻内陆的阶段，尽管台风较弱，但模型对台风强度的预计与实况根本吻合。台风“利奇马”倒退全过程登录智慧台风利用零碎，检索更多台风信息 我国是世界上受台风危害最重大的国家之一。随着寰球气象变温暖我国陆地经济的迅速倒退，台风灾祸有愈演愈烈之势，已成为社会经济可继续倒退的一个制约因素。随着人工智能技术的一直倒退，钻研摸索适宜气象畛域的深度学习模型，更好的利用来自高空主动气象站、雷达、卫星等获取的大规模观测数据，主动、智能、疾速失去更加精准、可解释、可控可调、可视化的预测后果，同时联合人工智能等办法，也必将对台风实时监测乃至预报预测等技术起到微小的推动作用，人工智能技术在台风定强中体现如何？让咱们对往年的台风季刮目相待吧！  往期精选  ·END· 中央气象台科技翻新服务 翻新·绿色·共享 微信号:kjcx\_nmc 我就晓得你“在看”

航海帮人类驯服了宇宙空间，同时也催生了气象学的倒退，笛卡尔在《气象学》中提到：大航海时代，风暴实践、风压定律以及最后的气象观测都从海上而来。人们借助无限的观测数据，绘制海平面气压、风和温度图，和对天气的简略意识进行天气预报。明天，古代天气预报的伎俩与当年曾经有了天壤之别。现代化的陆地气象观测零碎提供了海量的观测数据，借助古代数值天气预报模式，为陆地天气预报提供了可能。第六十一个世界气象日即将来临，往年的主题是：陆地、咱们的气象和天气（The ocean, our climate and weather）陆地和天气属于同一个公域，两者之间无时无刻不在进行着对话。能够说，陆地是地球气候系统最间接的调节器。甚至能够说，所有对于天气的问题，都能在陆地中找到答案。明天开始，咱们推出系列陆地气象科技翻新产品，带大家一起乘风破浪纵横四海。 <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> 船长们的“导航”故事 统计表明，一艘三万吨的货船在海上航行一天将消耗10000美金的租金和油耗老本，在“平安第一”兼顾“省季节油”的问题上，始终存在着一个利益制衡点。  “咱们的船舶类型次要为木屑船，干舷比拟高，受风面积较大，为了更好的给船上同步航线天气，装置了船端气象航线显示软件CMRC-SC, 这样船上可能更直观的看到所在海域和航线的将来5天的天气状况，更为重要的是气象数据能够实现每天两次的更新，同时数据包的大小比个别发的word 类型的预报还要小，在船上取得及时的气象信息的同时还大大节俭了卫星通信的费用”。NOVA CARRIERS公司的船长说到。 “往年8月咱们的船从从越南的CAMPHA 到国内GANYU，气象导航公司 storm-geo报告中提到工夫损失为17.05小时，重油损失为26.254吨，轻油0.5吨。通过CMRC对合同条款的仔细分析和对报告中好天气的断定，提出5点倡议来进行抗辩，最终租家批准从新严格依照合同条款批改报告，最终工夫和燃油的损失均缩小一半。” HMC Shipmanagement 公司的船长示意，“利用CMRC提供的航次性能报告的剖析和抗辩服务，咱们解决了近10起争议，为船东大大减少了由此而产生的索赔。” 船长们口中的CMRC就是由国家气象中心和华洋海事核心有限公司独特打造的集航运定制、航线布局、航行中实时跟踪气象导航服务和航次完结后性能评估的全方位海上航行平安保障一体化气象解决方案。 <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="box-sizing:border-box;float:left;line-height:0;width:0;vertical-align:top;"></svg> 如何为远洋航行提供气象服务？ ▷第一步是整合寰球模式数据，蕴含EC 9KM, GRAPES, NCEP 采纳寰球填色、凤羽、粒子系统、等值线等多种气象展现形式， 蕴含风、温、压、浪、涌、流、能见度和卫星产品等气象要素。 GRAPES数值模式预报产品▷第二步是提供定点的气象预报服务，通过业余的气象剖析，为寰球任意一点提供定制化的精密气象预报服务和寰球任意港口的气象预报。定点天气预报服务 ...

    “2020见证历史”，毋庸赘言这一年咱们都见证了什么。作为预报员，我与天气打交道，在我看来2020年堪称见证历史的天气事件简直就是俯拾皆是，如长江洪水和大半年无台风等。“2021持续见证历史”，一开年，咱们看到了两百年一遇的大洋彼岸国会山事件。紧接着，2月在天气畛域咱们看到了北美大陆常见的极其寒潮和夏季风暴，以及其造成的极其灾祸。但你可晓得，在咱们脚下刚刚产生的天气事件，其极其性丝毫不亚于北美的寒潮，还好，这个天气尽管在气象上极其但并不致灾。是的，这就是2月19-21日席卷长江以北大半个中国的异样升温事件，我暂称之为“史上最暖2月”吧。     上面我将先从升温的区域、升温的过程以及最终造成的破纪录水平三个方面来看看这次事件的历史常见性，而后就事件造成的起因和通过谈谈个人观点，不肯定对。如无特地阐明，文中所有数据和图片均来自中央气象台日常业务平台。     一、史上最暖2月到底有多异样 1）升温区域     下图是一张最高气温分布图，每一个数字代表一个国家气象观测站在2月17 日至21日这5天内的最高气温（并不一定呈现在21日，也有呈现在20日或19日的等），而带有圆圈的数字，示意最高气温平或破了该气象站有历史记录以来的同期最高记录，此图数据的同期指的该日加上前后各5日总共11日期间的历史同期。没有圆圈的数字没有平破记录，但有可能曾经十分靠近，咱们权且以可能平破记录来代表“异样升温”吧。图片可能不大清楚，但足以看出异样升温地区根本囊括了长江以北长城以南的大部，即使长城以北的内蒙古中西部、新疆北部和甘肃局部区域也在破记录范畴之内。这个平破记录的站点数是905，占全国所有国家站的1/3还要多一些。 顺便说一句，气象数据在做历史同期比拟的时候，办法并不惟一，能够是同月，能够是同旬，能够前后5天、10天、15天等等，所取办法不同得出的论断会有不同，但大抵相当，个别不会影响极其性的判断。上面咱们再给出几组数字感受一下这次破记录的酸爽：以21日白天最高气温来看，北京南部、河北中南部、陕西关中、山东大部、河南及以南大部地区有25～29℃，河南西峡达30℃。北京、天津、河北、山西、山东、河南、安徽、江苏、湖北、陕西、辽宁等省（直辖市）共有494个国家气象观测站气温冲破有气象记录以来2月份历史极值，约占全国的1/5，其中冲破极值的站点占当地站点的比例，北京为95\%，天津为85.7\%，山东为83.2\%，河南为77\%，河北为65.5\%。能够看到，因为限定了21日气温和2月极值两个条件，后果与后面有些差别，破记录站点仿佛少了很多，但其实这是因为有的站点最高气温极值呈现在20日或者19日，21日气温破记录数字就变少了。另一个起因是后面的同期工夫是指前后5日，即2月12（17-5）日到2月26（21+5）日之间，历史记录会小于整个2月，被破的数字天然也就高了。显然，因为905这个数字来自5天内的所有破记录站点，因而要比21日破记录的494站更能体现整个异样升温过程。 2）异样升温过程（持续时间和升温幅度） 其实，上述大部地区升温过程都是连日升温，自17日以来气温四连升或者五连升的占据了少数，而大部分地区都在19、20、21三日内达到最高，当升温过程完结历史记录更新之后，大部破记录地区这三日的最高温度都能够排进历史同期前5名，有些甚至占据前3，把过往的历史记录扫到了爪哇国，完虐啊，几乎是按在地上摩擦，我也感觉我这么说有点扯，但一会儿你看了第三局部破记录幅度时心愿你能原谅我。 回过来说本次过程最高气温的升幅，总体而言大部地区的最高气温都在这几天内回升了7-10℃，在南方很多站点升幅甚至达到20℃以上。咱们以北京国家站为例，此次升温前最高气温的低点是2月16日的3.3℃，17日也只有3.6℃，然而之后疾速两连升19日就达到16.7℃，进入过后的历史第四，21日达到25.6℃，总升温幅度达到了惊人的22.3℃。 21日那一天下午我恰好去了趟公园，我看到很多人衣着短袖，然而。。。他们手上都拿着棉袄，也有那懒得脱去还捂在身上的羽绒服。这个节令的北京，如果不太关注天气而后从暖气屋里走进去就这成果。我当然是关注天气的啦，所以我是那个穿短袖的人，嗯。。。手上搭着棉袄的那个，毕竟要春捂不是么，何况北京还没入春。 下图选了南北方向上的三个城市北京、石家庄、郑州的最高气温时序图，根本能够看到残缺升温过程，也代表本次异样升温过程的大部分地区了。 3）破记录水平 从破同期记录的幅度来看，大部地区都是大幅晋升了历史记录，以北京站的前后5日同期历史比拟为例，本次过程是记录两连破，此前的历史第一名1992年2月26日的最高气温17.9℃，20日最高气温将记录进步2.9℃达到20.8℃，21日再次大幅晋升4.8℃达到最高25.6℃，之前的第一曾经被挤到第三名，本次过程的破纪录幅度达到了惊人的7.7度。 好吧，你可能感觉我少见多怪，我给你打个比方：球王贝利年度进球75个你是不是叹为观止了，盖德穆勒给整到了85，差不多40年过来了，这期间你看到一个球员年度进30多个球都是巨星了，你感觉这记录很难破了对吧，而后梅西横空出世了，不光破了还一下子给拉到91球。我要说的是，下一个记录得是120球往上能力匹配我对这次北京气温破记录的赶脚。要晓得，从北京国家站最高气温的气象平均值来看，5月上旬也不过是24.9℃，中旬也才26.3℃啊！而此次破记录之前，历史前十名也不过在15-18℃之间挤着。 下图依然给出北京、石家庄和郑州的历史记录排名做代表，能够看到，石家庄市记录3连破，郑州两连破。从三城破记录的幅度来看，北京最大7.9℃，石家庄次之4.4℃，郑州最小3℃，这个破纪录幅度排序基本上也代表了此次升温极其性差别，总的来说，大部分地区破记录的幅度都能够达到3-5℃，北边大些，南边小些。 综上，这次升温过程从其破历史记录的广度和深度来看都极其异样，尤其是偏北些的地区。只管咱们的观测历史还不太长，大都在百年以内。但如果以有观测记录的历史而言，史上常见恐怕曾经无法形容，我违心称其为史上仅见！ 二、史上最暖2月谁制作？——升温成因及过程的浅析 须要阐明的是，以下剖析和论断仅为作者依所学和工作教训而作，尽管对于其中的次要物理和气象常识以及逻辑还是有信念的，但从学术的角度毫无疑问是不够零碎和不够谨严，工夫精力所限仓促写就，仅供参考。会波及一些专业知识，没趣味的您只有看黑体就行了 1）极简非专业论断版——中西亚暖空气乾坤大挪移 说制作史上最暖2月拢共分几步？ 第一步，中西亚暖空气生成。中亚中南部和西亚地区大抵阿富汗、伊朗、伊拉克等地区及周边，在后期（约2月12-17日）因为继续的晴空日晒，联合其极其有利于承受太阳短波辐射的高空个性（戈壁、荒漠），生产出了大范畴的暖干气团； 第二步，中西亚暖干空气向东北方向输送。18日起这团暖空气开始在东北气流的输送下向东北方向输送，主力军19日达到中亚的北部地区，也包含我国新疆北部、哈萨克斯坦及蒙古国西部等地区，并且这团暖空气并入了原来也出于同样起因成长起来的稍弱些的本地的暖气团； **第三步，暖气团大举东移南下影响我国中东部。20日和21日暖气团踩着它老冤家寒潮常走的路从新疆北部东移南下，制作了我国南方的史上最暖2月。因而这股暖干空气它跟打南边儿来中国冬季风暖湿空气不是一家子，大略是表亲吧，这暖干空气它就是一匹来自南方的狼（热浪）啊。 ** 请看下图动画，留神那团最显眼的红色局部，大抵能够代表我说的暖干空气。你品，你细品。     此图为2月12日至2月22日850hPa等压面的温度和距平，距平就是间隔长年均匀的意思，你能够看做是反常水平，850hPa等压面大抵位于海拔1400多米的低空，留神是海拔，不是间隔高空，觉着哪不对是吧，没关系，置信我这图基本上能反映这个过程就行了，再细说就要业余预警了，我都头疼。     补充阐明很重要：这团暖空气可不是简略的从中西亚先往西南跑再往西北溜达来到我国的，这么说尽管也不错，但其实这只是它的程度方向上较疾速的挪动，时速差不多是60公里左右吧，实际上它还在垂直方向上有很迟缓的挪动，时速大略是几百米，它就像幼儿园小盆友玩滑梯，在从中西亚向东北方向跑的时候是爬楼梯，在从新疆北部向西北方向溜达的时候是坐滑梯。我为什么说这很重要，因为仅仅是程度方向走几千公里切实是稀松平时，但加上这一升一降再拐个弯它才配得上“乾坤大挪移”呀！ 2）正经解释版——大范畴继续晴空日晒和大范畴低空气流下沉增温独特作用 升温的间接起因次要来自两方面，首先是晴空日晒，随着立春后太阳直射点逐步北回，晴空日晒照耀高空升温的能力在疾速加强，而地表升温能够疾速影响底层大气温度，当大范畴间断呈现晴空时有利于温度积攒升高；而后是低空大范畴东南气流的空气下沉增温静止，一般而言，当一团空气从低空下沉到高空时，每降落1000米，温度均匀升高6.5℃。如果下沉的低空大气自身较同高度上游东南地区暖的话，那么西北移并下到高空时就会导致上游高空气温显著回升。本次大范畴升温过程是两者联合的后果，因而这次升温过程尤其极其。而在造成这种极其性的起因上，后者比前者作用更大也更为要害，并且后者还间接影响了前者的施展，因为大范畴晴空天气的次要成因就是大范畴的低空下沉气流。但你要找本源，中西亚的晴空日晒是源头变暖的要害。你如果寰球去绕就是鸡还是蛋的问题了，仅就本地事件而言，后者为主。    下面两张图来自中国气象最重要的国之重器之二：上图是2月21日14时的我国风波4号真彩云图，能够清晰的看到南方大片的晴空区，下图是雷同工夫的我国自主知识产权的寰球数值预报GRAPES-GFS出产的500hPa等压面风，能够看到对应晴空区的大西北风带。气象畛域的国之重器还有，比方多普勒雷达网，不过这次暖事件没它啥事，也快了，强对流事件的时候让它出场。    顺便交叉点小气象科普，没趣味请间接跳过：这个等压面它并不像你看起来像的一条条的拉面哈，它其实就像一张薄面饼，高度大概在海拔5000多米不停的起伏着，咱们剖析它来获取低空大气的很多物理个性，从图能够看到与晴空区相匹配的低空东南气流，风向杆指向风的上游，杆尾地位竖起的一条长线示意4米/秒，一条短线示意2米/秒，一个小旗示意20米/秒，整个杆上的加起来就是风速了，这个风速可比后面动图中850hPa那个快多了，涂色的区域都在16米/秒以上，越蓝绿越快，所以你能够看到仿佛有一条绸带，没错，这就是赫赫有名的西风带了，是影响温带地区最重要的天气零碎。    3）对于暖空气“小盆友玩滑梯”的解释和证据     这个略微难了解一点了，简略点说有两个货色如果你感兴趣能够记住：第一，空气在回升的时候本身会因为减压而降温，反之下沉会因为增压而升温，这个变动与环境温度齐全无关，也就是说并不是因为对流层里低空冷低空暖。第二，在西风带中，大体上大范畴的西南风是俯冲风，西北风是下沉风。回顾下：空气回升冷却凝固成云，我记得这是小学语文课“看云识天气”里科普的常识，而反之呢，课文没说我来说下，下沉就是是晴、热、干的要害了。    回到后面的云图看一下，是不是在中亚发现一条东北西南向的云带呢，云上面有的中央在下雨，有的中央可能就是阴天。这云带就是暖空气小盆友爬的楼梯啦，云带的东北和西部那些晴空区就是暖空气小盆友出世和成长的中央。过了新疆后掉头往西北，那就是小盆友滑下来的滑梯了，滑到哪里哪里暖干。滑下来坐屁墩儿的中央，就是升温最极其的中央了，大抵在华北平原北部。    再看上面两张不同高度和工夫的风温比照图，上图是20日08时500hPa风温，下图是24小时之后即21日20时850hPa风温，最重要的特色是上图我国新疆和西北地区5000米低空的暖带，它其实对应了24小时后下图中我国华北黄淮地区1400米低空的暖带。动态分析了很多这样的图（这里只展现这两张）后，我认为这次史上最暖2月的最要害和次要的造成起因是西北方向来的大范畴下沉气流，它不仅带来了晴空日晒，也带来了干暖空气。     再总结一下，此次大范畴升温，尤其是20-21日北方地区的升温，次要起因是一股大范畴的暖空气从中亚北部、也就是蒙古国西部、新疆北部一带地区自东南向西北方向向我国中东部地区泼洒而来，其门路恰似一次寒潮东移南下，但不同的是暖空气东移南下的过程中是自低空逐步降落的，其主体降落到高空的地区和工夫，也正是最强的影响区域21日的华北地区。进一步查究中亚北部低空暖空气的造成起因的话，则次要来自中亚中南部和西亚东部的低层极暖空气向东北方向回升而来，而中亚中南部低层的暖空气造成的次要起因是这里特有的戈壁荒漠地形极其有利于日晒升温，这一超大坨暖空气从源地造成到传输到起飞至华北周边，整个过程大概有一周多的工夫。堪称乾坤大挪移，令人不禁赞叹大自然造化巧夺天工！    4）说一下网上流传的焚风效应成因说通常来说，焚风指的是山上的风在向山下吹的过程会因为下沉增温效应而气温显著升高且湿度大幅降落。因而，从下沉增温这个角度来说这次升温过程与焚风效应在物理机制上是有类似之处的，但如果间接归结为焚风效应就很不妥了。首先，这几千上万公里继续一周多的时空调度，规模远远超过了下坡过程最多十几小时，所经门路最多至几十公里的焚风；其次，这次导演上下坡的是西风带长波，其下沉是大尺度大气环流的作用，是从低空下沉，也与焚风沿山坡而下是截然不同的。当然了，在整个升温大背景外面，有一小部分地区是存在真正意义的焚风效应相叠加的，特地是在太行山东侧的华北平原沿山等地带，是我国焚风效应常见的地区。 后记：作者目前就任于中央气象台（即国家气象中心）天气预报岗位，20年的职业生涯经验了很多重大或乏味的天气事件，也时常做些气象科普和天气预报解读，今后将不定期推出相干文章与大家分享天然造化神奇天气，斗胆谓之：“涛淘风波、替天说道”，本文是第一篇，感谢您破费贵重的工夫浏览。

作者：Shadeed译者：前端小智起源：dmitripavlutin点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 网格布局是古代CSS中最弱小的性能之一。应用网格布局能够帮忙咱们在没有任何内部 UI 框架的状况下构建简单的、疾速响的布局。在这篇文章中，将会介绍所有咱们须要理解的 CSS 网格常识 ?。 CSS 网格的基础知识咱们间接进入代码，如下所示，先写些标签，源码在这个链接外面：https://codepen.io/Shadid/pen/zYqNvgv <div class="container"> <header>Header</header> <aside>Aside 1</aside> <section>Section</section> <aside>Aside 2</aside> <footer>Footer</footer></div>在下面，咱们创立了一个header、两个aside和一个footer元素，并将它们包装在一个container 元素中。咱们为容器元素中的所有元素增加背景色和字体大小。 .container > * { background: aquamarine; font-size: 30px;}运行的网页如下： 当初咱们增加一些网格属性： .container { display: grid; grid-gap: 5px; grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"}/* Assign grid areas to elements */header { grid-area: header;}aside:nth-of-type(1) { grid-area: aside-1;}aside:nth-of-type(2) { grid-area: aside-2;}section { grid-area: section;}footer { grid-area: footer;}首先，咱们定义了display:grid，它将启用网格布局，而后咱们应用grid-gap在网格元素中减少间隙。 ...

当两个div的大部分css属性都是一样的，但有一小部分的差别须要手动去调整时，大多数状况下将非凡的属性离开成几个独自的class而后别离引入就能够了。不过当非凡元素在伪类里，这个通用的办法仿佛就有些无解了（只是我不晓得，有相应的解法求评论区告知）。 我尝试着搜寻相干的解决办法，遇到最靠近的办法是：和 正当我认为用这个就能很轻易的写出本人想要的成果是我发现我错了，attr属性不知为何就是不能作用在width属性上（可能是写法有误，同求评论区告知），而var也不知如何从html构造中引入。最初误打误撞试出了这样一个办法胜利实现需求，故在此记录。 实现成果：

阿斯顿发阿几十块的 阿斯科利都放假的发售的 a史蒂夫大家离开了 阿斯顿发阿接口发 发送就到了认识 阿接口路上的风光k 阿斯利康的肌肤 阿莱克斯的肌肤 阿数据反馈阿斯利康的肌肤阿斯顿发了 fa 阿斯科利的肌肤 阿斯顿发家lkasjd阿三开的风光卡史蒂夫高兴接口啦s的风光卡拉斯京dfa接口乐飞家a

最终成果源码 关键技术点程度垂直居中首先把须要居中元素的容器设置高度，而后设置元素的top、left属性为50%，最初应用transform拉回元素的50%宽高，另外肯定要设置position属性为relative。 html, body, .container{ height: 100%;}.login-wrapper{ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}文本框去掉轮廓线未去掉轮廓线的文本框的成果如下图去掉轮廓线的文本框的成果如下图 outline: none;文本框禁止显示历史输出内容<input type="text" autocomplete="off" />源代码<!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"> <link rel="stylesheet" href="css/style.css"> <title>Document</title></head><body> <div class="container"> <div class="login-wrapper"> <div class="header">Login</div> <div class="form-wrapper"> <input type="text" name="username" placeholder="username" class="input-item" autocomplete="off"> <input type="password" name="password" placeholder="password" class="input-item" autocomplete="off"> <div class="btn">Login</div> </div> <div class="msg"> Don't have account?<a href="#">Sign up</a> </div> </div> </div></body></html>* { padding: 0; margin: 0; font-family: 'Open Sans Light'; letter-spacing: 0.05em;}html,body { height: 100%;}.container { height: 100%; background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);}.login-wrapper { background-color: #fff; width: 250px; height: 500px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}.login-wrapper .header { font-size: 30px; font-weight: bold; text-align: center; line-height: 200px;}.login-wrapper .form-wrapper .input-item { display: block; width: 100%; margin-bottom: 20px; border: 0; padding: 10px; border-bottom: 1px solid rgb(128, 125, 125); font-size: 15px; outline: none;}.login-wrapper .form-wrapper .input-item::placeholder { text-transform: uppercase;}.login-wrapper .form-wrapper .btn { text-align: center; padding: 10px; width: 100%; margin-top: 40px; background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); color: #fff;}.login-wrapper .msg { text-align: center; line-height: 80px;}.login-wrapper .msg a { text-decoration-line: none; color: #a6c1ee;}参考资源bilibili520设计网 ...

一、单行文本overflow: hidden; text-overflow:ellipsis;white-space: nowrap;二、多行文本.c_contM_word { position: relative; width: 80%; max-height: 189px; text-overflow: ellipsis; background-color: cyan; display: -webkit-box; -webkit-line-clamp: 6;//超出6行暗藏 -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } //或者应用伪元素 .c_contM_word { position: relative; width: 80%; max-height: 189px; text-overflow: ellipsis; background-color: cyan; overflow: hidden; } .c_contM_word::after { content: "...."; // '...' position: absolute; bottom: 0; right: 0; padding-left: 40px;//设置伪元素的paddingleft为40px，已达到遮挡文字效果 background: -webkit-linear-gradient(left, transparent, #fff 55%);//设置padding-left线性突变色彩~~~~ background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }

vue常见的款式生效的总结1.命名抵触问题：因为我的命名抵触，路由跳转进入页面时是这样子的： 刷新后： 解决方案，批改对应的class名称，此种状况下应该是我原本就写过该款式的名称，导致了css重用，所以批改命名就能够解决，批改好路由跳转，不必刷新页面就能够看到：

▍CSS 相干● 1CSS Battle - 在线比拼 CSShttps://cssbattle.dev 在线比拼 CSS ，一个挺乏味的竞争性游戏，一共有12个级别，须要你用 HTML和 CSS 100%还原它给出的页面，而后再尽量减少代码，你也能够查看寰球的排行榜，看解决方案。 ● 2Learn CSS layout - 学习 CSS 布局http://learnlayout.com 在线CSS布局学习，它会一步一步疏导初学者学习 CSS 基础知识，在实践中帮忙初学者把握好 CSS 的布局常识，改善初学者对 CSS 的编写习惯和正确办法。 ● 3Flexbox Froggy - 学习 Flex 布局的小游戏http://flexboxfroggy.com 一个疏导式的学习 Flex 布局的游戏，用 flex 布局让青蛙跳到荷叶上就算实现，游戏外面简直蕴含了所有罕用的属性，这样学习起来很乏味嘞，形象好记忆，谁要是 Flex 布局还不熟的话，在这多练练。 ● 4EnjoyCSS-在线CSS代码可视化工具https://enjoycss.com 在线版的 CSS3 代码生成工具，基于可视化操作，能疾速无编码的环境下调整网页成果和图形款式。就像是在本地应用 PS 或 AI 软件一样。 ● 5CSS-Tricks - CSS 技巧https://css-tricks.com 这个网站一直的在更新一些对于 CSS 的技巧优良的教程和技巧，每天都会更新文章。 ● 6Neumorphism-实现新拟态成果https://neumorphism.io 能够轻松实现新拟态成果，不仅能够批改色彩或填写色值，也能够批改尺寸、半径、间隔、强度、含糊成果以及形态等参数，同时提供了CSS代码能够间接Copy。 ● 7uiGradients - 分享渐变色https://uigradients.com ...

总结：悬浮一级菜单用absolute定位，二级用relative <html><head> <meta charset="utf-8"> <style> .menuDiv ul, .menuDiv li { list-style: none; margin: 0px; padding: 0px; float: left; } .menuDiv>ul>li>ul { display: none; } .menuDiv>ul>li>ul>li { float: none; } .menuDiv>ul>li:hover ul { display: block; } .menuDiv>ul>li>div { width: 120px; line-height: 40px; background-color: #AFE; color: black; text-align: center; } .menuDiv>ul>li>div:hover { color: #f0f; background-color: #bcf; } .menuDiv>ul>li>ul>li>div { width: 120px; line-height: 36px; background-color: #EFF; color: #456; text-align: center; border: 1px solid #ccc; border-top: none; } .menuDiv>ul>li>ul>li>div:hover { color: #a4f; background-color: #cdf; } </style></head><body> <div class="menuDiv"> <ul> <li> <div>菜单一</div> <ul> <li> <div>列表一</div> </li> <li> <div>列表二</div> </li> <li> <div>列表三</div> </li> </ul> </li> <li> <div>菜单二</div> <ul> <li> <div>列表一1</div> </li> <li> <div>列表二2</div> </li> <li> <div>列表三3</div> </li> </ul> </li> <li> <div>菜单三</div> <ul> <li> <div>列表一</div> </li> <li> <div>列表二</div> </li> <li> <div>列表三</div> </li> </ul> </li> <li> <div>菜单四</div> <ul> <li> <div>列表一</div> </li> <li> <div>列表二</div> </li> <li> <div>列表三</div> </li> </ul> </li> </ul> </div></body></html>` ...

min-height 内的height 100% 有效

1、革除原理1.1、什么是浮动官网说法是浮动的框能够向左或向右挪动，直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。 因为浮动框不在文档的一般流中，所以文档的一般流中的块框体现得就像浮动框不存在一样。 详情请看官网。最后人们应用浮动是为了实现图文盘绕的成果，但起初在为了实现某种布局的时候也会用到浮动，然而以此又会产生典型的问题，那就是影响兄弟元素的地位以及父元素高度塌陷。 1.2 浮动成果如果兄弟元素是块级元素，则会被浮动元素遮挡，如果是内联元素，则会尽可能围绕浮动元素。 1.2.1 图文盘绕：<div class="box"> <img class="picture" src="bg.jpg"> <p>盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字</p></div>.box { width: 400px; border: 1px solid #333;}.picture { width: 50px; height: 50px; float: left;} 1.2.2 兄弟元素被笼罩<div class="box"> <img class="picture" src="bg.jpg"> <div class="sibling">兄弟1</div> <div class="sibling">兄弟2</div> <div class="sibling">兄弟3</div></div>.sibling { background: red; width: 170px; height: 50px;}兄弟1被浮动的图片遮挡住了，然而文字还是盘绕成果，强不强？ 1.2.3 父元素高度塌陷<div class="box"> <img class="picture" src="bg.jpg"> <div class="son"></div></div>.picture { width: 50px; height: 50px; float: left;}.son { background: red; width: 50px; height: 50px; float: right;}很显著后两种成果不是咱们想要的，所以咱们就要想方法解决掉～ 2、如何革除2.1 原理clear 属性定义了元素的哪边上不容许呈现浮动元素。在 CSS1 和 CSS2 中，这是通过主动为革除元素（即设置了 clear 属性的元素）减少上外边距实现的。在 CSS2.1 中，会在元素上外边距之上减少革除空间，而外边距自身并不扭转。不管哪一种扭转，最终后果都一样，如果申明为右边或左边革除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。1）革除浮动：也就是咱们常说的clear属性，对应CSS中的属性是 clear：left | right | both | none；2）闭合浮动：更确切的含意是使浮动元素闭合，从而缩小浮动带来的影响。当初革除了浮动，然而，这只是革除了浮动对于兄弟元素的影响，而高度塌陷的问题还没有解决，因而，咱们须要更高级的革除浮动——闭合浮动。 ...

最近在温习的时候总感觉有些知识点总结过，然而翻了一下博客没有找到，才想起来有一些内容是放在部门的技术分享里的，趁这个时候跳了几篇绝对有价值的梳理一下，因为都是PPT，所以内容绝对零散，以要点和图片为主。 第一篇是我在工作上刚刚能稳步前行时实现的，Boostrap在咱们的工作中占有肯定的比重，为此我专门进行了深刻学习，题目比拟宽泛，但内容绝不是复述官网的流水账，Bootstrap尽管简略，而且也有新的布局模式诸如Flex、Grid此类，但其外围的开发思维————挪动设施优先依然对咱们当初的开发有所领导，这篇分享也是着重于这一点。 简介起源Bootstrap原名Twitter Blueprint，是由Twitter推出的一个用于疾速开发Web应用程序和网站的前端框架。开发的初衷顾名思义，作为开发的蓝图和范本与咱们当初的需要没有太大的区别，就是因为须要一个通用的框架来省去一些反复的开发内容。其次要特点有： 挪动设施优先敌对的学习曲线响应式设计卓越的兼容性12列响应式栅格构造四个次要版本1. 1.0.0Twitter推出的原始版本。 2. 2.3.2开始反对响应式网页设计(RWD)。页面布局能够依据显示网页的设施（桌面、平板电脑、手机）来进行动静调整。 3. 3.3.7即第三版的最终版本，是当初应用较为宽泛的版本，顺应时代的潮流，将挪动设施优先作为设计方针，更加强调了响应式设计。放弃了对IE7的反对。 4. 4.x.x至今为止仍在更新，我集体还不太熟悉。放弃了对IE9的反对。 重置款式大家开发中应该有这样的教训：即便是雷同的款式和标签，在不同的浏览器上也会呈现出不同的样子，对于Bootstrap这种通用框架来说，跨浏览器的一致性是十分重要的，所以开发者通过引入重置款式 Normalize.css 来让各个浏览器的CSS款式有一个对立的基准，这个基准次要的内容是“清零”： 移除body的margin申明设置body的背景色为红色为排版设置了根本的字体、字号和行高设置全局链接色彩，且当链接处于悬浮:hover状态时才会显示下划线款式如何开始Bootstrap的应用非常简略，这里以3.3.7为例，官网上曾经有十分清晰的引入阐明了，这里不再赘述，次要阐明是阐明一些要点。 HTML5文档类型Bootstrap 应用到的某些 HTML 元素和 CSS 属性须要将文档类型 DOCTYPE 设置为HTML5。在你我的项目中的每个页面都要参照上面的格局进行设置： <!DOCTYPE html><html> ....</html>不同的文档类型可能会导致页面渲染出不同的后果，应用同样的代码，但显示进去的后果却又些许不同，可能问题就出在这里，Bootstrap官网指定应用的HTML5版本。 挪动设施优先挪动设施优先是 Bootstrap 3 的最显著的变动。为了让 Bootstrap 开发的网站对挪动设施敌对，确保适当的绘制和触屏缩放，须要在网页的 head 之中增加 viewport meta 标签。 在之前的 Bootstrap 版本中（直到 2.x），您须要手动援用另一个 CSS，能力让整个我的项目敌对的反对挪动设施。当初不一样了，Bootstrap 3 默认的 CSS 自身就对挪动设施敌对反对。Bootstrap 3 的设计指标是挪动设施优先，而后才是桌面设施。这实际上是一个十分及时的转变，因为当初越来越多的用户应用挪动设施。为了让 Bootstrap 开发的网站对挪动设施敌对，确保适当的绘制和触屏缩放，须要在网页的 head 之中增加 viewport meta 标签，如下所示：<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性管制设施的宽度。假如您的网站将被带有不同屏幕分辨率的设施浏览，那么将它设置为 device-width 能够确保它能正确出现在不同设施上。initial-scale=1.0 确保网页加载时，以 1:1 的比例出现，不会有任何的缩放。 在挪动设施浏览器上，通过为 viewport meta 标签增加 user-scalable=no 能够禁用其缩放（zooming）性能。通常状况下，maximum-scale=1.0 与 user-scalable=no 一起应用。这样禁用缩放性能后，用户只能滚动屏幕，就能让您的网站看上去更像原生利用的感觉。这种形式并不举荐所有网站应用，视状况而定！ ...

2021-3-17 11:27最近闲来无事，捣鼓捣鼓CSS发现了一个比拟好动画库，就是TweenMax用起来稍微有点麻烦，然而成果的确能够。 首先在angular中应用TweenMax就得先通过npm 装置 1. npm install --save-dev gsap2. npm install --save-dev @types/gsap而后再引入import {TweenMax} from "gsap"; 就能够在页面中应用了。 遇到的第一个问题就是，想要动画通过按钮触发来不停的播放然而动画播完一遍当前，怎点按钮都不会触发 前面找到了起因，须要在重复触发的时候，扭转其地位才行，比如说一开始的X为500，动画播完后X的地位就是500了，再重复触发，地位还是500所以不会有作用，所以想要重复触发，就得批改其地位 this.test = new TweenMax('.box',3,{ x:this.direction?0:500, ease:Bounce.easeOut }) 第二个问题就是，在页面上，想要在动画过程中和完结当前扭转蓝色按钮的状态和文字，后果发现间接用绑定在按钮上的属性不可能实现这个操作 <button [disabled]="isMoveing" style="margin-top: 10px;" nz-button nzType="primary" (click)="repeat()"> {{describle}}</button>this.test = new TweenMax('.box',3,{ x:this.direction?0:500, ease:Bounce.easeOut, onStart:function(){ this.describle = '静止中' this.isMoveing = true }, onComplete:function(){ this.describle = '动' this.isMoveing = false } })通过一番折腾察觉，其实是this指向的问题上图能够看到，在TweenMax办法中，this指向的是Tween这个办法自身，而咱们须要扭转的对象，是处在组件中的，也就是下图所示 定位到了问题所在处，那解决起来就比较简单了，在函数作用域之外的中央定义一个元素指向正确的this就行 let _this = thisthis.test = new TweenMax('.box',3,{ x:this.direction?0:500, ease:Bounce.easeOut, onStart:function(){ _this.describle = '静止中' _this.isMoveing = true }, onComplete:function(){ _this.describle = '动' _this.isMoveing = false } })这样就失常了。 ...

基于Vue和Quasar的前端SPA我的项目实战之环境搭建（一）背景crudapi增删改查接口零碎的后盾Java API服务曾经全副可用，须要一套后盾治理UI，次要用户为开发人员或者对计算机有肯定理解的工作人员，通过UI配置元数据和解决业务数据，通过调研最终决定通过Vue实现SPA单页面Web利用，关上浏览器就能够很方便使用。 技术选型Vue目前支流的三大前端框架别离是Angular、React、Vue。其中Angular适宜大型项目，React的JSX语法集体感觉不是很好。因为本我的项目不是很简单，并且防止引入Typescript，精力放在通用的原生Javascript（防止自觉谋求新技术，把握原生Javascript才是王道，就像C++永远不会过期一样），所以最终抉择了Vue，并且采纳原生js开发。 Quasar抉择好Vue之后，还须要抉择一款UI库，国内支流的有Element UI，iView，Ant Design等，国外比拟风行的是Quasar，官网的介绍如下：One source code for all platforms simultaneously through Quasar CLI with all the latest and greatest best practices out of the box. Focus only on your app's features and forget about the boilerplate around it. 通过比照，最终抉择了Quasar, 次要起因有三点： 控件十分丰盛，谷歌material design格调，基本上能满足大部分的场景。脚手架很弱小，和SPA，PWA，Cordova，Electron，SSR等默认集成，不须要花精力搭建环境，一键运行调试打包。非KPI产物，文档齐全，作者全职保护，目前为止，github的Star数为17.8K 环境搭建装置nodejs官网https://nodejs.org下载安装即可，要求nodejs版本大于等于10，然而倡议不要大于14，教训证版本12是能够的。 node -vv12.16.1装置@quasar/cli须要全局装置脚手架，如果是间接下载曾经创立好的工程，能够不装置，然而为了后续开发不便，倡议装置一下。 npm install -g @quasar/cli创立我的项目通过命令quasar create创立，名称为crudapi-admin-web quasar create crudapi-admin-web参数抉择如下： 运行我的项目cd crudapi-admin-webnpm installquasar dev能够在package.json外面增加scripts脚本 "scripts": { "dev": "quasar dev", "build": "quasar build"}而后也能够通过命令npm run dev调试运行 ...

本节咱们学习 Sass 中的 @media 指令，@media 指令用于设置款式规定到不同的媒体类型，这和 CSS 的应用规定差不多，然而它还有一点不同，就是 @media 指令能够嵌套在 Sass 选择器中。有点相似于 JS 冒泡性能，它会冒泡到样式表的顶层。 @media指令的应用示例：.xkd{ width: 300px; height: 100px; @media screen and (orientation: portrait) { width: 500px; }}编译成 CSS 代码： .xkd { width: 300px; height: 100px;}@media screen and (orientation: portrait) { .xkd { width: 500px; }}orientation 用于定义输出设备中的页面可见区域高度是否大于或等于宽度，可选值有两个，portrait 示意指定输出设备中的页面可见区域高度大于或等于宽度，除了 portrait 值状况外，都为 landscape。 @media 反对嵌套示例：例如咱们在一个 @media 中嵌套另一个 @media： @media screen { .xkd { @media (orientation: landscape) { color: #ccc; } }}编译成 CSS 代码： ...

inherit关键字有时，咱们想用继承代替一个层叠值。这时候能够用inherit关键字。能够用它来笼罩另一个值，这样该元素就会继承其父元素的值。 initial关键字每一个CSS属性都有初始（默认）值。如果将initial值赋给某个属性，那么就会无效地将其重置为默认值，这种操作相当于硬复位了该值。 这么做的益处是不须要思考太多。如果想删除一个元素的边框，设置border: initial即可。如果想让一个元素复原到默认宽度，设置width: initial即可。 auto不是所有属性的默认值，对很多属性来说甚至不是非法的值。比方border-width: auto和padding: auto是非法的，因而不会失效。能够花点工夫钻研一下这些属性的初始值，不过应用initial更简略。但要留神在IE下的兼容性很差。 申明display: initial等价于display: inline。不论利用于哪种类型的元素，它都不会等于display: block。这是因为initial重置为属性的初始值，而不是元素的初始值。inline才是display属性的初始值。

如果一个元素的某个属性没有层叠值，则可能会继承某个先人元素的值。、但并不是所有的属性都能被继承。默认状况下，只有特定的一些属性可能被继承。 次要是文本相干的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing

金融基酒的IT人生在《科创人》的专访名录中，陈霈霖异类得过于醒目：大学就读于北师大商学院金融系，人生幻想是做一名职业经理人，系统性深度学习IT技术是毕业入职金山游戏之后的事。 陈霈霖将独特的成长门路归因于原生家庭影响。别家孩子接触电脑，要么是玩游戏产生趣味，要么是学习编程起手，而陈霈霖的IT初恋却是WPS+DBase——陈母是政府文员，工作内容是在DOS操作系统下整顿各种数据。同龄孩子在FPS、RPG的世界里大杀特杀，陈霈霖却在母亲的领导下，写写文档、输出命令，对着屏幕上的每一点变动欢呼雀跃。 8岁那年，陈霈霖自学编程，高中便尝试参加互联网社区的建设、经营，之所以没有抉择IT业余，“一是自认为技术能力够用，二是感觉IT技术要为某个事件服务，这些事件领有更高的价值，所谓‘这些事件’大略就是明天咱们谈的‘场景’”。 “扎根场景之中，探寻应用技术优化场景效率、晋升场景价值的可能性”，这一具备前瞻性与格局的场景化技术思维，一直推动他进行各种尝试。 大一那年陈霈霖胜选班长一职，上任第一件事是采集同学个人信息，别家班长都是发纸—填写—收取—上交，陈霈霖眉头一皱;计上心来，用JavaScript写了一个报名网站运行在iPod Touch上，为了避免同学误触Home键（那个年代iPhone系产品还是陈腐货色），他还很周到地用黑胶布将设施的下巴部位缠了三圈。 在这套稚嫩但因素俱全的“软硬件一体化解决方案”撑持下，设施在全班同学手中传递一轮，便生成了一张信息残缺的电子表单。 自此，“用技术解决理论问题”成为了陈霈霖的多巴胺明码。他的业余读物，既非金融亦非IT，而是诸如“星巴克数字化转型故事”“麦当劳背地的IT零碎”这类IT伎俩帮忙传统企业转型的材料，并且积极参与计算机专业同学接的我的项目，搞定各种企业理论需要。 大四那年，金山校招，向陈霈霖收回了定向邀约，“那时候也不太懂，光晓得这公司特地有名，在我心里感觉和微软是同级别的——当然起初发现不是一回事（笑）”。顾不上职业经理人的幻想，2012年陈霈霖加盟金山游戏。 科创人：在金山的那些年，您最大的播种是什么？ 陈霈霖：扎实的技术能力。进入职场之后，才晓得本人有多菜，就像NCAA的状元进入NBA也要经验菜鸟赛季一样，业余爱好者与职业专家的能力鸿沟不言而喻。有了那段经验，我才真正意识到“1万小时定律”的价值，真正系统性地把握了C++语言。 科创人：您是自由选择学习C++的，还是团队的选型需要？ 陈霈霖：岗位要求，金山毕竟是一家创立较早的公司，刚退出的时候我也困惑，感觉团队的技术栈选型偏旧。但回过头来看播种其实很大，学习C++帮忙我更透彻地了解计算机根底原理，兴许效率上Java更好，但C++更为扎实。 结缘喜茶敢想敢做的数字化转型先锋陈霈霖在金山苦修五年，前三年任职游戏开发，后两年参加多款To B工具研发，在开源社区积攒了肯定知名度。2017年，陈霈霖带着本人的解决方案登门拜访彼时风头正劲的喜茶，本是打算谈个单子，一来二去却收到了来自喜茶创始人聂云宸的诚挚邀约：咱们这边缺一位IT主管，是否无意？ 陈霈霖长考了数月工夫，一个IT人加盟一家奶茶企业，到底是不是人生正途？最终他压服了本人，“我钻研过那么多胜利企业案例，现在有一机会亲自实际，危险再大也要把握”。 2017年，陈霈霖只身一人退出喜茶，负责数字化转型小组负责人一职。短短两年多工夫内，陈霈霖不仅晋升为CTO ，实际上更是集数字化产品策划、技术研发、网络经营、IT 治理四大职能于一身，堪称喜茶的数智大脑。 科创人：数字化转型是近年来的热门话题，它意味着改革，改革必然随同矛盾、抵触，您胜利帮忙传统企业实现了数字化转型，您是如何协调各方利益、弛缓矛盾抵触的？ 陈霈霖：在喜茶我抉择了高风险、高回报的改革形式：大刀阔斧、四面出击，力争短期内取得成效。这种做法非常危险，如果在一个大企业这么做，我大概率活不过半集（笑）。 我认为_传统产业IT化的基本痛点源于“人心”_，抵触情绪无处不在，我说要做小程序，有人说小程序留不住客户，必须做APP；有人要上OA零碎，我说不必OA，企业微信、钉钉就是了；有人要上ERP，我说当初那些云版收银零碎里都有供应链治理，他们又不信，前面上了1000万的 ERP；还有会员，要学星巴克收钱办张实体卡，我说扫个码就是会员；我要组建IT团队，有人拥护，说这些外包就好了，为什么要本人做……数字化转型每一步都有阻力，起因次要有两点：一是拘囿于传统办法和传统思维，不愿走出舒服区；二是改革影响了本身利益，任何一个胜利的企业外部都有既得利益存在。我决定争取每一个阵地，否则谬误的方向会带来更高的革新老本、甚至间接挫伤企业经营，这未必是最好的决定，大家要依据理论状况抉择成功率更高的办法。 好在聂云宸对我给予了很大反对，数字化转型的铁律：如果不能获得宽泛共识，就全力压服CEO（笑）。 科创人：顶层的无力反对必定须要实际效果来“续费”，任何企业都不可能任由改革一直制作老本的同时却看不到成果，您在这方面采取了哪些办法？ 陈霈霖：您还挺会问的（科创人：谢谢），我将企业数字化分成四个板块，数据平台、数据引擎、数据营销、数据管理局部，最容易出问题的是数据营销，或者精确些说，与用户无关的那局部。任何一个企业之所以存在，都是因为有客户需要存在，在公司与客户的关系上制作优化成果，最容易建设广泛共识、弛缓矛盾。最后咱们甚至没有制作工具，仅仅是应用企业微信进行客户治理，就能直观展示与客户经营相干的数据增长，空谷传声，投入产出比肉眼可见。 真正的数字化转型有一个人造劣势，就是数据出现、价值可感知。相比之下，1000万的ERP，多久能力发出老本？哪些收益该当计算为ERP的功劳？很难说分明。 科创人：在您看来，数字化转型的难关、深水区，是哪个阶段或者哪些畛域？ 陈霈霖：我认为是企业规模扩充后，IT团队的一道选择题：工具还是代码，这个问题是我来到喜茶的间接起因之一。企业倒退到肯定规模，会须要各种各样的零碎，你会发现这些零碎都是跟Excel相干，是将各部门的Excel表变成一个在线化的零碎。传统办法就会想找工程师来写代码、做零碎，21世纪过来20年了，我不认为这是正确的办法，这样做只会一直积攒问题、制作新问题，锅会越来越大，最终将制约企业良性倒退。正确的解决方案，该当是创立一个能够更快生产零碎的产品——这就是维格表的雏形想法。 我写了一个Demo，心愿可能成立独自团队孵化经营，并且也能无效解决喜茶规模扩张带来的挑战，惋惜没有失去认可。我过后感觉这个问题不解决的话，就算过后不下岗，过几天也要下岗，索性本人走进去，将我认为正确的事件养大、做精。 -- 广告-- 裸创维格15张落地页之后抉择斗争2019年6月，陈霈霖净身出户，裸辞守业。和诸多理想主义者一样，从守业的那一天起该当经验的市场毒打，一样都不会少。 首先是融资难，即使有爆款企业的胜利经验背书，陈霈霖仍然在资本市场吃饱了闭门羹。印象最深的一次是，有一次北京流动邀约“喜茶CTO陈霈霖”参会，五星级酒店款待，陈霈霖笑嘻嘻地北上进京——第二天便住进了68元/晚的招待所。 住在招待所的那段日子，陈霈霖访问了京城多家出名天使投资机构，满载而归，最大的播种反而是招待所的室友们：隔壁床是一家地产企业的副总裁，陈霈霖到职前恰是喜茶副总裁，两位副总促膝长谈守业艰苦、人生唯苦；同屋还有备考的研究生、筹备出国学习外语的中学生，“连我本人都有一种进京赶考的感觉，惋惜我的问题是‘落榜’”。 柳暗花明的是，陈霈霖本认为喜茶时结识的PE投资机构不会对初创我的项目有趣味，但理解到维格表的构想后，后者被动登门表白合作意向，这让陈霈霖深深感慨：融资的外围是气味相投的信赖关系。 最终，IDG、天图成为维格智数的天使投资。 2019年9月，维格正式启动，2020年6月产品内测，同年10月公测。 科创人：维格表是一款什么样的产品，它能解决哪些问题？ 陈霈霖：vika 维格表是一款面向 API 的智能多维表格，定位于新一代企业数据合作工具。作为多维表格的首创者，vika 维格表将过来简单的 SaaS 企业软件简化得像 Excel 一样灵便易用，能够无效满足不同行业、盘根错节的数据管理需要，帮忙企业打造可配置的新型数字化零碎。 科创人：守业以来，哪些事件与您的预期背离最大？ 陈霈霖：那可太多了，比方我感觉产品上线就能大卖，后果显然不是如此，我意识到守业这事不能太乐观，开始调整本人的预期；比方咱们认为这是一款用于企业数字化革新的工具，可真正的种子用户却是产品经理、项目经理、电商经营人员这些新新人类，还有些敌人拿来用做化妆品治理、网盘、市场数据分析…… 这个景象的背地，也是我最大的预期背离，就是“市场到底怎么看我”。我其实一度很厌恶他人认为咱们是个表格，可咱们做了15款落地页，什么“一站式数字化平台”“人力资源转型工具”“批发数据管理工具”…后果发现大家都认为咱们就是表，那咱们就必须是个表，以前起名字还想过要叫维格云，算了，就叫维格表吧。包含大家都认为咱们是Excel的替代品，我想了想不无道理，其实Excel是第一轮数字化浪潮的外围工具，咱们在外围层面革新争取成为第二次浪潮的引领者，不是好事。 我始终置信做事件务必要尊重内部视角，直到本人守业，才意识到尊重内部视角自身意味着否定本人的志愿，这很苦楚，但还是要做。我不置信产品为王，还是要去客户那里找答案，看看他们到底须要什么，哪怕再不了解，也要从他们给出的选项中抉择。 剧透：维格表并非工具咱们还在路上科创人：目前有很多C端用户在应用维格表，但依据您的战略规划，维格表仍然会是一款To B产品？ 陈霈霖：我对维格表的分类是“B端化产品C端化经营”，在推广层面我会采纳很多C端的推广伎俩，和Excel一样，任何一个人应用Excel都不是有销售上门来找你。 科创人：您已经说过做事件要“弄脏双手”，我了解为这是深刻场景、间接解决问题的态度，但为何您的创业项目抉择做一款工具？ 陈霈霖：这里要剧透一下，咱们不是纯工具，维格的倒退布局是从技术产品到解决方案提供者，只是咱们还在路上。 科创人：从技术工具到交融场景价值的解决方案，是To B服务中的一道微小鸿沟，维格决定挑战哪些行业或畛域？ 陈霈霖：咱们是一个十分好的一站式企业数据管理与合作平台，包含OKR、项目管理、CRM、内容生产、流动经营，能够从公司、人、事的指标和具体的工作内容全副合作一体。传统的零碎会把这些割裂开，比方研发项目管理，到了经营和市场就生效了，数据和公司整体合作就断层了，所以咱们给新经济和互联网公司讲维格表，他们很容易了解并推广至团队。 科创人：那么在各个领域内，维格与目前市面常见的畛域垂直类软件服务，有哪些差异化竞争劣势？ 陈霈霖：咱们并不是这些软件服务产品的竞争对手，而是他们的连接器，以往这些产品的数据都来自Excel，维格表更好地满足依赖Excel的一部分需要。 科创人：您已经提到过，Landing（落地）是一个让您领会到震撼感的词汇，维格表的B端落地有哪些办法？ 陈霈霖：谈下想法吧，我认为To B服务就像按摩师一样，每服务一个企业就是一次“上钟”，要想服务好，间接上手一套标准化捏法，只会把客户按跑，留下一堆牢骚。真正的落地，肯定要先问分明客户哪里不难受、是踢球伤到了还是爬山累到了？再有针对性的提供服务，并且最终解决掉客户的苦楚。 咱们非常重视最终给客户发明的价值，施行团队、客户胜利团队正在组建当中。

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录对于前端的开源工具、优良文章、重大库版本公布记录等等，周刊中优良文章会在公众号全栈成长之路逐个推送。每周一公布，订阅平台如下，欢送订阅。 订阅网站: https://weekly.shanyue.tech订阅Github: shfshanyue/weekly封面 祁连山国家公园青海片区拍摄到的荒漠猫 一句话Flutter 将成为将来构建 Ubuntu App 的默认抉择。原文:Ubuntu Makes Flutter ‘Default Choice’ for Future Desktop Appsflexbox 布局时可应用 CSS 属性 gap 管制 item 间隙npm outdated 可查看以后我的项目中的过期 Package2021春运全国铁路、公路、旱路、民航共发送旅客预计达到8.7亿人次，比2019年同期降落70.9%，比2020年同期降落40.8%。北京市文旅局推出12条赏花游主题线路，有迎春、玉兰、桃花、梅花、杏花等，详见 北京的春天去哪里看花？微信 Mac 桌面版开始反对朋友圈开发利器一、 bestofjs: 发现 Javascript 最好的框架与库这里有 JS 生态最风行的库，实时刷新并举荐，并且可每周订阅 repo: ritz078/transform二、 Lorem Picsum: 随机一张指定尺寸图片 API https://picsum.photos/200/200 将随机从 Unsplash 取一张指定尺寸的图片 repo: DMarby/picsum-photos三、 risingstars: 2020年 Javascript 明星我的项目2021 年，JS 各个生态圈中最风行的框架及周边产物，如 React 生态圈、Vue 生态圈、GraphQL 生态圈、构建工具生态圈等 四、 User Agents: 对于 UA 的所有 领有大量 UA 的数据库及相干性能 ...

作者：valentinog译者：前端小智 起源：valentinog点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... Web 开发中的 cookie 是什么?cookie 是后端能够存储在用户浏览器中的小块数据。 Cookie 最常见用例包含用户跟踪，个性化以及身份验证。 Cookies 具备很多隐衷问题，多年来始终受到严格的监管。 在本文中，次要侧重于技术方面：学习如何在前端和后端创立，应用 HTTP cookie。 后端配置后端示例是Flask编写的。如果你想跟着学习，能够创立一个新的Python虚拟环境，挪动到其中并装置Flask mkdir cookies && cd $_python3 -m venv venvsource venv/bin/activatepip install Flask在我的项目文件夹中创立一个名为flask app.py的新文件，并应用本文的示例在本地进行试验。 谁创立 cookies ?首先，cookies 从何而来？ 谁创立 cookies ？ 尽管能够应用document.cookie在浏览器中创立 cookie，但大多数状况下，后端的责任是在将响应客户端申请之前在申请中设置 cookie。 后端是指能够通过以下形式创立 Cookie： 后端理论应用程序的代码(Python、JavaScript、PHP、Java)响应申请的Web服务器（Nginx，Apache）后端能够在 HTTP 申请求中 Set-Cookie 属性来设置 cookie，它是由键/值对以及可选属性组成的相应字符串： Set-Cookie: myfirstcookie=somecookievalue什么时候须要创立 cookie？ 这取决于需要。 cookie 是简略的字符串。在我的项目文件夹中创立一个名为flask_app.py的Python文件，并输出以下内容： from flask import Flask, make_responseapp = Flask(__name__)@app.route("/index/", methods=["GET"])def index(): response = make_response("Here, take some cookie!") response.headers["Set-Cookie"] = "myfirstcookie=somecookievalue" return response而后运行应用程序: ...

meter 标签meter 标签能够用来示意已知范畴的数值，例如： <meter min="0" max="500" value="350"></meter>在 Chrome 上会显示为： required 属性有的时候 React、Vue、antd 等框架和库用的多了，对原生的 html 标签反而不相熟了。事实上，原生的 html 标签也反对表单的必填校验，设置 required 属性为 true 即可。 <form> <input type="text" id="username" name="username" required="required" /> <input type="submit" /></form>如果输入框中没有填值就点击「提交」按钮，输入框下方会呈现以下提醒： download 属性download 属性次要被用在 link 标签里，来使用户能够从网页上下载文件。例如： <div> <a href="image.png" download="imageName">下载图片</a></div>能够把新的文件名作为值传给 download 属性。 abbr 标签abbr 标签用于代表缩写，并且能够通过可选的 title 属性提供残缺的形容。 当鼠标 hover 在 abbr 标签上时，鼠标上会悬浮出 title 的属性中的内容。 <p> You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

CSS 是一种用来体现 HTML 或 XML 等文件款式的计算机语言，置信敌人们对它都不生疏，今日给大家整顿一个与 CSS 小技巧相干的合集，心愿为大家提供一些设计新思路~ CSS 有各种玩转的形式，一起来看看吧~1、小技巧！CSS 整块文本溢出省略个性探索明天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 咱们都晓得，到明天（2021/03/06），CSS 提供了两种形式便于咱们进行文本超长的打点省略。 对于单行文本，应用单行省略： {    width: 200px;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;} 而对于多行文本的超长省略，应用 -webkit-line-clamp 相干属性，兼容性也曾经十分好了： {    width: 200px;    overflow : hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;} CodePen Demo -- inline-block 实现整块的溢出打点 https://codepen.io/Chokcoco/p... 问题一：超长文本整块省略 问题二：iOS 不反对整块超长溢出打点省略 2、原来CSS的background还能够这么玩身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到，绝大多数状况下咱们都只会应用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣，通过本文让你用纯CSS也能够开发出炫酷的背景。 开始之前 在开始之前，先请你答复上面的问题，如果你能全副答复正确，阐明你对 background 属性把握的还不错哦！ 1.径向突变默认形态是什么？ A：原型 B：椭圆形 background 属性的值为多个时，哪个值的图层在最顶部？A：第一个值 B：最初一个值 background: green, linear-gradient(red, pink); 成果是什么？A：绿色背景 B：红粉突变背景 C：没有背景 当background属性有多个值时，如何指定每层背景的大小？根底背景 首先还是先回顾一下根底背景有哪些，最简略的就是 纯色背景： background: pink; 线性突变，当然你还能够自定义方向： .linear {    background: linear-gradient(red, pink);}.linear1 {    background: linear-gradient(145deg, red 20%, pink);} 径向突变 background: radial-gradient(red, pink); 角向突变 background: conic-gradient(red, pink);background: conic-gradient(red, pink);background: radial-gradient(red, pink); 根底背景扩大 纯色背景就没什么可说的了，只能扭转色彩。 1、线性背景 2、径向背景 3、角向突变 4、组合背景 3、应用这些 CSS 属性，布局效率又进步了一个档次！有很多CSS属性，有些人不理解，或者他们理解它们，然而遗记在须要时应用它们。其实，有时候咱们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这能够大大节约咱们编码的工夫。 作为前端开发人员，咱们常常会遇到这样的事件。所以我问本人，为什么不搞篇文章列出所有那些较少应用但既有用又乏味的 CSS 属性？ ...

1. 支流浏览器及其内核浏览器内核：可译为“渲染引擎”，个别习惯将之称为“浏览器内核”。负责对网页语法的解释（如[HTML]并渲染（显示）网页。不同内核显示成果不同,开发者须要对用户浏览器判断,分状况解决。JS判断浏览器内核：window.navigator.userAgent 1、IE浏览器内核：Trident内核，也被称为IE内核；2、Firefox浏览器内核：Gecko内核，也被称Firefox内核；3、Safari浏览器内核：Webkit内核；4、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；2. <!doctype>作用    <!doctype>是文档的申明，通知浏览器以后的文档类型； 文档类型如下：文档类型：HTML5，HTML 4.01 / XHTML 1.0(Transitional StricFrameset)，XHTML 1.13. HTML语义化如<h1>...<h6>,<p>,<div>等当浏览器解析到该标签后就会马上明确该标签的构造和大抵成果,搭建出网页大抵轮廓. 1.在没有Css状况下，也能大略出现网页构造。2.便于开发和保护3 .......eg:开发者通过HTML5新个性标签<header/>,<nav/>,<aside/>,<article/>,<footer/>就能疾速搭建起简洁构造清晰的网页了！ 5. <meta>标签meta标签用来形容一个HTML网页文档的属性，例如作者、日期和工夫、网页形容、关键词、页面刷新等。 常见的meta标签 keywords定义文档关键词，用于搜索引擎 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> description定义web页面形容 <meta name="description" content="该页面用于..."> author定义页面作者 <meta name="author" content="Tom">

style.left & offsetLeft<font size="5px">left</font> 是css款式中的一个属性，left 属性规定元素的左边缘。该属性定义了定位元素<font color=red>左外边距边界</font>与<font color=red>其蕴含块左边界</font>之间的偏移。（如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何成果。）具体可参阅W3C school<font size="5px">offsetLeft</font> 是HTML DOM Element对象的一个属性，offsetLeft属性返回<font color=red>以后元素左上角</font>绝对于<font color=red>HTMLElement.offsetParent节点的左边界</font>偏移的像素值。具体可参阅MDN.当然，style.left返回的是带有"px"的 可读写字符串类型，offsetLeft返回的是只读的数字型，本文中的比拟均是取style.left中的数字值。 代码示例HTML代码： <body>  <button>btn</button> </body>CSS代码： <style> * { padding: 0; margin: 0; } img { position: relative; margin-left: 300px; } </style>JS代码： <script> function Animate(el, targetP) { let currentP = el.offsetLeft //获取元素的以后地位 let step = targetP > currentP ? 10 : -10 //每次挪动10px let animateTimer = setInterval(() => { currentP = el.offsetLeft //从新获取元素的以后地位 el.style.left = currentP + step + "px" //当指标地位和以后地位的间隔差的绝对值小于要挪动步数的绝对值时，间接挪动到指标地位并革除定时器 if (Math.abs(targetP - currentP) < Math.abs(step)) { el.style.left = targetP + "px" clearInterval(animateTimer) } }, 15) } let image = document.querySelector("img") let btn = document.querySelector("button") btn.addEventListener("click", () => { Animate(image, 200) })</script>Animate(el, targetP)作用是将对应DOM元素程度挪动到指定地位。Animate(image, 200)的目标是将图片程度挪动到200px的地位（因为咱们在图片上设了300px的margin-left值，所以预期的成果应该是图片左移300-200=100px的间隔)，但实际上下面代码的运行后果是图片始终右移且永不进行。 ...

明天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点咱们都晓得，到明天（2021/03/06），CSS 提供了两种形式便于咱们进行文本超长的打点省略。 对于单行文本，应用单行省略： { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 而对于多行文本的超长省略，应用 -webkit-line-clamp 相干属性，兼容性也曾经十分好了： { width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} CodePen Demo -- inline-block 实现整块的溢出打点 问题一：超长文本整块省略基于上述的超长打点省略计划之下，会有一些变动的需要。譬如，咱们有如下构造： <section> <a href="/" class="avatar"></a> <div class="info"> <p class="person-card__name">Sb Coco</p> <p class="person-card__desc"> <span>FE</span> <span>UI</span> <span>UX Designer</span> <span>前端工程师</span> </p> </div></section> 对于上述超出的状况，咱们心愿对于超出文本长度的整一块 -- 前端工程师，整体被省略。 如果咱们间接应用上述的计划，应用如下的 CSS，后果会是这样，并非咱们期待的整块省略： .person-card__desc { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 将 display: inline 改为 display: inline-block 实现整块省略这里，如果咱们须要实现一整块的省略，只须要将包裹整块标签元素的 span 的 display 由 inline 改为 inline-block 即可。 ...

简介： 杭州开课啦教育科技有限公司是一家致力于为中小学生提供学习辅导的在线教育公司，目前公司后端服务基础设施次要依靠于阿里云原生，其中蕴含计算、网络、存储以及 Kubernetes 服务。 技术选型背景2020 年是开课啦公司发展壮大的一年，整个公司团队由原来的几百人裁减至当初的几千人，在集中应用的时候基本上会有几千人同时在经营后盾进行操作，公司原有的外部后盾经营零碎是用 PHP 搭建起来的，性能跟业务上已逐步不能满足公司的需要布局，加上目前开课啦公司开发部曾经做了微服务拆分，主体对外服务是 java 语言的 Dubbo 集群，后盾零碎须要无缝对接 java 的 Dubbo 服务，所以 PHP 曾经逐步不能满足开课啦公司的需要。 过后本人也调研过 PHP 的 Dubbo 我的项目，因为我的项目已根本无人更新保护所以 pass 掉，前面本人对简洁高性能的 go 语言感兴趣，而后就关注到了 Dubbo-go 我的项目，通过一段时间的调研之后发现 Dubbo Go 合乎咱们的业务须要，并且社区十分的沉闷，前面便决定选用 Dubbo-go 作为后盾的 pc 业务框架。 可能也有同学会问为什么不应用跨言反对水平更好的 gRPC 呢，因为很多公司最开始的 RPC 服务集群都是基于 Dubbo 生态构建的，如果换框架老本太大，所以根本不会思考，gRPC 尽管跨语言反对水平更好然而很多货色都须要本人造轮子，比方服务注册，服务发现，日志监控等。 过后在决定选用 Dubbo-go 的时候开发外部也有一些拥护的声音的，为什么不间接转 java，转 java 的话就没有跨语言通信的问题了，转 java 的问题在于入门老本高，而且对于整个公司的技术栈来说，放弃语言的多样性，能力更加从容的应答将来的业务变动，Go 自身是一个不弱于 Java 的高性能语言，非常适合微服务架构。 面临的挑战确定了框架选型后，我接到的首要任务便是要搭建出一套可疾速创立业务我的项目的脚手架，开发出基于 HTTP 协定的 RPC 代理服务，部署须要接入公司的容器化部署平台，一切都是从零开始，在网上基本上找不到能够借鉴的材料。 首先是要进行 Dubbo-go 我的项目的架构的布局，确定我的项目目录构造，通过参考 Dubbo-go Demo 以及其它的 Go 我的项目最终确定了我的项目的目录构造，以下目录构造可作为参考。 ...

简介： 身份和密钥的治理，是企业上云的重中之重；每年国内外都有因为身份和密钥的治理不善，或泄露，或误操作导致重大的生产事变或者数据泄露。本期小编将重点聊聊云上身份的那些值得关注的事儿。引言2021年初，国内一起删库跑路事件的裁决颁布，某企业员工利用其负责公司数据库管理员并把握公司财务零碎root权限的便当，登录公司财务零碎服务器删除了财务数据及相干应用程序，以致公司财务零碎无奈登录，最终被判处有期徒刑7年。 这起云上安全事故的产生虽是因为歹意人为所导致的，但也裸露了云上身份权限的危险。而身份和密钥的治理，是企业上云的重中之重；每年国内外都有因为身份和密钥的治理不善，或泄露，或误操作导致重大的生产事变或者数据泄露。本期小编将重点聊聊云上身份的那些值得关注的事儿。 第一步，云上平安从保障云账号平安应用开始咱们开始应用阿里云服务前，首先须要注册一个阿里云账号，它相当于操作系统的root或Administrator，所以有时称它为主账号或根账号。咱们应用阿里云账号进行资源的购买和服务的开明，也同时对名下所有资源领有齐全管制权限。主账号对应着齐全不受限的权限，让咱们列举一下因主账号未标准应用所导致的安全隐患： × 不要应用主账号进行日常操作：岂但有误操作的危险，还有账号被盗而导致的数据泄露、数据被删除等更大的危险。 × 不要应用主账号的AccessKey（简称AK）：在阿里云，用户能够应用AccessKey结构一个API申请（或者应用云服务SDK）来操作资源。AK一旦裸露公网，将失去整个主账号的管制权限，极大概率造成难以评估的损失，并无奈做到及时止血。 第二步，启动RAM用户，授予不同权限并调配给不同人员应用正因为主账号应用危险大，阿里云RAM为用户提供权限受控的子账号（RAM SubUser）和角色（RAM Role）拜访云服务，防止让用户间接应用主账号拜访。这期将重点谈谈，利用RAM把主账号的权限按需授予账号内的子账号，以及用户常见的问题。 RAM用户创立与受权通过RAM为名下的不同操作员创立独立的RAM用户并授予相应权限。 要点一：员工不要共享账号，包含明码，MFA，AK。 要点二：遵循“最小权限”的受权准则，除此之外，还能够通过限度拜访产生时的环境条件，来保障RAM用户的平安应用： 登录场景是否通过MFA校验限度访问者的登录IP地址限度访问者的登录时间段限度拜访形式（HTTPS/HTTP）设置适合的明码策略设置RAM用户明码强度为了爱护账号平安，您能够编辑明码规定，包含明码强度（长度+字符）、明码过期策略 、反复历史明码策略以及谬误明码最大重试次数策略进行明码设置。 启用多因素认证为访问者设置MFA验证，动静口令将打消明码泄露挫伤。 拜访密钥（AccessKey）的标准应用拜访密钥（AccessKey）是RAM用户的长期凭证。如果为RAM用户创立了拜访密钥，RAM用户能够通过API或其余开发工具拜访阿里云资源。AccessKey包含AccessKey ID和AccessKey Secret。其中AccessKey ID用于标识用户，AccessKey Secret是用来验证用户身份合法性的密钥。 AccessKeySecret只在首次创立时显示，不提供后续查问：===================================== 假如通过API能够查问到其余的AccessKeySecret，那所有的AccessKey都有泄露的危险，平安问题防不胜防，因而请在创立AccessKey时及时保留。 一个子用户最多领有两个AccessKey：========================= 为了保障应用平安， 用户应只应用一个AK，另外一个AK则是用来进行永恒AK的定期轮转应用，或者面对泄露状况，进行紧急轮转，已升高损失。 AK须要定期轮转：============= 如果您的拜访密钥曾经应用3个月以上，建议您及时轮换拜访密钥，升高拜访密钥被泄露的危险。首先创立用于轮换的第二个拜访密钥。再禁用（而不是删除）原来的拜访密钥。而后，验证应用拜访密钥的所有应用程序或零碎是否失常运行。最初删除原来的拜访密钥。 定期审计账号的应用，回收不沉闷的身份密钥通过ActionTrail能够查看用户对资源实例进行操作的记录。通过用户凭证报告（CredentialReport）全局把控员工的密钥状况：明码登录记录、AK应用记录、AK轮转记录。 身份/密钥先禁用再删除身份/密钥须要遵循先禁用再删除的准则，防止删除正在只用的AK，影响业务进度，造成生产事变： 确认密钥不在应用禁用密钥，随时可复原密钥禁用一段时间后，确认无任何不良影响，再删除密钥最佳实际分享：放弃企业云账号最根本的安全性、运维便捷性而进行的最小化配置。初创企业IT治理样板间初创企业样板间是放弃企业云账号最根本的安全性、运维便捷性而进行的最小化配置，升高初创企业随着规模扩充逐步晋升的云上危险，让初创企业能够疾速实现： 主账号平安权限可控网络隔离同时能够通过控制台操作、Terraform代码、CLI代码这3种形式进行疾速启用。 原文链接本文为阿里云原创内容，未经容许不得转载

1. 工厂模式所谓工厂模式就是像工厂一样反复的产生相似的产品，工厂模式只须要咱们传入正确的参数，就能生产相似的产品； 咱们罕用的就是class结构器一样。每次用导类的时候，就产生一个新的实例。 当然在理论利用中还有很多，比方咱们常常写的utils//工厂模式示例function User(name, age, career, work) { this.name = name; this.age = age; this.career = career; this.work = work;}2. 单例模式保障一个类仅有一个实例，并提供一个拜访它的全局拜访点，这样的模式就叫做单例模式。惟一数据源 (SSOT)这个我常常应用，比方在在写避免函数防抖中。 class SingleSong { show() { } static getInstance() { if(!SingleSong.instance) { SingleSong.instance = new SingleSong(); } return SingleSong.instance; }} // 也能够用必包 const Modal = (function() { let modal = null return function() { if(!modal) { modal = document.createElement('div') modal.innerHTML = '您还未登录哦~' modal.id = 'modal' modal.style.display = 'none' document.body.appendChild(modal) } return modal } })() const modal = new Modal()

给父级元素加width: 0; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #box { width: 300px; display: flex; justify-content: space-between; /* align-items: center; */ border: 1px solid red; box-sizing: border-box; line-height: 50px; } .left{ background-color: yellowgreen; flex: 1; // 父元素设置宽度为0 width: 0; } .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 50px; } .right { width: 100px; /* height: 50px; */ background-color: #e4b9b9; /* border-radius: 10px; */ } </style></head><body> <div id="box"> <div class="left"> <p class="text">内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容</p> </div> <div class="right">我在左边</div> </div></body></html>

问题用到很多vue罕用的组件库（element, vant, vuetify），尽管配好了款式然而还是须要更改其余的款式解决三大款式穿透 >>> , ::v-deep , /deep/ 在style常常用scoped属性实现组件的私有化,所以才须要款式穿透 须要留神： ( >>> 只作用于css::v-deep 只作用于sass/deep/ 只作用于less示例： 1 <style lang="scss" scoped>.conBox ::v-deep .el-input__inner{ padding:0 10px;}</style>2 <style lang="less" scoped>.conBox /deep/ .el-input__inner{ padding:0 10px;}</style>3 <style>.num-input { width: 90px; margin-top: 15px; >>> .ivu-input { text-align: center!important; }}</style>三大款式穿透

解决办法：应用 position: sticky 做了一个动静吸顶的成果： 举例如下： 1 未向上滚动页面之前： 2 向上滚动页面之后：这样， “This is tab main”局部的元素，能够始终放弃在页面窗口的顶部。 3 具体代码：这个应用的代码其实就是 position: sticky, top: xx （阀值）来实现的：给想要实现吸顶成果的元素加上这两个属性即可。 参考：http://www.ruanyifeng.com/blog/2019/11/css-position.html

效果图： App.jsx import React, { Component } from 'react'import style from './index.module.less'export default class App extends Component { state = { width: 0, left: 0} enter = (event) => { const {clientWidth, offsetLeft } = event.target this.setState({ width: clientWidth, left: offsetLeft }) } leave = () => { this.setState(() =>({ width: 0 }) ) } render () { const { width, left } = this.state return ( <> <div className={ style.header }> <ul ref="ul" onMouseLeave={ this.leave } > <li onMouseEnter={ this.enter }>首页</li> <li onMouseEnter={ this.enter }>导航一</li> <li onMouseEnter={ this.enter }>导航二</li> <li onMouseEnter={ this.enter }>导航三</li> <li onMouseEnter={ this.enter }>导航四</li> </ul> <div className={style.line} style={{width: width, left: left, height: '2px'}}></div> </div> </> ) }}App.module.less ...

pointer-events: none; 属性。 利用场景：比方一个网页外面的一个图片，用户能够长按保留该图片，而后你的老板让你在图片下面加一行文字提醒用户能够长按保留。这个时候，如果没有这个属性，那用户长按这个文字去保留了咋办？给文字所属的标签加上这个属性，用户即便是长按这行文字也能够弹出保留的图片的提醒方不不便？ mdn 文档https://developer.mozilla.org...

有人发贴说本人是2020届本科毕业，业余利用数学，打算考研，问该不该考计算机专业，农村贫困家庭，没有什么喜好，只心愿当前的工作挣钱就行了，就是胆怯三四年当前读研进去计算机行业不行了。 那么，计算机行业到底还能火多久?计算机（IT）行业起码在将来几十年待业宽泛，当初咱们的社会正在一直走向数字化，转型的过程会诞生大量的商业机会。 当初的企业，须要云计算，须要大数据，须要软件，须要零碎，须要算力。旺盛的市场需求，会带动计算机专业的长盛不衰。 技术发展趋势往往是产业发展趋势的根底，新的技术生态往往会带来产业模式的改革，以后随着5G通信的落地利用和工业互联网的倒退，互联网正在从生产端向产业端笼罩，这会减速传统产业的降级转型，比方企业上云就是以后一个大的发展趋势，在这个大趋势下，企业必然会须要大量计算机专业人才，所以将来计算机专业的待业面会进一步从IT互联网畛域向传统行业拓展。宏大的市场规模，也会拼命地吸纳人才。 尽管计算机专业人才的造就规模在不断扩大，然而相比于宏大的人才需求后劲来说，目前计算机专业人才的缺口仍然比拟显著，比方大数据、人工智能、区块链、信息安全等畛域就有较大的人才缺口，尤其是高端人才。IT行业，是一个典型实用性行业。一个人，一台电脑，就能干活，这是其它任何技术型行业无奈设想的事件。 咱们常常看到一些不出名大学的毕业生，逆袭进入阿里、腾讯这样的互联网大企业，软件行业的翻新气氛，由来已久。像谷歌、facebook这样的企业，都是大学生守业逆袭，迅速成长壮大起来的。当初云计算、大数据的很多底层技术，甚至很多开发语言，都是不出名的大人物提出来的。IT畛域的很多会议，参与者的身份形形色色，什么样的人都有，什么学校的人都有，人人平等，都有资格提出本人的想法，展现本人的产品和代码。 这样的行业，必然会受到年轻人的欢送。因为它提供了均等的机会，人人都有逆袭的可能。在资源为重的传统行业，背景、人脉尤其重要，出身一般的子弟上进之路困难重重。而在计算机行业，会就是会，不会就是不会。总的来说，计算机行业对普通人来说尤其偏心，是改变命运的绝好机会。

之前有些过两篇对于字体的文章，是对于如何定义字体的： 你该晓得的字体 font-familyWeb 字体 font-family 再探秘本文将会和这篇 -- CSS 奇思妙想边框动画相似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 Google Font在写各种 DEMO 的时候，有的时候一些非凡的字体能更好的体现动画的成果。这里讲一个疾速引入不同格局字体的小技巧。 就是 Google Font 这个网站，下面有十分多的不同的开源字体： 当咱们相中了一个咱们喜爱的字体，它也提供了十分疾速的便捷的引入形式。选中对应的字体，抉择 +Select this style，便能够通过 link 和 @import 两种形式引入： 应用 link 标签引入： <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">OR，在 CSS 代码中，应用 @import 引入： <style>@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap');</style>上述两种形式外部其实都是应用的 @font-face 进行了字体的定义。 咱们能够通过 @font-face 疾速申明指定一个自定义字体。相似这样： @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");}这样，利用 Google Font，咱们就能够便捷的享受各种字体了。 我在我的集体我的项目或者一些 DEMO 中，须要一些艺术字体或者非凡字体展现不一样的成果时，常常会应用这种形式。而至于在业务中，是否须要引入一些非凡字体，就见仁见智了。 接下来，就会分门别类的看看，字体在 CSS 中，和不同是属性相结合，可能鼓捣出什么样的成果。 文字与暗影通过将字体与字体暗影 text-shadow，相结合，暗影的不同使用形式，产生不一样的成果。 咱们通过一系列 Demo 来看看。 长暗影文字效果通过多层次，色彩逐步变动（通明）的暗影变动，能够生成长暗影： div { text-shadow: 0px 0px #992400, 1px 1px rgba(152, 36, 1, 0.98), 2px 2px rgba(151, 37, 2, 0.96), 3px 3px rgba(151, 37, 2, 0.94), 4px 4px rgba(150, 37, 3, 0.92), 5px 5px rgba(149, 38, 4, 0.9), 6px 6px rgba(148, 38, 5, 0.88), 7px 7px rgba(148, 39, 5, 0.86), 8px 8px rgba(147, 39, 6, 0.84), 9px 9px rgba(146, 39, 7, 0.82), 10px 10px rgba(145, 40, 8, 0.8), 11px 11px rgba(145, 40, 8, 0.78), 12px 12px rgba(144, 41, 9, 0.76), 13px 13px rgba(143, 41, 10, 0.74), 14px 14px rgba(142, 41, 11, 0.72), 15px 15px rgba(142, 42, 11, 0.7), 16px 16px rgba(141, 42, 12, 0.68), 17px 17px rgba(140, 43, 13, 0.66), 18px 18px rgba(139, 43, 14, 0.64), 19px 19px rgba(138, 43, 15, 0.62), 20px 20px rgba(138, 44, 15, 0.6), 21px 21px rgba(137, 44, 16, 0.58), 22px 22px rgba(136, 45, 17, 0.56), 23px 23px rgba(135, 45, 18, 0.54), 24px 24px rgba(135, 45, 18, 0.52), 25px 25px rgba(134, 46, 19, 0.5), 26px 26px rgba(133, 46, 20, 0.48), 27px 27px rgba(132, 47, 21, 0.46), 28px 28px rgba(132, 47, 21, 0.44), 29px 29px rgba(131, 48, 22, 0.42), 30px 30px rgba(130, 48, 23, 0.4), 31px 31px rgba(129, 48, 24, 0.38), 32px 32px rgba(129, 49, 24, 0.36), 33px 33px rgba(128, 49, 25, 0.34), 34px 34px rgba(127, 50, 26, 0.32), 35px 35px rgba(126, 50, 27, 0.3), 36px 36px rgba(125, 50, 28, 0.28), 37px 37px rgba(125, 51, 28, 0.26), 38px 38px rgba(124, 51, 29, 0.24), 39px 39px rgba(123, 52, 30, 0.22), 40px 40px rgba(122, 52, 31, 0.2), 41px 41px rgba(122, 52, 31, 0.18), 42px 42px rgba(121, 53, 32, 0.16), 43px 43px rgba(120, 53, 33, 0.14), 44px 44px rgba(119, 54, 34, 0.12), 45px 45px rgba(119, 54, 34, 0.1), 46px 46px rgba(118, 54, 35, 0.08), 47px 47px rgba(117, 55, 36, 0.06), 48px 48px rgba(116, 55, 37, 0.04), 49px 49px rgba(116, 56, 37, 0.02), 50px 50px rgba(115, 56, 38, 0);} ...

简介： 本文以某电商案例为例，通过案例为您介绍如何应用离线计算并制作漏斗图。背景漏斗模型其实是通过产品各项数据的转化率来判断产品经营状况的工具。转化漏斗则是通过各阶段数据的转化，来判断产品在哪一个环节出了问题，而后一直优化产品。电商漏斗模型，用户购买商品的门路，从浏览商品到领取订单的每一个环节的转化。本文将展现从用户「浏览-点击-购买」环节做漏斗剖析及展现。 前提条件开明日志服务开明MaxCompute开明Dataworks开明Quick BI案例1.业务架构图 2.业务流程 通过阿里云日志服务采集日志数据。日志服务的数据同步至大数据计算服务MaxCompute。MaxCompute做离线计算。通过阿里云Quick BI进行数据可视化展现。3.筹备工作 将日志服务采集的数据增量同步到MaxCompute分区表中(本文案例以工夫天为单位，展现每个环节的转化率)。具体步骤请参见：日志服务迁徙至MaxCompute。并通过Dataworks设置定时调度执行，每天凌晨定时取前一天的数据，计算以天为单位的转化率漏斗图。详情见参见：调度参数 表1. 日志源表：ods_user_trans_d 表2. 创立ODS层表：ods_user_trace_data，相干数仓模型定义请参见：数据引入层（ODS） CREATE TABLE IF NOT EXISTS ods_user_trace_data( md5 STRING COMMENT '用户uid的md5值前8位', uid STRING COMMENT '用户uid', ts BIGINT COMMENT '用户操作工夫戳', ip STRING COMMENT 'ip地址', status BIGINT COMMENT '服务器返回状态码', bytes BIGINT COMMENT '返回给客户端的字节数', device_brand STRING COMMENT '设施品牌', device STRING COMMENT '终端型号', system_type STRING COMMENT '零碎类型，Android、IOS、ipad、Windows_phone', customize_event STRING COMMENT '自定义事件：登录/退出/购买/注册/点击/后盾/切换用户/浏览/评论', use_time BIGINT COMMENT 'APP单次应用时长，当事件为退出、后盾、切换用户时有该项', customize_event_content STRING COMMENT '用户关注内容信息，在customize_event为浏览和评论时，蕴含该列') PARTITIONED BY( dt STRING --以dt作为工夫分区，单位为天。);CREATE TABLE IF NOT EXISTS ods_user_trace_data ( md5 STRING COMMENT '用户uid的md5值前8位', uid STRING COMMENT '用户uid', ts BIGINT COMMENT '用户操作工夫戳', ip STRING COMMENT 'ip地址', status BIGINT COMMENT '服务器返回状态码', bytes BIGINT COMMENT '返回给客户端的字节数', device_brand STRING COMMENT '设施品牌', device STRING COMMENT '终端型号', system_type STRING COMMENT '零碎类型，Android、IOS、ipad、Windows_phone', customize_event STRING COMMENT '自定义事件：登录/退出/购买/注册/点击/后盾/切换用户/浏览/评论', use_time BIGINT COMMENT 'APP单次应用时长，当事件为退出、后盾、切换用户时有该项', customize_event_content STRING COMMENT '用户关注内容信息，在customize_event为浏览和评论时，蕴含该列' ) PARTITIONED BY ( dt STRING --以dt作为工夫分区，单位为天。 );表3. 创立dw层表：dw_user_trace_data，相干数仓模型定义请参见：明细粒度事实层（DWD） ...

前几天做了一个长图H5，长按按钮挪动画面。后果做完测试的时候发现iOS下按钮按下后隐没了。审查元素发现它跑到了其余图片的上面，被盖住了，WTF...。看了看z-index，一千多不应该被盖住吧，然而无论怎么调它都出不来，只有点击立即隐没。 哪怕把他挪到最外层还是不行。。。。。。 最初只能疯狂百度，发现也有其他同学遇到过，解决方案就是加上这么一句 -webkit-transform:translateZ(1px);-moz-transform:translateZ(1px);-o-transform:translateZ(1px);transform:translateZ(1px);起因是什么不晓得，然而问题真的解决了。 淦！

???? 前言大家好呀，我是毛小悠，能够叫我二毛，在家中排行老二，是一名前端开发工程师。 本系列文章旨在通过练习来进步JavaScript的能力，一起欢快的做题吧。???????????? 以下每道题，二毛我都有尝试做一遍。倡议限时训练，比方限定为半小时，如果半小时内想不进去，能够联合文章开端的参考答案来思考。 能够在下方评论区留言或者加我的微信：code\_maomao。期待你的到来。 求关注求点赞????\~~~???????????? ???? 题目1：＃9矩阵：增加对角乘积咱们有一个维数为n x n的方阵M，该方阵M的正负数在[-9，-1]和[0,9]范畴内（不包含值0）。 咱们要把对角线元素的所有乘积从上到下到下，即sum1的值；以及对角线元素UP-RIGHT到LEFT-DOWN，即sum2。而后，作为最终后果，sum1-sum2的值。 例如 M = [[ 1, 4, 7, 6, 5], [-3, 2, 8, 1, 3], [ 6, 2, 9, 7, -4], [ 1, -2, 4, -2, 6], [ 3, 2, 2, -4, 7]]让咱们在下图中查看如何取得此后果： 因而sum1-sum2的值等于： 1164 - 66 = 1098创立代码以执行此计算。 随机测试的特点： Numbers of tests = 15010 < dimension < 25 (python and ruby)10 < dimension < 20 (javascript)-10 < M[i,j] < 0 and 0 < M[i,j] < 10习题代码： ...

前置对于 css 来设置 audio 款式对于 JavaScript 来设置款式对于 React 写一个自定义的 Audio 组件总结前置大抵理解 audio 属性懂一点点 CSS懂一点点 JS 与 audio 事件懂一点点 React对于 css 来设置 audio 款式援用 MDN 中的话 应用 CSS 设置款式 audio 元素没有自带的固有视觉款式，除非如果申明了 controls 属性，则会显示浏览器的默认控件。默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有益处，除非你想将控件放在文本块或相似元素中。你能够应用作用于整个控件的属性来为其设置款式。例如可用 border、border-radius、padding, margin 等等。但你不能设置音频播放器中的单个组件（如扭转按钮大小、扭转图标或字体等）。控件在不同的浏览器中也有所不同。如果在跨浏览器中失去统一的外观和体验，你须要创立自定义控件；自定义控件能够依据你的需要任意设置款式，还能够应用 JavaScript 和 HTMLMediaElement API 来设置更多功能。视频播放器款式根底 提供了一些有用的款式技术，这篇文章围绕 video 而写，但大部分都能够用于 audio。总上所述，要害就是在于 css 可操作性绝对少，且会产生对于兼容性的问题，集体也仅作为 对于 JavaScript 来设置 audio 款式说是 JavaScript ，仍然也须要配合到 css 外面来的（不然不难看 筹备一个,最简略的带有 audio 的 html，并把安排好布局要害 JavaScript 代码 2.1 筹备参数2.2 播放 && 暂停 && 进度更新2.3 拖动进度条配合 css 食用筹备一个,最简略的带有 audio 的 html，并把安排好布局<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Audio DIY</title> <link rel="stylesheet" type="text/css" href="./style.css" /> </head> <body> <audio id='audio' src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'' preload='metadata' ></audio> <div class="audio-container"> <div class="audio-toggle" id="control"> 播放 </div> <div class="audio-progress-box" id='progress'> <span class="progressDot" id="control-dot"></span> <div class="audio-progress-bar" id="control-progress"></div> </div> <div class="audio-time" id="‘time’"> <span id='current'>00:00</span> / <span id='duration'>00:00</span> </div> </div> </body> <script src="./audio.js"></script></html>2.1 筹备参数 ...

痛点因为笔者是做商业化流动相干开发，为了编写一系列炫酷的页面，须要在 tsx、js或者vue中编写一堆的class/className;而后须要手动的将 dom 树中的class/className中的值复制到less/sass/css文件中。能够设想你每天都在进行这样的操作，当组件/页面比拟多的时候，编写款式将会是十分苦楚的。 由此基于每天都在手动 copy class 到款式文件中,cmd+c 曾经敲坏了，笔者利用 babel 将源码解析成 ast，并格式化成对应的less/css/scss文件;其外围解析库为parse-jsx-to-css; 目前反对: 将React的class/function组件解析成less/css/scss;将Vue的组件解析成less/css/scss;React 中反对多个组件款式暂未反对: class/className表达式的状况一个简略的例子 React 代码: import React, { PureComponent } from "react";function LoginButton() { return <div className="login-button"></div>;}class Demo extends PureComponent { render() { return ( <div className="login-container"> <div className="login-container--user-name"></div> <div className="login-container--password"></div> </div> ); }}export default Demo;生成的 less/scss 代码: .login-button {}.login-container { &--user-name { } &--password { }}读到这里，冲动的心油然而生，到底应该怎么去应用呢？ 应用为了关照宽广前端同学，笔者开发了在线版本以及vscode插件版本;后续将会反对idea插件 在线版本在线尝试 应用非常简单: 输出代码抉择要转换的框架和生成的格局 vscode 插件vscoce 插件装置 应用此插件很简略，只须要在 vscode 的插件市场中搜寻parse-to-css-vscode-plugin,在须要转换的文件(vue/jsx/tsx/js)文件中右键抉择对应性能即可。 开源外围解析库: parse-jsx-to-css在线及 vscode 插件: parse-jsx-to-css-plugins欢送各位同学一起独特保护此开源库，也欢送各位 star; ...

1、浏览器是如何解析css选择器的？浏览器会【从右往左】解析css，这样匹配，性能更好，因为第一步就可能筛选掉大部分数据2、css选择器有哪些，哪些属性能够继承？id选择器，类选择器，标签选择器，子选择器，兄弟选择器，相邻选择器，属性选择器，伪类选择器，全局选择器，群选择器。字体类属性如：font-size，文本系列属性如：text-algin,color等3、为什么要初始化款式？浏览器差别，不同的浏览器对标签的默认值是不同的，如果不初始化会呈现页面差别。4、display:none和visible:hidden有什么区别？display管制元素的显示，当为none时不显示并且不占网页空间；visible为hidden的时候，元素暗藏但仍然占据空间，visible具备继承性5、对BFC标准的了解？BFC块级格式化上下文，是一个独立的布局环境，容器内的元素和容器外的元素互不烦扰。创立BFC：根元素或蕴含根元素的元素，浮动元素，相对定位，overflow：hidden|auto|scroll,display:inline-block | flex | inline-flex | table-cell | table-captionBFC能够解决高度塌陷，margin塌陷等问题6、为什么要革除浮动，革除浮动有那些形式？因为浮动会造成高度塌陷，能够利用BFC革除浮动，底部元素设置clear:both,利用伪元素革除浮动。 // 在父元素上增加此类， 利用伪元素革除浮动.clearfix:after { content:""; display:table; /*采纳此办法能够无效防止浏览器兼容问题*/ clear:both; }7、设置浮动后，该元素的display值是多少？ display:block;8、css优化进步性能的办法有哪些？ css压缩，webpack外面能够应用 MiniCssExtractPlugin 插件缩小css嵌套，最好不要套三层以上css精灵图片合并css文件，提取公共款式9、垂直方向元素的百分比是绝对容器的高度吗？子元素的高度百分比是绝对于父元素高度margin-top,padding-top百分比是绝对父元素的宽度10、如果须要手动写动画，你认为最小工夫距离是多久，为什么？少数显示器的频率是60Hz，即1s刷新60次，所以实践上1/60＊1000ms ＝ 16.7ms最佳11、元素居中形式？a、文本居中：text-align:center;b、display:flex形式居中，justify-content:center程度居中，align-item:center垂直居中。c、absolute + top：50% + left：50% + margin-top:负高度一半 +margin-left:负宽度一半d、 absolute + top：50% + left：50% + transform: translate(-50%, -50%);12、盒子模型规范的盒子模型是:content-box,意思是盒子模型由margin+border+padding+content形成怪异的盒子模型是:border-box,意思是盒子模型的内容区域蕴含了 border和padding和内容的width，整个盒子是由margin+内容区域形成

element-ui自定义款式批改1.实用框架生成构造是嵌套在你本人的标签里(相似el-input) `<style scoped lang='less'> .box { /deep/ .title { ... } }</style>` 即可;2.实用框架生成的构造在body标签里,和App同级时(相似el-date-picker) 此时批改款式形式有差别1.独自写.scss文件. 2.在组件文件中引入(哪里应用哪里引入,避免净化).scss文件款式即可失效.

博客原文地址：https://finget.github.io/view...前置内容 浏览器次要过程浏览器是多过程的，次要分为： 浏览器主过程：只有一个，次要管制页面的创立、销毁、网络资源管理、下载等。第三方插件过程：每一种类型的插件对应一个过程，仅当应用该插件时才创立。GPU过程：最多一个，用于3D绘制等。浏览器渲染过程(浏览器内核)：每个Tab页对应一个过程，互不影响。 第一局部 输出网址并解析这里咱们只思考输出的是一个URL 构造字符串，如果是非 URL 构造的字符串，则会用浏览器默认的搜索引擎搜寻该字符串。 URL的组成URL 次要由 协定、主机、端口、门路、查问参数、锚点6局部组成！ 解析URL输出URL后，浏览器会解析出协定、主机、端口、门路等信息，并结构一个HTTP申请。 浏览器发送申请前，依据申请头的expires和cache-control判断是否命中（包含是否过期）强缓存策略，如果命中，间接从缓存获取资源，并不会发送申请。如果没有命中，则进入下一步。没有命中强缓存规定，浏览器会发送申请，依据申请头的last-modified和etag判断是否命中协商缓存，如果命中，间接从缓存获取资源。如果没有命中，则进入下一步。如果前两步都没有命中，则间接从服务端获取资源。HSTS因为安全隐患，会应用 HSTS 强制客户端应用 HTTPS 拜访页面。详见：你所不晓得的 HSTS。当你的网站均采纳 HTTPS，并合乎它的平安标准，就能够申请加入 HSTS 列表，之后用户不加 HTTPS 协定再去拜访你的网站，浏览器都会定向到 HTTPS。无论匹配到没有，都要开始 DNS 查问工作了。 浏览器缓存强缓存强制缓存就是向浏览器缓存查找该申请后果，并依据该后果的缓存规定来决定是否应用该缓存后果的过程。强缓存又分为两种Expires和Cache-Control Expires版本：HTTP/1.0起源：存在于服务端返回的响应头中语法：Expires: Wed, 22 Nov 2019 08:41:00 GMT毛病：服务器的工夫和浏览器的工夫可能并不统一导致生效Cache-Control版本：HTTP/1.1起源：响应头和申请头语法：Cache-Control:max-age=3600毛病：工夫最终还是会生效申请头： 字段名称阐明no-cache告知(代理)服务器不间接应用缓存，要求向原服务器发动申请no-store所有内容都不会被保留到缓存或Internet临时文件中max-age=delta-seconds告知服务器客户端心愿接管一个存在工夫不大于delta-secconds秒的资源max-stale[=delta-seconds]告知(代理)服务器客户端违心接管一个超过缓存工夫的资源，若有定义delta-seconds则为delta-seconds秒，若没有则为任意超出工夫min-fresh=delta-seconds告知(代理)服务器客户端心愿接管一个在小于delta-seconds秒内被更新过的资源no-transform告知(代理)服务器客户端心愿获取实体数据没有被转换(比方压缩)过的资源noly-if-cached告知(代理)服务器客户端心愿获取缓存的内容(若有),而不必向原服务器发去申请cache-extension自定义扩大值，若服务器不辨认该值将被疏忽掉响应头： 字段名称阐明public表明任何状况下都得缓存该资源(即便是须要HTTP认证的资源)Private=[field-name]表明返回报文中全副或局部(若指定了field-name则为field-name的字段数据)仅凋谢给某些用户(服务器指定的share-user，如代理服务器)做缓存应用，其余用户则不能缓存这些数据no-cache不间接应用缓存，要求向服务器发动(新鲜度校验)申请no-store所以内容都不会被保留到缓存或Internet临时文件中no-transform告知客户端缓存文件时不得对实体数据做任何扭转noly-if-cached告知(代理)服务器客户端心愿获取缓存的内容(若有),而不必向原服务器发去申请must-revalidate以后资源肯定是向原办法服务器发去验证申请的，如申请是吧会返回504(而非代理服务器上的缓存)proxy-revalidate与must-revalidate相似，但仅能利用于共享缓存(如代理)max-age=delta-seconds告知客户端该资源在delta-seconds秒内是陈腐的，无需向服务器发申请s-maxage=delta-seconds同max-age，但仅能利用于共享缓存(如代理)cache-extension自定义扩大值，若服务器不辨认该值将被疏忽掉示例： // server.jsconst http = require('http')const fs = require('fs')http.createServer(function (request, response) { console.log('request come', request.url) if (request.url === '/') { const html = fs.readFileSync('test.html', 'utf8') response.writeHead(200, { 'Content-Type': 'text/html' }) response.end(html) } if (request.url === '/script.js') { response.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'max-age=20,public' // 缓存20s 多个值用逗号离开 }) response.end('console.log("script loaded")') }}).listen(8888)console.log('server listening on 8888')// test.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> </body><script src="/script.js"></script></html> ...

本节咱们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合容许咱们定义能够在整个样式表中重复使用的款式，防止应用无语意的类。混合能够蕴含所有的 CSS 规定和任何其余在 Sass 文档中被容许应用的内容。 定义混合Sass 中能够通过 @mixin 指令定义混合，@mixin 前面接混合的名称和可选的 arguments 参数，以及混合的内容块。 示例：例如创立一个名为 my-text 的混合： @mixin my-text { font-size: 12px; color: #fdef92; font-weight: bold;}此时咱们运行代码，上述混合是不会被编译到 CSS 代码中的，只有当咱们应用了这个混合时，才会被编译。 留神，Sass 的连贯符号 - 和下划线 _ 是雷同的，也就是说 my-text 与 my_text 是一样的。 混合的应用混合定义好后，咱们就能够在选择器应用混合，能够通过 @include 来应用这混合。@include 调用会把混合器中的所有款式提取进去放在 @include 被调用的中央。 示例：例如咱们应用下面定义好的混合： @mixin my-text { font-size: 12px; color: #fdef92; font-weight: bold;}p{ @include my_text();}编译成 CSS 代码： p{ font-size: 12px; color: #fdef92; font-weight: bold;}从上述代码能够看出，在选择器 p 中的所有款式属性全副来自 my-text 这个混合器。 ...

在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit -webkit-box-reflect 是一个十分有意思的属性，它让 CSS 有能力像镜子一样，反射咱们元素本来绘制的内容。 上一次写它，它的兼容性还十分十分的惨淡，然而到明天，尽管还是一个 Non-standard 的语法，然而兼容性曾经大有改观，并且利用它，咱们能够实现十分多有意思的成果。 截止至 2021-02-19，它的兼容性曾经达到了 91.02%，看看 CANIUSE -webkit-box-reflect： 接下来进入注释。 -webkit-box-reflect 根本用法-webkit-box-reflect 的语法非常简单，最根本的用法像是这样： div { -webkit-box-reflect: below;}其中，below 能够是 below | above | left | right 代表下上左右，也就是有 4 个方向能够选。 假如咱们有如下一张图片： <div></div>div { background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');} 加上 -webkit-box-reflect: right，也就是右侧的倒影： div { background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); -webkit-box-reflect: right;}成果如下，生成了一个元素右侧的镜像元素： 设置倒影间隔在方向前面，还能够接一个具体的数值大小，示意倒影与原元素间的间隔。 div { background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); -webkit-box-reflect: right 10px;}加上 10px 之后，倒影与原元素间将距离 10px： 设置倒影虚实还有一个十分重要的性能，就是方位前面，还能再设置一个突变值，利用这个突变值，能够实现倒影的一个虚化成果，这一点十分重要。 div { background-image: url('https://images.pokemontcg.io/xy2/12_hires.png'); -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));}看看成果，有了虚实变动之后，这样就更像是一个倒影. ...

一，BFC定义，全称，block formatting content,格式化上下文；是web页面中盒模型布局中的css渲染模式，是一个独立的渲染区域或说一个隔离的独立容器。 二，造成条件1，浮动元素，float除none以外的值。2，定位元素，position(absolute，fixed)3,display为inline-block,table-cell,table-caption(相似于表格题目标签caption)4，overflow除visible以外(scroll,hiddle,auto)的值. 三，个性1，外部的BOX会在垂直方向一个接着一个放。解释：即便不在BFC的内的盒子也是一样的。2，垂直方向的间隔由margin值决定。解释：失常文档流中，盒子的垂直距离也是由高低盒子的最大margin决定的。利用：因而能够用overflow:hidden触发BFC机制，将该属性加载父元素上。扯个题外话，用空标签也是能解决外边距合并问题。3，BFC区域内的元素不会和float元素重叠，解释：不会被浮动元素笼罩利用：两栏布局：右边固定，左边自适应布局。 float: left; width: 200px;height: 300px;（右边元素）overflow: hidden;/*创立bfc */height: 300px;（左边元素）三栏布局（圣杯布局）左右两边固定宽度，两头不设宽，因而两头的宽度自适应。 float: left; width: 100px; height: 300px;（右边元素）float: right; width: 100px; height: 300px;（左边元素）overflow: hidden;/*创立bfc*/ height: 300px;（两头元素）4,计算bfc的高度时，浮动元素也参加计算。解释:BFC蕴含浮动的块。利用：利用overflow:hidden革除浮动嘛，因为浮动的盒子无奈撑出处于规范文档流的父盒子的height。5，BFC就是页面上的一个独立容器，容器外面的子元素不会影响里面元素。利用：解决外边距合并问题。 <div class="container"> <div class="wrapper"> <div class="box1"></div> </div> <div class="box2"></div> </div>.container { overflow: hidden; width: 100px; height: 100px; } .wrapper { overflow: hidden; } .box1 { height: 20px; margin: 10px 0; } .box2 { height: 20px; margin: 20px 0; }

在实现之前先来相熟一下css盒模型而后创立一个一般的利用 <div class="triangle"></div>.triangle { width: 100px; height: 100px; border-top: 10px solid #000; border-right: 10px solid #ff0000; border-left: 10px solid #00ff00; border-bottom: 10px solid #0000ff;}成果：此时须要留神四条边框交接的中央，前面会用到。而后再将内容物的宽高都去掉，为了不便察看，将四个边框都设置大一些，成果如下： .triangle { width: 0; height: 0; border-top: 100px solid #000; border-right: 100px solid #ff0000; border-left: 100px solid #00ff00; border-bottom: 100px solid #0000ff;}当初是不是感觉三角形有点雏形了，四个方向的都有，想要哪个把其余方向的色彩设置成通明不就行了，先试一个向下的三角形： .triangle { width: 0; height: 0; border-top: 100px solid #000; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid transparent;}看来是这个办法，当然底边框目前用不到，还会使总高度变高，能够间接去掉。是不是能够这样了解，底边在哪就留哪边的色彩？接下来还有一个问题，那就是这个三角形的宽高，认真看这个三角形的宽正好是左右边框的总和，也就是200px,而它的高当然就是上边框的宽度了，也就是100px。以此类推，如果设计稿给的是一个长50px高60px的一个向上的三角形，那么就应该这样写： .triangle { width: 0; height: 0; border-top: 60px solid #000; border-right: 25px solid transparent; border-left: 25px solid transparent;}还能够实现一个直角三角形： ...

1、引入非凡字体 @font-face { font-family:'specielfont'; src: url('/static/font/font.ttf'); /*下载的字体的门路*/ // 思考到兼容性，须要引入四种字体文件。别离是.eot,.woff,.ttf,.svg后缀；}.testFont{font-family: specielfont;} /*字体的名字*/2、压缩字体 / 提取字体间接将字体放在服务器上援用，然而一个中文字体要好几M，这样做并不适合。找一个在线压缩字体的工具——https://www.fontke.com/tool/subfont/ 上传字体，工具将ttf中的字体精减，只剩下html页面中蕴含的字体。这样一个网页下来，字体文件就几K，一张图片也要好几十K呢，还是十分适合的。 压缩字体：https://blog.csdn.net/weixin_30607029/article/details/99998903 步骤解析：1、下载所需的字体后，引入字体库到我的项目的font文件中；2、css引入字体文件，font-face自定义字体；3、字体文件太大，应用字蛛font-spider，对字体文件压缩；

css的问题类名抵触的问题当你写一个css类的时候，你是写全局的类呢？还是写多个层级抉择后的类呢？ 你会发现，怎么都不好！ 过深的层级不利于编写、浏览、压缩、复用过浅的层级容易导致类名抵触一旦款式多起来，这个问题就会变得越发重大，其实归根结底，就是类名抵触不好解决的问题。 反复款式这种问题就更广泛了，一些反复的款式值总是一直的呈现在css代码中，保护起来极其艰难。 比方，一个网站的色彩个别就那么几种： primaryinfowarnerrorsuccess如果有更多的色彩，都是从这些色调中天然变动得来，能够设想，这些色彩会到处充斥到诸如背景、文字、边框中，一旦要做色彩调整，是一个十分大的工程。 css文件细分问题在大型项目中，css也须要更细的拆分，这样有利于css代码的保护。 比方，有一个做轮播图的模块，它不仅须要依赖js性能，还须要依赖css款式，既然依赖的js性能仅关怀轮播图，那css款式也应该仅关怀轮播图，由此类推，不同的性能依赖不同的css款式、公共款式能够独自抽离，这样就造成了不同于过来的css文件构造：文件更多、拆分的更细 而同时，在实在的运行环境下，咱们却心愿文件越少越好，这种状况和JS遇到的状况是统一的，因而，对于css，也须要工程化治理。 从另一个角度来说，css的工程化会遇到更多的挑战，因为css不像JS，它的语法自身通过这么多年并没有产生多少的变动（css3也仅仅是多了一些属性而已），对于css语法自身的扭转也是一个工程化的课题 如何解决这么多年来，官网始终没有提出计划来解决上述问题，一些第三方机构针对不同的问题，提出了本人的解决方案。 解决类名抵触一些第三方机构提出了一些计划来解决该问题，常见的解决方案如下： 命名约定 就是提供一种命名的规范，来解决抵触，常见的规范有： BEMOOCSSAMCSSSMACSS其余我次要以BEM为例说下： BEM是一套针对css类款式的命名办法。其余命名办法还有：OOCSS、AMCSS、SMACSS等等 BEM全称是：Block Element Modifier 一个残缺的BEM类名：block\_\_element\_modifier，例如：banner\_\_dot\_selected，能够示意：轮播图中，处于选中状态的小圆点 三个局部的具体含意为： Block ：页面中的大区域，示意最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等element ：区域中的组成部分，例如：轮播图中的横幅图片(banner\_\_img)、轮播图中的容器（banner\_\_container）、布局中的头部(layout\_\_header)、文章中的题目(article\_\_title)modifier ：可选。通常示意状态，例如：处于开展状态的布局右边栏（layout\_\_left\_expand）、处于选中状态的轮播图小圆点(banner\_\_dot\_selected)在某些大型工程中，如果应用BEM命名法，还可能会减少一个前缀，来示意类名的用处，常见的前缀有： l : layout，示意这个款式是用于布局的c : component，示意这个款式是一个组件，即一个性能区域u : util，示意这个款式是一个通用的、工具性质的款式j : javascript，示意这个款式没有实际意义，是专门提供给js获取元素应用的css in js 这个计划贼大胆，它感觉，css语言自身简直无可救药了，罗唆间接用js对象来示意款式，而后把款式间接利用到元素的style中 这样一来，css变成了一个一个的对象，就能够齐全利用到js语言的劣势，你能够： 通过一个函数返回一个款式对象把公共的款式提取到公共模块中返回利用js的各种个性操作对象，比方：混合、提取、拆分更多的花色这种计划在手机端的React Native中大行其道 css in js 的核心思想是：用一个JS对象来形容款式，而不是css样式表 例如上面的对象就是一个用于形容款式的对象： const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"}因为这种形容款式的形式基本就不存在类名，天然不会有类名抵触 至于如何把款式利用到界面上，不是它所关怀的事件，你能够用任何技术、任何框架、任何形式将它利用到界面。 css in js 的特点： 绝无抵触的可能：因为它基本不存在类名，所以绝不可能呈现类名抵触更加灵便：能够充分利用JS语言灵便的特点，用各种招式来解决款式利用面更广：只有反对js语言，就能够反对css in js，因而，在一些用JS语言开发挪动端利用的时候十分好用，因为挪动端利用很有可能并不反对css书写不便：书写款式，特地是公共款式的时候，解决起来不是很不便在页面中减少了大量冗余内容：在页面中解决css in js时，往往是将款式退出到元素的style属性中，会大量减少元素的内联款式，并且可能会有大量反复，不易浏览最终的页面代码css module ...

这是笔者近日面试中遇到的一个“辣手”问题，所谓辣手，是因为CSS这个货色不常常写的话，是肯定会忘，会手生的。笔者只是提及了最常见也是最简略的Flex，却被面试官持续诘问，本认为会依据记忆写进去点什么，最初却无奈。。。话不多说了，上干货。 CSS垂直居中的形式，这里我都以父元素嵌套子元素的模式开展：已知子元素的宽高的状况下：absolute + margin:auto .parent{ width:500px; height:500px; border:1px solid #ccc; position:relative;}.children{ width:300px; height:300px; background-color:red; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}absolute + -margin: .parent{ /*同下面的盒子那样*/}.children{ width:300px; height:300px; background-color:red; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px;}子元素宽高未知的状况下：flex布局： .parent{ display:flex; justify-content:center; align-item:center;}absolute + transform: .parent{ position:relative; /*宽高同下面的盒子一样，这里不再反复设置了*/}.children{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

本节咱们学习 Sass 中的运算，个别的编程语法中都反对应用运算，Sass 中同样能够做各种数学运算，包含最根本的加减乘除运算、变量运算、色彩运算、字符运算等。本节咱们次要讲一下 Sass 中最根本的数学运算。 加法运算加法运算 + 是 Sass 中根本运算之一，在变量或者属性中都能够做加法运算。 示例：$num:14px;.xkd{ width:50px + 50px; font-size: $num + 4px;}编译成 CSS 代码： .xkd { width: 100px; font-size: 18px;}在进行运算时，还要留神所带的单位，当单位不同时会导致报错，例如： .xkd{ font-size: 12px + 2em;}执行代码，报错信息如下所示： Error: Incompatible units: 'em' and 'px'. on line 2 of style.scss Use --trace for backtrace.减法运算Sass 中的减法运算和加法运算应用起来很相似，当应用不同类型的单位时也会报错。 示例：$width:100px;.xkd{ width: 500px - $width; height: 300 - $width;}编译成 CSS 代码： .xkd { width: 400px; height: 200px;}乘法运算Sass 中的乘法运算和加减法运算一样，不同单位的值进行计算会导致报错。然而它们之间还是有一些不同，当咱们应用雷同单位的值进行乘法运算时，会呈现问题。 示例：.xkd{ width:100px * 2px;}执行的代码后报错信息如下所示： ...

简介： Oasis 从开源走向新的终点，用 3D 化的交互和表白让世界变得更美妙。置信大家曾经体验了往年支付宝五福的流动，无论是往年的五福首页还是打年兽游戏都是由蚂蚁互动图形引擎（代号：Oasis Engine）驱动的。 Oasis Engine 是蚂蚁团体 Web 3D 互动图形引擎，同时也是阿里巴巴互动技术方向的首选 Web 3D 引擎，已于 2 月 1 日正式开源。 这篇文章会和大家介绍 Oasis Engine 的一些详情和 Oasis Engine 的前世今生以及将来瞻望。心愿通过这篇文章能够让大家对 Oasis Engine 有一个初步理解。 引擎介绍Oasis Engine 是引擎一款以 Web 为先，挪动为先的互动/创作平台。应用组件零碎架构，并且谋求易用和轻量。Oasis Engine 次要蕴含 Oasis Runtime、Oasis Editor 和 Oasis Store 三局部。接下来咱们会通过概述、性能介绍、稳定性和性能几个维度来给大家介绍引擎。 概述 Oasis Engine 采纳组件零碎架构，Oasis Engine 不仅须要具备三维渲染能力，还须要蕴含了十分多来自各畛域的性能，比方 2D、3D、UI、音频、物理、VR/AR、逻辑编写等等，这些性能都是开发者的刚需。同时开发者在应用上也通常心愿引擎的构造能够放弃清晰，性能能够灵便组合。 除此之外，通常业务开发还心愿进行性能积淀，其实这些都是属于易用性的领域。在如此性能复杂度和易用性的衡量下，咱们抉择了组件零碎架构。在组件零碎架构下，万物皆组件，任何性能都能够以组件的模式插拔，灵便组合。同时脚本也是一种非凡的组件，开发者也能够很天然的把业务性能积淀为组件复用。 Oasis 引擎采纳脚本零碎进行逻辑编写。咱们提供了十分多的脚本生命周期回调，开发者只需重载须要的回调函数即可。 从易用性和可读性来说，脚本绝对通过事件编写逻辑都具备显著的劣势。尤其在组件零碎架构中，脚本零碎是更天然的一种形式。包含咱们在做引擎架构时也从不会认为任何一种架构有相对的对错，更多的是衡量和适宜的探讨。同时，咱们在脚本零碎也做了很多体验上的优化，比方提供了克隆装璜器，开发者能够依据属性的理论状况抉择不同的克隆装璜器设置克隆模式，绝对于手动编写克隆函数更加的易用。 Oasis 引擎的开发语言采纳了 TypeScript ，TypeScript 是 JavaScript 的强类型超集，相比弱类型的 JavaScript 具备十分大的劣势。尤其对于大型简单我的项目，TypeScript 带来了研发效率晋升非常明显。置信近几年很多前端开发者曾经有所领会。咱们也举荐开发者应用 TypeScript 编写逻辑脚本。 ...

 大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！ 明天小编举荐一款后盾模板——sa-admin,一个无需脚手架即可间接运行的后盾模板。 长处上手简略：提供残缺彻底的封装，不必批改一行源代码即可轻松集成示例全面：提供大量常见增删改查示例，进步你的生产力框架选型JS引擎：Vue @2.6.10UI框架：Element-UI @2.13.0web弹层：layer @3.1.1切页动画：Swiper @4.5.0即便以上几个框架你都没接触过，只有你认真浏览一遍文档阐明，也能够疾速上手本模板性能根底 架构：基于iframe，无后盾代码，纯html模板，可不便的适配任何后端语言模板：提供大量常见示例，以及各种表单的书写形式，助你疾速CRUD菜单：反对一、二、三级菜单，并凋谢一系列接口不便的应用js操作菜单折叠：折叠或膨胀菜单，并且监听窗口大小变动，在拉伸窗口时主动折叠或膨胀菜单，主动响应式搜寻：智能索引，快捷搜寻关上某个菜单切换：集成swiper动画，滑动、淡入、方块、3D流、3D翻转，五种高大上切换动画，任你抉择！主题：目前保留八种主题：蓝色、绿色、红色、灰色、灰色-开展、pro钛合金、积淀式黑蓝、简洁式灰蓝（切换主题时，可主动保留你的爱好，下次关上时依然无效）便签：弹出窗口便签，一个长期小便签，可记录一些长期材料全屏：能够在全屏/非全屏之间自在切换tabbar栏： 卡片沉积：多卡片主动沉积，与菜单双向关联，切换tab卡时主动显示左侧菜单拖动手势：tab卡反对拖拽手势，上拖新窗口关上、下拽悬浮关上、左拽疾速敞开双击全屏：当卡片属于悬浮状态时，双击题目区域能够疾速全屏，再次双击勾销全屏右键菜单：在tab上右击，能够：刷新、复制、敞开、敞开其它、敞开所有、悬浮关上、新窗口关上、勾销双击菜单：双击tabbar空白处，能够显示增加新tab窗口保留高度：切换卡片时，可主动保留上个卡片的滚动条高度凋谢接口 凋谢一系列api，助你不便的应用js操作tabbar栏，具体请查看集成文档锚链：tab切换主动更改hash锚链，同时监听锚链扭转tab，可灵便的用鼠标前后键切换tab窗口 （如不须要此性能可在初始化时敞开）窗口：可在初始化时，设置是否显示tabbar栏，来管制它是多窗口还是单窗口，具体见应用文档更新：性能不断更新中... 你有好的想法也能够通知我，加群一起交换吧文档：应用阐明，见文档预览 结尾 本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！心愿能与大家独特学习交换，欢送关注我的公众号【Github导航站】。

1.设计思路在本响应式网页设计中，通过媒体查问 @media 规定，使网页自适应不同浏览设施的屏幕宽度。网页中 <header> 位于网页顶端， <footer> 位于网页底端， 二者不管在哪一种状况下，其宽度总是为浏览窗口宽度的100%，而 <nav> 、<article> 和 <aside> 依据不同浏览窗口的大小自适应其宽度，并以不同形式布局： 当浏览窗口宽度大于768px时，<nav> 位于网页左侧 、<article> 位于网页两头，<aside> 位于网页右侧，适应桌面端浏览窗口；当浏览窗口宽度大于480px小于768px时，<nav> 和 <article> 位于网页上方并由左至右排列 、<aside> 位于网页下方，适应ipad端浏览窗口；当浏览窗口宽度小于480px时，<nav> 、<article> 和 <aside> 由上至下顺次排列，适应手机端浏览窗口。2.网页截图桌面端： ipad端： 手机端： 3.代码实现test.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> <link rel="stylesheet" type="text/css" href="test.css"> <!-- 通过JS，动静地为footer增加类fixed-bottom --> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); var contentHeight = document.body.scrollHeight,//网页注释全文高度 winHeight = window.innerHeight;//可视窗口高度，不包含浏览器顶部工具栏 if(!(contentHeight > winHeight)){ //当网页注释高度小于可视窗口高度时，为footer增加类fixed-bottom $("footer").addClass("fixed-bottom"); } else { $("footer").removeClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition); }); </script></head><body> <header> <h1>我的网页</h1> <p>——这是一个同时适应桌面端/ipad/手机的响应式网页</p> </header> <div class="row"> <nav class="col-25 col-s-25 menu"> <ul> <li>个人简介</li> <li>我的珍藏</li> <li>联系方式</li> <li>历史记录</li> <li>对于咱们</li> <li>更多功能</li> </ul> </nav> <article class="col-50 col-s-75 article"> <h1>为什么咱们须要开源的零碎芯片</h1> <p> 不再应用的芯片区域是一件小事，因为构建芯片可不像搭乐高积木那般简略，它更像是雕刻家刻在大理石快上的雕塑，因而增加电路的难度远远高于敞开电路。减少一条电路仅制作新的掩膜就大概须要破费100万美元，同时还会导致我的项目提早70天（大概10万人时的额定工作）。而在正确打算的状况下，敞开一条电路非常简单，只须要批改代码，或者针对某个掩模层进行轻微改变，只须要破费大概1万美元以及几天的提早（假如晶圆尚处于中期阶段，很容易进行这样的改变）。 </p>  </article> <div class="col-25 col-s-100"> <aside> <h2>数据结构与算法</h2> <h2>计算机网络</h2> <h2>操作系统</h2> <h2>计算机组成原理</h2> <h2>计算机系统构造</h2> <h2>数据库原理</h2> </aside> </div> </div> <footer> <p>footer@2020</p> </footer></body></html>test.css* { /* 初始化 勾销页面的内外边距 */ padding: 0; margin: 0; /* 盒子模型 */ box-sizing: border-box;}/*在整个row上面减少空行内容*/.row::after { content: ""; clear: left; display: table;}[class*="col-"] { float: left; padding: 15px; width: 100%;}/*默认是手机端 0-480px*//*ipad端 481px-768px*/@media only screen and (min-width: 481px) { .col-s-25 {width: 25%;} .col-s-75 {width: 75%;} .col-s-100 {width: 100%;}}/*桌面端 769px+*/@media only screen and (min-width: 769px) { .col-25 {width: 25%;} .col-50 {width: 50%;}}html { font-family: Arial, Helvetica, sans-serif;}header { background-color: darkblue; color: white; padding: 15px; text-align: center;}header p { margin-top: 15px;}.menu ul { margin: 0; padding: 0; list-style-type: none;}.menu li { background-color: deepskyblue; color: white; padding: 10px; margin-bottom: 15px; box-shadow: gray 1px 2px 2px; transition-property: all; transition-duration: .5s;}.menu li:hover { background-color: darkblue;}.article { background-color: wheat; padding: 15px; margin: 15px 0;}.article p { padding: 15px;}aside { background-color: deepskyblue; color: white; padding: 15px; text-align: center; font-size: 15px; box-shadow: gray 3px 3px 3px;}aside h2 { padding: 10px;}footer { background-color: lightgray; color: darkblue; text-align: center; font-size: 18px; padding: 15px; width: 100%;}img { padding: 15px; width: 100%; height: auto;}/*动静地为footer增加类fixed-bottom*/.fixed-bottom { position: fixed; bottom: 0; width: 100%;}

初衷是想给这个提交按钮 <input type="submit" value=" /> 加上背景图片，用了以下 CSS 款式： .subtn input { background-attachment: scroll; background-image: url(images/btn.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 20px; width: 60px; border-style: none;}然而不晓得是怎么回事，在 Internet Explorer 6、7、8 中皆无奈显示该背景图片按钮，仍然是默认的按钮模式，而在 Firefox 和 Chrome 中皆能够失常显示，能够排除图片链接的有效性，尝试批改了很屡次都没有胜利。起初应用 background 简写属性，在一个申明中设置所有的背景属性，在 Internet Explorer 竟然能够失常显示了： .subtn input { background: url(images/btn.gif) no-repeat scroll 0px 0px; height: 20px; width: 60px; border-style: none;}刚开始我在想是不是我的网页代码存在特殊性，其余代码可能影响了该款式，然而起初我独自新建了一个 .html，外面只写了个 form，一个输入框，一个提交框，在应用下面的 background 属性离开写的 CSS 属性后，后果问题仍旧，能够阐明这是一个普遍性的问题！CSS 文档中有提到： 通常倡议应用简写属性，而不是别离应用单个属性，因为简写属性在较老的浏览器中可能失去更好的反对，而且须要键入的字母也更少。然而我想当初的问题曾经不是浏览器版本老的问题了，而是 Internet Explorer 的问题了。 浏览器能失常显示的怪现象。最初我在网上找到了这段话：IE 图片格式问题会导致 IE 无奈显示图片。对于 IE 来说，间接改后缀名会导致图片不能显示。如果后缀名跟文件本身的格局不相符合，也是一样会无奈显示。Firefox 这些浏览器不会有影响，他们能够本人辨认。水落石出了，在 CSS 里换了一张图片，没问题了，IE 和 Firefox 都能显示了。没想到 IE 这么软弱，说罢工就罢工。 ...

1、随着屏幕的宽度，加载不同图片；<picture> <source srcset="pic1.png" media="(max-width: 600px)" /> <source srcset="pic2.png" media="(max-width: 800px)" /> <img srcset="pic3.png" alt="pic" /></picture>

overflow-x: scroll;overflow-y: hidden;scrollbar-width: none;

Sass 语言中反对的数据类型有上面几种： numbers：示意整数类型。strings：在单引号 '' 或双引号 "" 内定义的字符序列。booleans：布尔类型，有 true 和 false 两个值。colors：用于定义色彩值。nulls：指定空值，是未知数据。lists：值列表类型，示意由空格或逗号分隔的值。maps：从一个值映射到另一个值。numbers 类型数字在 CSS 中利用的很宽泛，大多数都是联合单位一起应用的，然而在技术上仍然算是数字。例如字体大小、长高、外边距内边距等。Sass 中也有数字（numbers ）类型，数字类型的值能够做一些加减乘除的运算。 示例：例如定义一个变量 $num，给这个变量赋一个数字类型的值： $num:24px;.xkd{ font-size: $num - 4; padding: $num + 6px; width: $num * 5; border-radius: $num / 6;}编译成 CSS 代码： .xkd { font-size: 20px; padding: 30px; width: 120px; border-radius: 4px;}上述代码中，咱们能够对这个变量进行加减乘除运算。然而须要留神，在应用数字类型进行计算时，如果值的单位不兼容会导致报错，例如 12px + 2em ，执行代码后会报错 Error: Incompatible units: 'em' and 'px'.，通知咱们单位不兼容。 string 类型Sass 中的字符串能够应用单引号 '' 或者双引号 "" 突围，例如 "hello" 或 'hello'，即便突围的是一个空格，也算是字符串。字符串也能够不应用引号突围，例如 hello，也示意一个字符串。 示例：咱们定义一个字符串类型的变量： ...

前言大部分前端我的项目都配置Stylelint、Eslint、Tslint和Prettier四大前端代码校验工具。代码校验工具以下简称Lint，为了解决代码不谨严，通过预设规定校验代码，检测其是否存在谬误/破绽，并对谬误/破绽提醒修复计划并尽可能根据修复计划格式化出正确代码。该性能称为格式化代码，基本上所有编辑器都需配置该性能。 Lint其实就是编辑器里运行的一个脚本过程，将代码解析成形象语法树，遍历形象语法树并通过预设规定做一些判断和批改，再将新的形象语法树转换成正确代码。整个校验过程都跟形象语法树相干，若暂未接触过形象语法树，可浏览babel源码或eslint源码理解其工作原理。 开发过程中启用Lint能带来以下益处。 可强制标准团队编码标准，让新旧组员编码习惯失去统一晋升可灵便定制团队编码格调，让预设规定合乎新旧组员心理预期减少我的项目代码的可维护性和可接入性，让新组员能疾速适应我的项目的架构与需要保障我的项目整体品质，可缩小无用代码、反复代码、错误代码和破绽代码的产生几率千万不能自私有些同学可能一时适应不了Lint带来的强制性操作，会在本人编辑器里敞开我的项目所有校验性能，这种自私行为会带来很重大的结果。 若上传无任何校验痕迹的代码块，当其余组员将该代码块更新合并到原有代码上时，因为编辑器始终配置着团队编码标准，导致被拉下来的代码块立马报错甚至产生抵触。 上述情况会让其余组员破费更多工夫解决因为你不恪守规矩而带来的问题，还节约团队为了钻研如何让整体编码格调更适宜组员的精力。 这种自私行为不可取，若团队无任何编码标准可随便编码，若已认可团队编码标准那就致力恪守，不给团队带来麻烦。 背景本文着重解说一键格式化代码的部署，像Lint罕用配置就不会解说，毕竟百度谷歌一搜一大堆。这个一键当然是ctrl+s或cmd+s保留文件啦。在保留文件时触发Lint主动格式化代码，这个操作当然不能100%保障将代码格式化出最正确代码，而是尽可能根据修复计划格式化出正确代码。言下之意就是可能存在局部代码格式化失败，但将鼠标移至红色下划线上会提醒修复计划，此时可根据修复计划自行修改代码。 为何写下本文？笔者有着谨严的代码逻辑和优雅的编码格调，所以特地喜爱格式化代码。然而又不想为每个我的项目配置Lint，这些反复无脑的复制粘贴让笔者很恶感，所以笔者只想一次配置全局运行Lint，这样就无需为每个我的项目配置Lint。在大量百度谷歌都未能搜到一篇相干文章(搜到的全副文章都是独自为一个我的项目配置，害)，笔者就花了半年多工夫探讨出本计划，真正做到一次配置全局运行。若应用本计划，置信能将所有我的项目的Stylelint、Eslint、Tslint和Prettier相干依赖和配置文件全副移除，使我的项目目录变得超级简洁，如同下图。 笔者选用VSCode作为前端开发的编辑器，其余编辑器不是性能差就是配置麻烦，所以通通放弃，只认VSCode。 在此强调两个重要问题，这两个问题影响到前面是否胜利部署VSCode的一键格式化代码。 Tslint官网已发表废除Tslint，改用Eslint代替其所有校验性能Eslint局部配置与Prettier局部配置存在抵触且相互影响，为了保障格式化性能就放弃接入Prettier所以部署VSCode的一键格式化代码只需装置Stylelint和Eslint两个插件。为了不便表述，对立以下名词。 以下提及的Stylelint和Eslint均为VSCode插件以下提及的stylelint和eslint均为NPM依赖步骤后方高能，两大步骤就能为VSCode部署一键格式化代码，请认真浏览喔！ 装置依赖为了搞清楚两个插件集成哪些NPM依赖，以下辨别装置stylelint和eslint及其相干依赖(看看即可，不要装置，重点在后头)。笔者有个习惯，就是喜爱将依赖更新到最新版本，在享受新性能的同时也顺便填坑。 # Stylelintnpm i -D stylelint stylelint-config-standard stylelint-order# Eslintnpm i -D eslint babel-eslint eslint-config-standard eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard eslint-plugin-vue vue-eslint-parser# TypeScript Eslintnpm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript eslint-config-standard-with-typescript装置实现后需配置多份对应配置文件，CSS方面有css/scss/less/vue文件，JS方面有js/ts/jsx/tsx/vue文件。查看插件文档，发现Stylelint只能在settings.json上配置，而Eslint可配置成多份对应配置文件，并在settings.json上通过特定字段指定Eslint配置文件门路。 settings.json是VSCode的配置文件，用户可通过插件裸露的字段自定义编辑器性能。因为配置文件太多不好治理，笔者开源了本人平时应用的配置文件汇合，详情可查看vscode-lint。 demo：轻易捣鼓几个Demo用于测试格式化代码eslintrc.js：校验js文件eslintrc.react.js：校验jsx文件eslintrc.vue.js：校验vue文件tsconfig.json：配置TypeScripttslintrc.js：校验ts文件tslintrc.react.js：校验tsx文件tslintrc.vue.js：校验vue文件配置文件里的rule可依据本人编码标准适当调整，在此不深刻解说，毕竟简略得来谁都会。倡议应用vscode-lint，若校验规定不喜爱可自行调整。 配置Stylelint请戳这里配置Eslint请戳这里配置TypeScriptEslint请戳这里配置VueEslint请戳这里以下会基于vscode-lint部署VSCode的一键格式化代码，找个目录通过git克隆一份vscode-lint，并装置其NPM依赖。若应用vscode-lint，上述依赖就不要装置了????。 git clone https://github.com/JowayYoung/vscode-lint.gitcd vscode-lintnpm i配置插件关上VSCode抉择右边工具栏的插件，搜寻并装置Stylelint和Eslint，装置实现后重启VSCode抉择文件 → 首选项 → 设置，设置里可选用户和工作区 用户：配置失效后会作用于全局我的项目(若大部分我的项目都是繁多的React利用或Vue利用举荐应用全局配置)工作区：配置失效后只会作用于以后关上我的项目点击设置右上角两头图标关上设置(json)，关上的对应文件是settings.json(上述有提及)插入以下配置：若在用户选项下插入以下配置，遇到其余我的项目需笼罩配置时在工作区选项下插入eslint.options.configFile指定Eslint配置文件门路重启VSCode：为了保障每次批改配置后都能失常格式化代码，必须重启VSCode{ "css.validate": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "eslint.nodePath": "path/vscode-lint/node_modules", "eslint.options": { "configFile": "path/vscode-lint/eslintrc.js" }, "less.validate": false, "scss.validate": false, "stylelint.configBasedir": "path/vscode-lint", "stylelint.configOverrides": { "extends": "stylelint-config-standard", "plugins": [ "stylelint-order" ], "rules": { "at-rule-empty-line-before": "never", "at-rule-no-unknown": [ true, { "ignoreAtRules": [ "content", "each", "error", "extend", "for", "function", "if", "include", "mixin", "return", "while" ] } ], "color-hex-case": "lower", "comment-empty-line-before": "never", "declaration-colon-newline-after": null, "declaration-empty-line-before": "never", "function-linear-gradient-no-nonstandard-direction": null, "indentation": "tab", "no-descending-specificity": null, "no-missing-end-of-source-newline": null, "no-empty-source": null, "number-leading-zero": "never", "rule-empty-line-before": "never", "order/order": [ "custom-properties", "declarations" ], "order/properties-order": [ // 布局属性 "display", "visibility", "overflow", "overflow-x", "overflow-y", "overscroll-behavior", "scroll-behavior", "scroll-snap-type", "scroll-snap-align", // 布局属性：浮动 "float", "clear", // 布局属性：定位 "position", "left", "right", "top", "bottom", "z-index", // 布局属性：列表 "list-style", "list-style-type", "list-style-position", "list-style-image", // 布局属性：表格 "table-layout", "border-collapse", "border-spacing", "caption-side", "empty-cells", // 布局属性：弹性 "flex-flow", "flex-direction", "flex-wrap", "justify-content", "align-content", "align-items", "align-self", "flex", "flex-grow", "flex-shrink", "flex-basis", "order", // 布局属性：多列 "columns", "column-width", "column-count", "column-gap", "column-rule", "column-rule-width", "column-rule-style", "column-rule-color", "column-span", "column-fill", "column-break-before", "column-break-after", "column-break-inside", // 布局属性：格栅 "grid-columns", "grid-rows", // 尺寸属性 "box-sizing", "margin", "margin-left", "margin-right", "margin-top", "margin-bottom", "padding", "padding-left", "padding-right", "padding-top", "padding-bottom", "border", "border-width", "border-style", "border-color", "border-colors", "border-left", "border-left-width", "border-left-style", "border-left-color", "border-left-colors", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-right-colors", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-top-colors", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-bottom-colors", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat", "width", "min-width", "max-width", "height", "min-height", "max-height", // 界面属性 "appearance", "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "outline-radius", "outline-radius-topleft", "outline-radius-topright", "outline-radius-bottomleft", "outline-radius-bottomright", "background", "background-color", "background-image", "background-repeat", "background-repeat-x", "background-repeat-y", "background-position", "background-position-x", "background-position-y", "background-size", "background-origin", "background-clip", "background-attachment", "bakground-composite", "mask", "mask-mode", "mask-image", "mask-repeat", "mask-repeat-x", "mask-repeat-y", "mask-position", "mask-position-x", "mask-position-y", "mask-size", "mask-origin", "mask-clip", "mask-attachment", "mask-composite", "mask-box-image", "mask-box-image-source", "mask-box-image-width", "mask-box-image-outset", "mask-box-image-repeat", "mask-box-image-slice", "box-shadow", "box-reflect", "filter", "mix-blend-mode", "opacity", "object-fit", "clip", "clip-path", "resize", "zoom", "cursor", "pointer-events", "user-modify", "user-focus", "user-input", "user-select", "user-drag", // 文字属性 "line-height", "line-clamp", "vertical-align", "direction", "unicode-bidi", "writing-mode", "ime-mode", "text-overflow", "text-decoration", "text-decoration-line", "text-decoration-style", "text-decoration-color", "text-decoration-skip", "text-underline-position", "text-align", "text-align-last", "text-justify", "text-indent", "text-stroke", "text-stroke-width", "text-stroke-color", "text-shadow", "text-transform", "text-size-adjust", "src", "font", "font-family", "font-style", "font-stretch", "font-weight", "font-variant", "font-size", "font-size-adjust", "color", // 内容属性 "tab-size", "overflow-wrap", "word-wrap", "word-break", "word-spacing", "letter-spacing", "white-space", "caret-color", "quotes", "content", "content-visibility", "counter-reset", "counter-increment", "page", "page-break-before", "page-break-after", "page-break-inside", // 交互属性 "will-change", "perspective", "perspective-origin", "backface-visibility", "transform", "transform-origin", "transform-style", "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-play-state", "animation-fill-mode", // Webkit专有属性 "-webkit-overflow-scrolling", "-webkit-box-orient", "-webkit-line-clamp", "-webkit-text-fill-color", "-webkit-tap-highlight-color", "-webkit-touch-callout", "-webkit-font-smoothing", "-moz-osx-font-smoothing" ] } }}以上配置的path为vscode-lint所在的根目录，若方才的vscode-lint克隆到E:/Github，那么path就是E:/Github。 ...

 大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！ 明天小编举荐一款小程序UI组件库ColorUI，ColorUI是一个css库！在你引入款式后能够依据class来调用组件。ColorUI下载下来看了下，组件还挺齐全的，UI成果视觉上看着在泛滥框架中怀才不遇，于是下过来看了下，基本上晓得了怎么用了。 开始App.vue` 引入要害Css `main.css` `icon.css<style>@import "colorui/main.css";@import "colorui/icon.css";@import "app.css"; /* 你的我的项目css */....</style>图片预览 结尾 本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！ 心愿能与大家独特学习交换,欢送关注我的公众号【Github导航站】。

补发18年文章前几天在想设施像素比的时候，忽然想到iphone6p的设施像素比是3，然而设施独立像素是414，414*3大于1080啊，就有点懵，因为始终认为都是间接用物理像素/独立像素的比就是设施像素比，于是就有了接下来的温习。 设施像素(dp)设施像素即物理像素，晓得是设施能管制显示的最小单位，就是显示屏上一个个的像素点（以iphone6来说，iphone6宽有750个像素点，长有1334个像素点） 屏幕尺寸指得是屏幕对角线长度，单位是英寸，1英寸 = 2.54厘米。 屏幕分辨率指的是手机屏幕的物理像素点数，就是纵向设施像素横向设施像素示意，比方iphone6 是1334750 屏幕像素密度（ppi）指的是每英寸物理像素点数量Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.7 设施独立像素（dip)也能够称之为逻辑像素，这个点是给程序控制和应用的，是形象的。当初的高分辨率屏幕会用多个设施像素来显示一个设施独立像素。比方iphone6上宽度的dip是375，iphone6+是414(规范模式)'，window.screen.width可取 设施像素比(dpr)指的是设施像素和设施独立像素的比例。通常状况之间用设施分辨率的宽除以设施逻辑宽就能够。比方iphone6就是750/375 = 2。在程序中能够通过window.devicePixelRatio来获取。少数状况下，咱们的图片都是以dpr2来设置的，也就是说，理论状况下，iphoneX下显示的图片会有稍微的含糊。然而专门去适配的很少，因为都是网络上传的图片。如果后盾反对的话，能够用srcset来做到。只须要提供图片资源、以及断点，其余都交给浏览器智能解决，浏览器会主动依据场景匹配最佳显示图片 <img src="128px.jpg" srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w" sizes="(max-width: 360px) calc(100vw - 20px), 128px">挪动端完满反对，就算安卓4.3、4.4不反对也能够用默认的src如果是本地的话，还有一个相熟image-set能够用，就是不反对安卓4.3 div { background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );}所以原生端的状况，都会应用@2x,@3x的图来匹配对应的设施。 viewportviewport是一块区域，浏览器依据这个区域来计算宽度是百分比的元素的宽度。描述图案。一般来说PC端端viewport跟浏览器的大小是统一的，挪动端的viewport 宽度大多都是980px，可见挪动端的viewport比实在的挪动端屏幕大多了。window.innerWidth所以，咱们写代码的时候，在h5页面根本都会加上meta标签 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>能够看到name=viewport，就是用于管制页面缩放的 然而咱们通常看到的meta标签并不止一个，那么meta标签有什么作用呢？meta标签是HTML标记HEAD区的一个要害标签，提供文档字符集、应用语言、作者等根本信息，以及对关键词和网页等级的设定等，最大的作用是可能做搜索引擎优化（SEO）。 平时应用最多的莫过于descriptopn和keywords了，用于搜索引擎搜寻的 既然不同的手机，它们的设施独立像素并不一样，那么如果我在iphone6p上应用宽度200px的div在iphone6p上还只是占屏幕的一半不到，到了iphone4上就会立马超过一半了。这个时候，rem就派上用场了。 rem（font size of the root element）即依据根元素的 font-size 来设置字体的大小。跟 px 一样，它是 CSS 中的一个款式单位，会依据根元素的 font-size 值来转换成 px 单位，公式为：px = rem * html(font-size) 那么，如何去抉择一个基准来设置根元素的font-size呢？ 抉择iphone手机应用分辨率最广的手机来设置，跟着设计师走 5年前，设计师还是以iphone4的基准来设置640 当初，设计师曾经依照iphone6的基准来设置750 那么，算法就很容易了 device-width / 750 * 100 ...

效果图： 我的项目地址： https://codepen.io/jianxiujiu... HTML的构造如下，创立10个雪花元素。 其实三四个元素也能够。元素越多雪花越多，雪花的速度不一样，会显得更有层次感。 <body> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div></body>一朵雪花首先，咱们先写一朵雪花，并设为相对定位。 .snow { position: absolute; color: #fff; &:after{ content: "❄"; }}这样咱们就失去一朵雪花了。那么怎么生成很多的雪花呢？咱们能够用text-shadow这个属性，给雪花设置一个暗影。 .snow { position: absolute; color: #fff; &:after { text-shadow: 10px 10px #fff; content: "❄"; }} 那么给一朵雪花生成3个暗影，就写3个shadow值就能够了。 text-shadow: 10px 10px #fff, 5px 25px #fff, 22px 5px #fff; 多重雪花当咱们心愿雪花能有更更更多的暗影，然而手动写太累人了也不迷信，所以咱们须要用到SASS的for循环，并联合random()随机函数去帮咱们随机生成多重暗影。暗影的色彩能够设置为不同的透明度，能够让雪花看起来有层次感。 @function boxShadow ($n) { $value: #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10); @for $i from 1 through $n{ $value: #{$value} , #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10); } @return $value;}.snow { position: absolute; color: #fff; &:after{ text-shadow: boxShadow(150); content: "❄"; }}此时咱们一朵雪花的多重暗影就实现了。然而一朵雪花的动画就只动一遍就隐没了，并不是咱们想要的成果。所以咱们须要多增加几朵雪花，让它们不同工夫不同地位落下。 ...

当初的前端开发根本离不开 React、Vue 这两个框架的撑持，而这两个框架上面又衍生出了许多的自定义组件库： Element（Vue）Ant Design（React）这些组件库的呈现，让咱们能够间接应用曾经封装好的组件，而且在开源社区的帮忙下，呈现了很多的模板我的项目（ vue-element-admin、Ant Design Pro ），能让咱们疾速的开始一个我的项目。 尽管 React、Vue 为咱们的组件开发提供了便当，然而这两者在组件的开发思路上，一个是借鉴的 JSX 语法，一个是特有的单文件模板的语法，两者的指标都是想提供一种组件的封装办法。毕竟都有其原创的货色在外面，和咱们刚开始接触的 Web 根底的 HTML、CSS、JS 的形式还是有些出入的。明天介绍的就是，通过 HTML、CSS、JS 的形式来实现自定义的组件，也是目前浏览器原生提供的计划：Web Components。 什么是 Web Components？Web Components 自身不是一个独自的标准，而是由一组DOM API 和 HTML 标准所组成，用于创立可复用的自定义名字的 HTML 标签，并且能够间接在你的 Web 利用中应用。 代码的复用始终都是咱们谋求的指标，在 JS 中可复用的代码咱们能够封装成一个函数，然而对于简单的HTML（包含相干的款式及交互逻辑），咱们始终都没有比拟好的方法来进行复用。要么借助后端的模板引擎，要么借助已有框架对 DOM API 的二次封装，而 Web Components 的呈现就是为了补足浏览器在这方面的能力。 如何应用 Web Components？Web Components 中蕴含的几个标准，都已在 W3C 和 HTML 规范中进行了规范化，次要由三局部组成： Custom elements（自定义元素）：一组 JavaScript API，用来创立自定义的 HTML标签，并容许标签创立或销毁时进行一些操作；Shadow DOM（影子DOM）：一组 JavaScript API，用于将创立的 DOM Tree 插入到现有的元素中，且 DOM Tree 不能被内部批改，不必放心元素被其余中央影响；HTML templates（HTML模板）：通过 <template>、<slot> 间接在 HTML 文件中编写模板，而后通过 DOM API 获取。Custom elements（自定义元素）浏览器提供了一个办法： customElements.define() ， 来进行自定义标签的定义。该办法承受三个参数： ...

在 CSS 中咱们能够通过 @import 指令将一个 css 文件导入到另一个 css 文件中。然而它有一个须要留神的中央，就是只有执行到 @import 指令时，浏览器才会去下载其余 css 文件，这导致页面加载起来特地慢，所以并不太罕用。 而 Sass 语言中同样反对 @import 指令的应用，并且与 CSS 中有一些区别，上面咱们来看一下 Sass 中是如何应用 @import 指令导入文件的。 Sass 导入文件Sass 中也有一个 @import 规定，然而与 CSS 有一些不同，CSS 中 @import 指令在每次调用时，都会都会创立一个额定的 HTTP 申请。Sass 中的 @import 规定在生成 CSS 文件时就把相干文件导入进来，不须要额定的 HTTP 申请。 在导入 Sass 文件时，能够不必导入文件的全名，省略 .sass 或者 .scss 后缀名。这样在不批改样式表的前提下，就能够批改被导入的 Sass 款式文件语法，在 sass 和 scss 语法之间随便切换。 示例： 例如已知现有两个Sass 文件： // first.scss 文件.xkd{ font-size: 14px; p{ color: pink; }}// second.scss 文件.f14{ font-size: 14px;}.f16{ font-size: 16px;}如果咱们须要将 second.scss 文件导入到 first.scss 文件中，能够像上面这样： ...

本文其实应该叫，Web 用户体验设计晋升指南。 一个 Web 页面，一个 APP，想让他人用的爽，也就是所谓的良好的用户体验，我感觉他可能包含但不限于： 急速的关上速度眼前一亮的 UI 设计酷炫的动画成果丰盛的个性化设置便捷的操作贴心的细节关注残障人士，良好的可拜访性...所谓的用户体验设计，其实是一个比拟虚的概念，是秉承着以用户为核心的思维的一种设计伎俩，以用户需要为指标而进行的设计。设计过程重视以用户为核心，用户体验的概念从开发的最晚期就开始进入整个流程，并贯通始终。 良好的用户体验设计，是产品每一个环节共同努力的后果。 除去一些很难欲速不达的，本文将就页面展现、交互细节、可拜访性三个方面动手，列举一些在理论的开发过程中，积攒的一些无益的教训。通过本文，你将能播种到： 理解到一些小细节是如何影响用户体验的理解到如何在尽量小的开发改变下，晋升页面的用户体验理解到一些优良的交互设计细节理解根本的无障碍性能及页面可拜访性的含意理解根本的晋升页面可拜访性的办法页面展现就整个页面的展现，页面内容的出现而言，有一些小细节是须要咱们留神的。 整体布局先来看看一些布局相干的问题。 对于大部分 PC 端的我的项目，咱们首先须要思考的必定是最外层的一层包裹。假如就是 .g-app-wrapper。 <div class="g-app-wrapper"> <!-- 外部内容 --></div>首先，对于 .g-app-wrapper，有几点，是咱们在我的项目开发前必须弄清楚的： 我的项目是全屏布局还是定宽布局？对于全屏布局，须要适配的最小的宽度是多少？对于定宽布局，就比拟不便了，假如定宽为 1200px，那么： .g-app-wrapper { width: 1200px; margin: 0 auto;}利用 margin: 0 auto 实现布局的程度居中。在屏幕宽度大于 1200px 时，两侧留白，当然屏幕宽度小于 1200px 时，则呈现滚动条，保障外部内容不乱。 对于古代布局，更多的是全屏布局。其实当初也更提倡这种布局，即应用可随用户设施的尺寸和能力而变动的自适应布局。 通常而言是左右两栏，左侧定宽，右侧自适应残余宽度，当然，会有一个最小的宽度。那么，它的布局应该是这样： <div class="g-app-wrapper"> <div class="g-sidebar"></div> <div class="g-main"></div></div>.g-app-wrapper { display: flex; min-width: 1200px;}.g-sidebar { flex-basis: 250px; margin-right: 10px;}.g-main { flex-grow: 1;} 利用了 flex 布局下的 flex-grow: 1，让 .main 进行伸缩，占满残余空间，利用 min-width 保障了整个容器的最小宽度。 当然，这是最根本的自适应布局。对于古代布局，咱们应该尽可能的思考更多的场景。做到： ...

css预处理器1. scss的应用Sass是成熟、稳固、弱小的CSS预处理器，而SCSS是2010年5月的Sass3版本当中引入的新语法个性，种语法旨在通过引入CSS敌对语法来缩小Sass和CSS之间的差距。齐全兼容CSS3的同时继承了Sass弱小的动静性能。 sass和scss的区别 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名语法书写形式不同，Sass 是以严格的缩进式语法规定来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写形式十分相似。// sass语法：$font-stack: Helvetica, sans-serif //定义变量$primary-color: #333 //定义变量body font: 100% $font-stack color: $primary-color// scss语法：$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}scss变量 变量用来存储须要在CSS中复用的信息，例如色彩和字体。SASS通过$符号去申明一个变量。 $primary-color: #333;body { color: $primary-color;}scss嵌套: nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; &>a { // 父选择器的标识符& color: red } } }}@import引入 // _reset.scsshtml, body, ul, ol { margin: 0; padding: 0;}// base.scss@import 'reset';body { font: 100% Helvetica, sans-serif; background-color: #efefef;}在scss中引入scss文件时能够省略文件扩展名 ...

Less Scss 预处理语言通常咱们会应用less等预处理语言来设定全局的色彩治理 color.less // DARK-THEME@base-bg: #001f3b;// @base-bg: #042d6b;@light-font-color: rgb(219, 219, 219);@shadow-color: rgb(59, 54, 54);@menu-active-color: rgb(193, 194, 196);@table-head-color: rgba(69, 107, 150, 0.808);@btn-hover-color: #0f2035;@primary-color: #39bfed;@primary-color-opacity: #39c0ed67;@bg-content: rgba(27, 159, 225, 0.205);@bg-content-3: rgba(27, 159, 225, 0.116);有的时候某些场景咱们须要在JS中去应用这些色彩比方咱们在应用echarts的时候，这时候咱们能够应用 :export 来导出变量 index.less // DARK-THEME@base-bg: #001f3b;// @base-bg: #042d6b;@light-font-color: rgb(219, 219, 219);@shadow-color: rgb(59, 54, 54);@menu-active-color: rgb(193, 194, 196);@table-head-color: rgba(69, 107, 150, 0.808);@btn-hover-color: #0f2035;@primary-color: #39bfed;@primary-color-opacity: #39c0ed67;@bg-content: rgba(27, 159, 225, 0.205);@bg-content-3: rgba(27, 159, 225, 0.116);:export { primary: @primary-color; primaryOpacity: @primary-color-opacity;}component.vue ...

简介： 随着大数据的暴发，图数据的利用规模一直增长，现有的图计算零碎依然存在肯定的局限。阿里巴巴领有寰球最大的商品常识图谱，在丰盛的图场景和实在利用的驱动下，阿里巴巴达摩院智能计算实验室研发并开源了寰球首个一站式超大规模分布式图计算平台GraphScope，并入选中国科学技术协会“科创中国”平台。本文详解图计算的原理和利用及GraphScope的架构设计。 一、 什么是图计算图数据对一组对象（顶点）及其关系（边）进行建模，能够直观、天然地示意事实世界中各种实体对象以及它们之间的关系。在大数据场景下，社交网络、交易数据、常识图谱、交通和通信网络、供应链和物流布局等都是典型的以图建模的例子。图 1 显示了阿里巴巴在电商场景下的图数据，其中有各种类型的顶点（消费者、卖家、物品和设施）和边（示意了购买、查看、评论等关系）。此外，每个顶点还有丰盛的属性信息相关联。 图 1：阿里巴巴电商场景图数据示例 理论场景中的这种图数据通常蕴含数十亿个顶点和数万亿条边。除了规模大之外，这个图的继续更新速度也十分快，每秒可能有近百万的更新。随着近年来图数据利用规模的一直增长，摸索图数据外部关系以及在图数据上的计算受到了越来越多的关注。依据图计算的不同指标，大抵能够分为交互查问、图剖析和基于图的机器学习三类工作。 1、 图的交互查问 图 2：左，金融反欺诈示例；右，图学习示例。 在图计算的利用中，业务通常须要以摸索的形式来查看图数据，以进行一些问题的及时定位和剖析某个深刻的信息，如图 2 （左）中的（简化）图模型可被用于金融反欺诈（信用卡非法套现）检测。通过应用伪造的标识符，“犯罪分子”能够从银行取得短期信用（顶点 4）。他尝试通过商家（顶点3）的帮忙，以虚伪购买（ 边 2->3）来兑现货币。一旦从银行（顶点4）收到付款（边 4->3），商家再通过其名下的多个帐户将钱（通过边 3->1 和 1->2）退还给“犯罪分子”。这种模式最终造成一个图上的闭环（2->3->1...->2）。实在场景中，图数据在线上的规模可能蕴含数十亿个顶点（例如，用户）和数千亿至万亿条边（例如，领取交易），并且整个欺诈过程可能波及到许多实体之间蕴含各种束缚的动静交易链，因而须要简单的实时交互剖析能力很好的辨认。 2、 图剖析 对于图剖析计算的钻研曾经继续了数十年，产生了很多图剖析的算法。典型的图剖析算法包含经典图算法（例如，PageRank、最短门路和最大流），社区检测算法（例如，最大团/clique、联通量计算、Louvain 和标签流传），图开掘算法（例如，频繁集开掘和图的模式匹配）。因为图剖析算法的多样性和分布式计算的复杂性，分布式图剖析算法往往须要遵循肯定的编程模型。以后的编程模型有点核心模型“Think-like-vertex”，基于矩阵的模型和基于子图的模型等。在这些模型下，涌现出各种图剖析零碎，如 Apache Giraph、Pregel、PowerGraph、Spark GraphX、GRAPE 等。 3、 基于图的机器学习 经典的 Graph Embedding 技术，例如 Node2Vec 和 LINE，已在各种机器学习场景中宽泛应用。近年来提出的图神经网络（GNN），更是将图中的构造和属性信息与深度学习中的特色相结合。GNN 能够为图中的任何图构造（例如，顶点，边或整个图）学习低维表征，并且生成的表征能够被许多上游图相干的机器学习工作进行分类、链路预测、聚类等。图学习技术已被证实在许多与图相干的工作上具备令人信服的性能。与传统的机器学习工作不同，图学习工作波及图和神经网络的相干操作（见图 2 右），图中的每个顶点都应用与图相干的操作来抉择其街坊，并将其街坊的特色与神经网络操作进行聚合。 二 、图计算：下一代人工智能的基石不仅仅是阿里巴巴，近年来图数据和计算技术始终是学术界和工业界的热点。特地是，在过来的十年中，图计算零碎的性能已进步了 10~100 倍，并且零碎仍在变得越来越高效，这使得通过图计算来减速AI和大数据工作成为了可能。实际上，因为图能非常天然地表白各种简单类型的数据，并且能够为常见的机器学习模型提供形象。与密集张量相比，图能提供更丰盛的语义和更全面的优化性能。此外，图是稠密高维数据的天然表白，并且图卷积网络（GCN）和图神经网络（GNN）中越来越多的钻研证实，图计算是对机器学习的无效补充，在后果的可解释性、深层次推理因果等方面将表演越来越重要的作用。 图 3：图计算在AI各个领域具备广大的利用前景 能够预感，图计算将在下一代人工智能的各种利用中施展重要作用，包含反欺诈，智能物流，城市大脑，生物信息学，公共安全，公共卫生，城市规划，反洗钱，基础设施，举荐零碎，金融技术和供应链等畛域。 三 、图计算现状通过这些年的倒退，已有针对各种图计算需要的多种零碎和工具。例如在交互查问方面，有图数据库Neo4j、ArangoDB和OrientDB等、也有分布式系统和服务JanusGraph、Amazon Neptune和Azure Cosmos DB等；在图剖析方面，有 Pregel、Apache Giraph、Spark GraphX、PowerGraph 等零碎；在图学习上有 DGL、pytorch geometric 等。尽管如此，面对丰盛的图数据和多样化的图场景，无效利用图计算加强业务成果仍然面临着微小的挑战： 现实生活中的图计算场景多样，且通常非常复杂，波及到多种类型的图计算。现有的零碎次要是为特定类型的图计算工作设计的。因而，用户必须将简单的工作合成为波及许多零碎的多个作业。在零碎之间可能会产生大量例如集成、IO、格局转换、网络和存储方面的额定开销。难以开发大型图计算的利用。为了开发图计算的利用，用户通常应用简略易用的工具（例如 Python 中的 NetworkX 和 TinkerPop）在一台机器上从小规模图数据开始。然而，对于普通用户而言，扩大其单机解决方案到并行环境解决大规模图是极其艰难的。现有的用于大规模图的分布式系统通常遵循不同的编程模型，并且不足单机库（例如 NetworkX）中丰盛的即用算法/插件库。这使得分布式图计算的门槛过高。解决大图的规模和效率依然无限。例如，因为游历模式的高度复杂性，现有的交互式图查问零碎无奈并行执行 Gremlin 查问。对于图剖析零碎，传统的点核心编程模型使图级别的现有优化技术不再可用。此外，许多现有零碎也根本未在编译器级别上做过优化。上面咱们通过一个具体的示例看看现有零碎的局限性。 ...

本节咱们学习 Sass 中的嵌套，嵌套大家应该不生疏，在 HTML 中就反对标签的嵌套。Sass 中容许一个 CSS 款式嵌套进另一个款式中，内层款式仅实用于外层款式的选择器范畴内。 示例：例如上面这段 CSS 代码： .big { color: #ccc;}.big .small { font-size: 14px;} 如果咱们要应用 Sass 中的嵌套语法来写，如下所示： image 从上图咱们能够看到，嵌套的语法其实很简略，相较于 CSS 语言中后辈选择器的写法，嵌套规定看起来要直观很多。 应用 Sass 嵌套来写代码，能够缩小父类选择器的反复，不过须要留神的是，咱们最好不要嵌套太多层选择器，因为嵌套层数越多性能越低。个别咱们在理论利用中，嵌套三层左右就差不多啦。 援用父选择器 &在嵌套 CSS 规定时，有时候咱们须要间接应用到嵌套外层的父选择器，比方当给某一个元素设定 hover 款式时或者是当 body 元素有个 classname 时，能够用 & 符号来示意嵌套规定外层的父选择器。 示例：例如上面这段代码： a { color: #ccc; font-size: 12px;}a:hover { color: #000;} 咱们能够这样写： image 上图中 & 符号被解析为选择器 a，即父选择器。个别 & 符号是呈现在选择器的后面地位，例如上述代码中的 &:hover。 除此之外，咱们也能够在 & 符号前面增加一些后缀，示意在父选择器名称的根底上组合成新的选择器名称。 示例：例如上面这段代码中，选择器名称的前缀都一样： .top { background-color: #ccc;}.top-div { font-size: 14px;}.top-p { color: #000;}.top-p__span { font-size: 12px;} 那咱们就能够将这些前缀都应用 & 代替： ...

你即使不须要，但你能够。留神：原文发表于2018-12-26，随着框架一直演进，局部内容可能已不实用。 CSS 是任何 Web 应用程序的外围局部。 宽泛而论，如果一个 UI 框架没有内置向组件增加款式的形式，那么它就是半成品。 这便是为何 Svelte 容许你在组件的 <style> 标签中增加 CSS 的缘故。 将 CSS 与标记共存，意味着咱们能够解决开发人员在编写 CSS 时遇到的最大问题，在不引入新的问题的同时，还提供极佳的开发体验。 然而 Svelte 的款式解决的确存在一些限度，在组件之间共享款式或者利用级优化都艰巨重重。 这些是咱们打算在将来版本中解决的，不过与此同时，如果你亟需这些性能的话，你能够应用与框架无关的 CSS-in-JS 库。 示例在这里，咱们用 Emotion 来生成能够跨多个组件中应用的范畴受限的类名： App.svelte <script> import { comicSans, link } from './styles.js'; import Hero from './Hero.svelte';</script><Hero/><div class={comicSans}> <p> Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a> </p></div>Hero.svelte ...

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .type2,#pay{ display:none; } .vip_content { width: 929.5px; border: solid 0.5px #dcdcdc; border-top: none; margin: 0 auto; margin-top: 22px; margin-bottom: 25px; border-radius: 5px; } .vip_bar { display: flex; align-items: center; position: relative; height: 54px; } .vip_bar .one_option { font-size: 17px; letter-spacing: 1.3px; color: #a1a1a1; cursor: pointer; height: 54px; text-align: center; display: flex; align-items: center; justify-content: center; border-top: none; width: 477.5px; } .privilege_option { width: 475px; z-index: 99; position: absolute; left: 0; top: 0; } .num_option { z-index: 99; color: #a1a1a1; position: absolute; right: 0; top: 0; } .vip_bar .this_option { color: #3b3127 !important; z-index: 200; } .vip_bar .bg_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin-right: 0; z-index: -1; } .vip_bar img { width: 17px; margin-right: 6.5px; } .box { background-color: #fff; padding: 25px 0; } .vip_msg { width: 855px; margin: 0 auto; background-color: #fff; } </style> </head> <body> <div class="vip_content"> <div class="vip_bar"> <div class="one_option privilege_option this_option"> <!-- 选中 -->   <!-- 没选中 -->   梯形选项1111 </div> <div class="one_option num_option"> <!-- 选中 -->   <!-- 没选中 -->   梯形选项222 </div> </div> <div class="box type1"> <!-- tex --> <div class="vip_msg">梯形选项内容1111</div> </div> <div class="box type2"> <div class="vip_msg">梯形选项内容2222</div> </div> </div> </body></html><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script> $(function () { $(".privilege_option").click(function () { $(this).addClass("this_option"); $(".num_option").removeClass("this_option"); $(".single").removeClass("single_this"); $(".type1").show(); $(".type2").hide(); $(".privilege_option").css("z-index", 200); }); $(".num_option").click(function () { $(this).addClass("this_option"); $(".privilege_option").removeClass("this_option"); $(".type1").hide(); $(".type2").show(); $(".privilege_option").css("z-index", 0); }); });</script>

 大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！ 明天小编举荐一款Web上的按钮库Buttons，Buttons是一个高度可定制的、收费并且开源的按钮CSS款式库。 成果预览 结尾 本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！ 心愿能与大家独特学习交换,欢送关注我的公众号【Github导航站】。

1、题目 <h1> ~ <h6>，所有题目的行高都是 1.1（也就是 font-size 的 1.1 倍）。 2、副标题 <small>，行高都是 1，灰色（#999）。 <h1> 主题目 <small>副标题</small></h1>3、Body 款式 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff;}4、<p>，段落款式 p { margin: 0 0 10px; }5、强调款式 .lend .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4;}6、粗体 <b>、<strong> b, strong { font-weight: bold; /*文本加粗*/}7、斜体 <i>、<em> <em>、<strong> 个别是展示给爬虫看的（并重语义），<i>、<b> 是展示给用户的（并重视觉效果）。 8、字体色彩 .text-muted：提醒，应用浅灰色（#999）.text-primary：次要，应用蓝色（#428bca）.text-success：胜利，应用浅绿色（#3c763d）.text-info：告诉信息，应用浅蓝色（#31708f）.text-warning：正告，应用黄色（#8a6d3b）.text-danger：危险，应用褐色（#a94442） 9、文字对齐形式 .text-left { text-align: left;}.text-right { text-align: right;}.text-center { text-align: center;}.text-justify { text-align: justify;}10、列表去点 .list-unstyled ...

这是将来的趋势所向，如是我行。留神：原文发表于 2017-9-6，随着框架一直演进，局部内容可能已不实用。 CSS 日渐惹人憎恨。 究其原因颇多，归根结底，皆因 CSS 给人的感觉总是飘渺迷蒙、变幻莫测。 譬如微调某个款式后，却出其不意地殃及一些看似毫无瓜葛的布局，尤其是筹备部署之时。 这类教训如果你从未领会过的话，你要么是不明就里的老手，要么是登峰造极的高人。 故此 JavaScript 社区又开始撸起袖子着手炮制，只消数载，各色各样的 CSS 库宛如雨后春笋不断涌现，它们统称为 CSS-in-JS。 然而 CSS 最辣手的问题兴许并不需要 CSS-in-JS 亦可解决，对此你可能还不知情。 假使果真如此，那么编写 CSS 将是一种惬意的享受，而非苦楚的忍耐，此外，CSS-in-JS 也会产生新的问题要去解决，未免有点旁生枝节。 本文并非要和 CSS-in-JS 唇枪舌剑，也不否定社区所做的致力，它在 JS 生态中如此沉闷，且每周都有新的想法呈现。 其实我目标是想介绍一种让人更加欢快的代替计划 —— 它就是带有真正 CSS 的单文件组件！ CSS 最大的问题CSS 中的一切都是全局的，正因如此，为某个标记上编写的款式，可能会使另一个标记受到牵连。 也正因如此，开发者常常借助于各种命名空间的约定（而非“规定”，因为难以施行），但此法只会徒增 RSI 的危险。 如果你置身于团队之中，状况更加顽劣。别人所写的款式无人敢改，通常无奈猜想它们是做什么用的，利用在哪些标记了，以及如果删掉会带来什么劫难。 其后果是：样式表必须只增不减。 你无奈得悉哪些代码能够平安地删除。因而常见的做法是用一些更具体的款式来笼罩现有款式，哪怕是在绝对较小的我的项目上亦是如此。 单文件组件扭转乾坤SFC 背地的思维非常简略：在一份 HTML 文件中编写组件，该文件能够蕴含形容组件款式的 <style> 和形容行为的 <script> 标记。 Svelte、Ractive、Vue 以及 Polymer 都是遵循这种模式。 （显然咱们在文章其余内容都将应用 Svelte，然而如果应用模板会让你胆战心惊的话，其实你的放心是多余的，不过这又是另一个话题了，那你能够应用 Vue，它容许你在 SFC 中编写 JSX） 如果你从未接触过 Svelte，无妨先参看这篇文章：无招胜有招：为何咱们没有及早悟到这个方法？，或者看看用户的评估。 利用这种模式，后果会产生几件美好的事件： 组件的款式都是部分款式（scoped），不会向外泄露，没有不可预知的级联状况，彻底解脱为了避免名称抵触而硬取的超级啰嗦的类名。你无需再去文件夹中苦苦追究那些毁坏你款式的规定。编译器（例如 Svelte）可能辨认和删除有效的款式，从此不再是“只增不减”了！上面咱们来试试探明到底。 < 因不反对插入视频，点击此处观看视频 > ...

第一步：根底阐明。margin的意思很容易明确，就是外边距，用更艰深的话说，就是二个盒子之间间距的设置。 margin有许多须要留神的中央，比方块级元素垂直相邻外边距会合并，行内元素实际上不占高低外边距，左右外边距也不会合并，浮动元素的外边距也不会合并。 一般元素的margin百分百是依照父级元素（正确的说应该是蕴含块，具体能够看这篇文章对于CSS中设置overflow属性的值为hidden的相干了解）的宽来计算的，而相对定位的元素的margin百分比是依照第一个定位元素（relative，absolute和fixed）的宽来计算的。 第二步：block元素重叠。block元素（不思考float和absolute）在垂直方向产生margin重叠（不思考writing-mode扭转书写形式）；margin三种重叠：1.相邻兄弟元素；2.父亲元素和第一个或最初一个孩子元素；3.空的block元素。 第三步：重叠条件。父子元素重叠条件（margin-top）父元素非块状格局上下文元素；父元素和第一个子元素之间没有inline元素宰割；父元素没有border-top或padding-top设置。父子元素重叠条件（margin-bottom）父元素非块状格局上下文元素；父元素没有border-bottom或padding-bottom设置；父元素和最初一个子元素之间没有inline元素宰割；父元素没有height,min-height和max-height的限度。空的block元素重叠元素没有border或padding或inline设置；没有height或者min-height设置。第四步：有价值的细节。重叠计算方法：正正取最大、负负取最小和正负相加。 在书写方向的垂直方向，margin:auto会主动调配残余空间（残余空间的意思简略的能够了解为：在没有设置宽之前的长度去掉你设置的宽余下的那段间隔）。 相对定位元素的非定位方向margin有效（貌似是的，不过形容不精确，其实始终无效，只不过当初只能够影响本人，无奈扭转兄弟了，因而看起来生效了）。 最初一个题外话，margin-collapse能够设置重叠形式（collapse默认，重叠、discard勾销margin,等于margin:0和separate分隔，就是不产生重叠）。

Transform 转换一些罕用的属性：transform: none | transform-functions;【通过设置该属性的值，咱们能够对元素应用转换，具体的属性值在上面会专门介绍。】transform-origin: x-axis y-axis z-axis;【设置元素转换的中心点，最直观的例子旋转图片，扭转图片抉择依赖的旋转核心。】transform-style: flat | preserve-3d;【定义外面转换的元素是在2D立体出现还是在3D空间出现，讲的直白些，就是这个元素外面的空间维度是二维还是三维。】perspective: number | none;【属性是定义3D元素距试图的间隔，设置当前，其子元素会取得透视成果，须要留神的是该值只对3D转换无效，这也是很容易了解的。此外，还能够通过Transform的属性值的形式设置，二者是有肯定区别的，你能够认为，前者是把整个看成一个舞台，后者是每一个都是一个舞台。】perspective-origin: x-axis y-axis;【必须和perspective一起应用，只对3D转换元素无效，简略的了解就是你的眼睛看的焦点。】backface-visibility:hidden | visible;【这个很简略，设置当元素背对着屏幕时候，是否是可见的。】下面介绍的属性transform: none | transform-functions;其中有很多办法能够应用，具体的请查看文件API，这里没有列举进去的意义，其中perspective(n)办法是为3D转换元素定义透视视图，须要略微注意一下，其中一些办法比拟非凡，当前会独自去介绍。 Transitions 过渡transition: property duration timing-function delay;请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡成果。下面是对立设置，也能够别离设置各个属性。 一些罕用的属性：transition-property：规定设置过渡成果的 CSS 属性的名称；transition-duration：规定实现过渡成果须要多少秒或毫秒；transition-timing-function：规定速度成果的速度曲线；transition-delay：定义过渡成果何时开始。Animation 动画animation: name duration timing-function delay iteration-count direction;请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。下面是对立设置，也能够别离设置各个属性。 一些罕用的属性：animation-name：规定须要绑定到选择器的 keyframe 名称；animation-duration：规定实现动画所破费的工夫，以秒或毫秒计；animation-timing-function： 规定动画的速度曲线；animation-delay：规定在动画开始之前的提早；animation-iteration-count：规定动画应该播放的次数；animation-direction：规定是否应该轮流反向播放动画；animation-fill-mode (能够设置为none | forwards | backwards | both)：规定动画在播放之前或之后，其动画成果是否可见；animation-play-state（能够设置为paused|running）：规定动画正在运行还是暂停，能够在 JavaScript 中应用该属性，这样就能在播放过程中暂停动画；@keyframes animName{from {} to {}}：定义动画名称为animName的动画关键帧。

第一步：基本概念。层叠上下文是一个概念上的货色，学过编译原理的人应该对这里的上下文很分明，而层叠不过就是一个词罢了，解释一下就是，依据层叠规定决定地位的一个环境。还须要留神的一点是，具备层叠上下文的元素比一般元素要更凑近眼睛。 层叠程度也是一个概念上的货色，用大白话说就是：在一个层叠上下文的环境下，外面的元素在z轴上的排列程序的规定，而层叠程序就是这里说的具体规定，是实际的货色。 第二步：层叠程序。须要记住的是，外部的层叠上下文及其子元素均受制于内部的层叠上下文，上面是层叠程序，从远到近。 层叠上下文background/border；负z-index；block块状盒子模型；float浮动盒子；z-index为auto或看成0的不依赖z-index的上下文；z-index为auto或看成0；正z-index。第三步：产生条件。根层叠上下文（指的是页面根元素，也就是 元素）。 定位元素与传统层叠上下文（应用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是数字会产生叠上下文）。 CSS3与新时代的层叠上下文: 一个被设置了display:flex的元素蕴含的元素对其设置z-index为数值时其会产生层叠上下文；设置了opacity不为1的元素会产生层叠上下文；设置了transform不为none的元素会产生层叠上下文；设置了mix-blend-mode不为normal的元素会产生层叠上下文；设置了filter不为none的元素会产生层叠上下文；设置了isolation:isolate的元素会产生层叠上下文；设置了-webkit-overflow-scrolling的元素会产生层叠上下文（挪动端）；设置了will-change的元素会产生层叠上下文。

第一步：行内盒子模型。为什么明明说的是垂直对齐形式，开始却要说盒子模型，还是行内盒子模型，因为垂直对齐形式管制的对象就是这个模型，因而咱们先理解一下管制的环境，再看如何管制。 对于盒子模型相干的货色，咱们会独自去认真阐明，因为十分重要，这里只是给出简略的阐明，包含上面的行低等一样： 内容区域（content area）：一种围绕着文字看不见的盒子，大小和font-size无关。 内联盒子（inline boxes）：不好表白，举例子解释一下，被inline程度标签（em、a和span等）蕴含的称为"内联盒子"，如果是赤裸裸的文字就称为"匿名内联盒子"。 行框盒子（line boxes）：一行就是一个行框盒子，外面由一个个内联盒子组成，应该不是太难了解。 蕴含盒子（containing box）：由一行行的行框盒子组成，比方<p>单纯的文字被inline程度标签蕴含的文字</p>。 行内盒子模型布局有一个问题，轻易提一下：在应用display:inline-block使元素位于一行时元素之间有间隙是因为一些比方换行符等空白字符导致的（解决办法是对外壳设置font-size:0px，外面小格子再复原font-size为须要的值，当然别的办法也有，比方标签全副一行，不要换行，不过这个感觉好用些）。 还有一个技巧，对于想整体居中，外部左对齐的布局，为了最初一行有余一行的时候不会突兀的居中，能够增加几行和内容元素一样宽，高为零的行内元素，十分好用。 此外，还有几个罕用的属性，列举一下： white-space：属性设置如何解决元素内的空白，比方是否换行等。 第二步：行高。为什么行高也是要提前阐明一下，因为垂直对齐是在一行中进行的，行高代表的是理论高，有必要理解一下，帮忙去寻找对齐线条。 行高定义的是二行文字基线（baseline）的间隔（不肯定精确，更严格说应该是行框盒子的理论高度，不是高度），内容区域（content area）高度+行间距(vertical spacing)=行高，行高因为继承，无处不在，包含单行文本也不例外；其次，高度的体现不是行高而是内容区域高度+行间距，而且内容区域高度只与字号和字体无关，和行高没有任何关系。 简略的说就是：行高决定了内联盒子高度，行间距可大可小、可正可负，始终保障行低等于高。 内容区域高度不肯定是font-size，还取决于字体，不同字体不一样，在simsum下二者是一样的。 line-height取值数字时所有可继承依据font-size从新计算，而取百分百和em时，以后元素依据font-size计算之后把计算的后果继承给上面元素，区别有点大。 替换元素比拟特地，个别有外在尺寸和宽高比，不能够简略的去了解，遇到要小心，前期对于该元素会专门去探讨。 第三步：注释。垂直对齐形式是用来设置垂直对齐形式，所有垂直对齐的元素都会影响行高，批改的是本人的什么线垂直对齐父元素的什么线，比方默认本人的基线对齐父元素的基线；如果取值百分百，计算是绝对行高计算的。 依据前置常识你应该能够猜到，其是一个inline-block、table-cell（比方td元素）或inline依赖型元素。 如果设置为数值，百分百或em等单位，示意的是在默认根底上偏移的对齐。 第四步：留神点。inline-block的基线是失常流中最初一个line box的基线，除非，这个line box外面既没有line boxes或者自身overflow属性的计算值而不是visible，这种状况下基线是margin底边缘。

包裹元素剪裁条件是不是包裹元素overflow设置为hidden当前，外部元素如果超过包裹元素的话就会被剪裁？答案是不肯定，这要看此刻的CSS环境。 依据对CSS2.1标准的了解，能够这样表述：如果一个元素的蕴含块的overflow属性设置为hidden，那么超过这个蕴含块局部的内容就会被剪裁。 因而咱们须要学会寻找一个元素的蕴含块，不过在这之前，让咱们先简略的晓得如果一个元素的overflow属性设置为hidden，被其包裹的内容如果溢出须要同时满足的条件： 领有overflow:hidden款式的块元素不具备position:relative和position:absolute款式；外部溢出的元素是通过position:absolute相对定位或position:fixed固定定位。寻找蕴含块什么是蕴含块？依据CSS2.1标准外面的阐明，简略的说就是：用来确定一个元素的盒子的地位和尺寸的矩形就叫这个元素的蕴含块。 寻找规定因而蕴含块是一个十分有意义而且波及属性很多的概念，至于如何确定一个元素的盒子的蕴含块是谁，遵循上面几条规定： 根元素的蕴含块其蕴含块又叫初始蕴含块，能够先认为就是可视区域（其实不精确，权且这样说比较简单）。 非根元素，且其position属性是relative和static的元素的蕴含块它的蕴含块是由最近的先人块容器盒的内容区域创立的。 非根元素，且其position属性是absolute的元素的蕴含块它的蕴含块由最近的position不为static的先人元素创立（如果没有找到这样的先人元素，这个相对定位的元素的蕴含块为初始蕴含块）；具体创立办法如下： [1] 如果这个先人元素是行内元素，蕴含块的范畴是这个先人元素中的第一个和最初一个行内盒的padding box围起来的区域； [2] 如果这个先人元素不是行内元素，蕴含块的范畴是这个先人元素的内边距+width区域。 为什么会革除浮动造成的影响一个乏味的景象是：一个没有设置高度的父元素包裹一个子元素，父元素应该会被子元素撑起来，也就是有高了，不过如果你给子元素设置了浮动，显然原来父元素撑起来的高就塌了，到这里如同都很失常；接着，你给父元素加了一个overflow:hidden，发现父元素的高又有了，如同浮动被革除了一样，为什么会这样？ 其实归根结底，这里的浮动没有革除，只是因为overflow属性的值是hidden的时候会造成一个BFC，而BFC就是一个隔离的渲染区域，因而浮动造成的高崩塌会导致对外部布局的影响，为了打消这种不益的体现，计算高度的时候浮动元素也计算进去了。 如果说到这里就进行，你可能会十分好奇，除了这里的状况还有什么状况会产生BFC，而BFC环境下具体会有哪些规定？接着下段来讲。 BFC（块级格式化上下文）BFC是一个十分有用的环境，如果用一句话来阐明它是什么样的存在：一个隔离的渲染区域，容器外面的子元素不会在布局上影响到里面的元素，反之也是如此。 如何触发BFC?只须要保障满足上面至多一条就会触发BFC： 根元素body；设置了float值不为none的元素；设置了overflow属性不为visible的元素；设置了属性position不为relative和static的元素；设置了display的值为flex、table-cell、table-caption和inline-block中的任何一个的元素。能够看进去，就是一个比拟独立的块，因为是一个独立的环境，在开发时候适度应用会无效升高开发和保护难度。 BFC环境下的个性或规定大抵能够演绎为三个方面：独立性、垂直散布规定和程度散布规定。 独立性：BFC是页面上一个隔离的容器，和里面的关系是不会相互影响，对浮动而言也是，不会和浮动元素产生重叠，高也和下面提到的一样不会崩塌；垂直散布规定：BFC的外部外面的一个个盒子在垂直方向一个接着一个排放，地位由margin决定，两个相邻的盒子margin会产生重叠；程度散布规定：BFC外面的盒子的左外边缘和蕴含块的右边相接触，简略的了解就是程度方向不会产生margin重叠。