Css

CSS的BFC是什么BFC（Block Formatting Context）块级格式化上下文首先格式化上下文是一套css规范定义的页面渲染区域，有自身的渲染规则（定位，子元素之间的关系） 那么BFC便是格式化上下文中的其中一种，可将拥有BFC特性的元素看成一个大容器，里面的子元素布局 不会影响到外面的元素 元素如何拥有BFC特性当元素是html根元素时便自动拥有BFC特性当元素被设置成绝对定位的元素（position: fixed , absolute）当元素设置成除了float:none 元素之外的浮动元素当元素设置了overflow属性，并且值不为visible如何应用元素的BFC特性解决上下外边距重叠的问题 原因：当我们定义两个块级元素，它们之间的上下边距会重叠 这是由于根元素拥有BFC特性，会将两个块级元素的上下外边距进行重叠 解决：若想让它们之间的上下边距不重叠，则要对它们分别拥有BFC特性 eg. <div style="overflow: hidden"></div> <div style="overflow: hidden"></div> 这样两个元素便会独立开来，不会发生上下外边距的重叠了清除浮动，解决由于浮动带来的父元素高度坍塌的问题 原因：由于父元素没有设置高度，子元素设置成浮动后，会脱离普通文档流，让父元素高度塌陷 解决：由于BFC容器可以包含浮动元素，所以可以触发父元素的BFC属性 eg. <div style="overflow: hidden"> <div style="float:left; height:200px"></div> </div>处理元素被浮动元素覆盖 原因：设置为浮动元素其兄弟元素会被覆盖 解决：将兄弟元素追加BFC特性，可以和浮动元素隔离开来，不被其覆盖 eg. <div style="overflow: hidden">content</div> <div style="float:left; width:200px; height:200px"></div>

display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;

背景这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。 正文昨天， 测试提了个问题， 现象是一个输入框的聚焦提示偏了， 让我修一下, 如下图： 起初认为是红框提示位置不对， 就去找代码看： <Input // ... onFocus={() => setFocusedInputName('guidePrice')} onBlur={() => setFocusedInputName('')}/><Table data-focused-column={focusedInputName} // .../>代码上没有什么问题， 不是手动设置的，而且， 在我和另一个同事， 还有PM的PC上都是OK的： 初步判断是，红框位置结算有差异， 差异大小大概是17px, 但是这个差异是怎么产生的呢？ 就去测试小哥的PC上看， 注意到一个细节， 在我PC上， 滚动条是悬浮的： 在他PC上， 滚动条是占空间的： 在他电脑上， 手动把原本的 overscroll-y: scroll 改成 overscroll-y: overlay 问题就结局了。 由此判定是： 滚动条占据空间 引起的bug。 overscroll-y: overlayCSS属性 overflow， 定义当一个元素的内容太大而无法适应块级格式化上下文的时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。/* 默认值。内容不会被修剪，会呈现在元素框之外 */overflow: visible;/* 内容会被修剪，并且其余内容不可见 */overflow: hidden;/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */overflow: scroll;/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */overflow: auto;/* 规定从父元素继承overflow属性的值 */overflow: inherit;官方描述：overlay  行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。表现：html { overflow-y: overlay;}兼容性没有在caniuse上找到这个属性的兼容性， 也有人提这个问题： ...

这本书介绍的方法主要是运用了CSS3的知识，居然的兼容写法，自行查阅查询属性的支持程度入口浏览器前缀处理工具Autoprefixer CSS编码技巧1、减少代码重复 当某些值相互依赖时，应该把它们的相互关系用代码表达出来代码易维护 vs 代码量少currentColor继承inherit2、了解视觉差异3、响应式页面设计 媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸4、合理使用简写 合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险5、合理使用预处理器 背景和边框1、半透明边框border: 10px solid hsla(0,0%,100%,.5);background: white;background-clip: padding-box;background-clip 属性规定背景的绘制区域，背景色。由于background-clip的值默认是border-box，背景的颜色会入侵到边框的位置，所以需要设置为padding-box修正。2、多重边框box-shadow：可接受第四个参数数组，水平偏移、垂直偏移、模糊程度、扩张半径可用逗号分隔语法，创建任意数量的投影，第一层投影位于最顶层//可用这个方法实现多个边框，但是如果边框是虚线那就不行了box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;outline:如需两层边框，可先设置一层常规边框，再加上outline（描边）属性来生产外层的边框。使用方式和border一样，位于border外面，可通过outline-offset设置其与边框直接的距离。不接受使用逗号添加多个值。如今，如元素时圆角，则无法贴合圆角（bug，未来可能会可以）。如使用这个属性，最好在不同浏览器中完整地测试最终效果。3、灵活的背景定位background-position：运行指定背景图片距离任意角的偏移量。回退方案：在不支持background-position扩展语法的浏览器中，我们把老套的right、bottom定位值写进background的简写属性中。background-position: right 20px bottom 20px; background-origin：修改背景图片background-position定位的标准。默认是padding-box;background-origin:border-box/padding-box/content-box;因此background-position是以 padding box 为准的进行定位的。想背景图片距离边角的偏移量跟内边距保持一致，可修改background-origin的值为content-box。如不想修改background-origin的默认值，可设置calc()，使用这个函数计算。background-position: calc(100% - 10px) calc(100% - 10px);4、边框内圆角 要实现上图效果，我们习惯会用两个盒子实现。下面介绍一个使用一个盒子实现上图效果。background-color: pink;//设置盒子背景颜色border-radius: 10px;//设置圆角box-shadow: 0 0 0 10px #655;//设置盒子阴影outline: 11px solid #655;//设置盒子outline，一般设置比圆角，阴影大一点，为了更好的效果5、条纹背景linear-gradient：直线过渡radial-gradient：圆过渡，以中心的为起点，颜色过渡通过背景颜色过渡设置，再设置背景大小后面的颜色使用0代替对应的百分百，可以避免修改比例的时候，要改两个数据。注：两个颜色后面跟的百分百是指在哪个位置开始这个样式，两个的差值就是过渡的部分background: linear-gradient(to bottom,#eee 30%,#ddd 30%);background: linear-gradient(to bottom,#eee 30%,#ddd 0);background-size: 100% 15px;斜向条纹（这个只适合45deg的斜向） background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);background-size: 50px 50px;更好的斜向条纹 ...

概念Transform字面意思就是变形，改变的意思，该元素应用于2D和3D转换，该属性允许我们i元素进行旋转、缩放、移动和倾斜。在css3中transform主要包括以下几种： 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法transform: rotate | scale | skew | translate | matrix; 注意：表示一个或者多个函数变换的时候是以空格分开而不是逗号。transform属性实现了一些可用SVG实现的同样功能，它可用于内联(inline)函数和块级(block)元素，它允许我们旋转，缩放和移动元素。他有几个属性值参数：rotate;translate;scale;skew;matrix。旋转rotate 旋转 rotate通过指定的角度参数对原元素指定一个2D 旋转和3D旋转，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。rotate():2D旋转transform: rotate(45deg); rotateX():沿着X轴3D旋转transform: rotateX(45deg); rotateY():沿着Y轴3D旋转transform: rotateY(45deg); rotateZ():沿着Z轴3D旋转transform: rotateZ(45); rotate3d(x,y,z,angle):3D旋转，接受四个参数，x,y,z介于0-1之间，angle是旋转的度数。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。transform: rotate3D(1,1,1,45deg); 移动 translate移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下： translateX(x) ， 沿 X 轴位移translateX(x) ， 沿 X 轴位移 translateY(y), 沿Y移动translateY(y) //沿y移动 ranslateZ(z) ， 沿 Z 轴位移，需要配合perspective属性一起使用transform: translateZ(20px); translate(x, y) ， 沿 X Y 轴位移transform: translate(20px,30px); 通过矢量(x,y)指定一个2D translation，x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则y以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px): translate3d(x, y, z) ， 沿 X Y Z 轴位移transform: translate(20px, 20px, 20px); ...

好像当时学习的时候，就是听说css最强大的就是动画了。animation:总共有6个属性 name:动画的名称duration:完成动画的时间timing-function:动画的曲线速度linear速度是相同的， 常用、默认ease,低速开始然后变快然后再慢，ease-in,ease-out,以低速开始、结束ease-in-out,低速开始与结束， 常用cublc-bezier(n,n,n,n),自定义函数delay:动画开始播放的延迟时间interation-count:动画播放的次数n: 自定义次数，默认1次infinite: 无限次diretion:是否反方向播放动画normal 正常，默认方式alternate 反方向定义一个动画的时候需要用到关键词，@keyframes 动画名称动画名称与animation的name字段是一样的定义一个动画<div> kkw</div> <style> div{ ainmation: kkw 1s ease 0 infinate alternate}@keyframes kkw {%0{font-size: 12px}%50{font-size: 24px}100% {font-size: 36px}}</style>

问题：蓝色的背景图使用定位做的遮罩，下面的点击咨询不能触发 解决：给遮罩元素加上属性 pointer-events: none; 原理：这个属性值可以让元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素

form标签创建表单 块元素参数： 1. action:表单提交服务器地址 如果不设置，提交是没有反应2. method:表单提交方式（方法） post 获取信息 get 发送信息（默认值）3. target 提交页面打开在何处打开 _self 当前页面打开 _blank 新页面打开 _new 新打开一个页面，如果是新的就不会在打开一个页面form实现方式通过input标签input 特点： 单标签 行内块元素 默认属性： paddingoutline 轮廓线 跟border一样但不会影响页面布局值： value 显示在框中的默认值placeholder 输入前提示框显示的内容name 定义信息的值autofocus 自动聚焦readonly 将表单设置为只读 数据会提交disabled 将表单设置为禁用 数据不会提交autocomplete 自动补全（on off）<input type="text" placeholder="请输入用户名" name="username" autofocus autocomplete="off">提交按钮 <input type="submit" value="登陆"><input type="button" value="提交">实现效果需要JS密码输入 <input type="password" name="pwd">数字输入 <input type="number" value="100" min="2" max="200" step="5">value 默认值min 最小值max 最大值step 步长搜索框 <input type="search">输入滑块 <input type="range"><br>文件导入 <input type="file"><br> 单文件导入<input type="file" multiple><br> 多文件导入

样式最近因为接触到这个，才搜索了一下这个，它的用法与scoped类似，但是它编译之后更具唯一性，写法稍微麻烦点，记录一下使用方法。这里我用的是less css，在webpack.base.config.js里添加 使用方式：1、在style里添加module。2、样式写法 :class='$style.样式名'

层级结构在我们写html文档的时候,我们所创键的元素默认都是在文档流中排列,那么有在文档流中就有脱离文档流.我们的浮动和绝对定位,固定定位就是让元素脱离文档流.那么先..说说我们的层级结构吧: 按最底层到高层排列 块级元素(block)层级1.背景颜色2.背景图层3.border边框4.普通内容层float浮动层inline-block/inline文本position 定位层级文档流的排列方式就是前面讲的inline/block/inline-block的特性在我们用word文档的时候,引入图片的时候会去选择 文字环绕图片的样式,去更好的节省空间并且更加美观.因此我们引入了浮动这一样式,为的就是节约浏览器的空间.但是,后面慢慢的发现了 浮动样式的布局比display:inline-block更加方面, 因为inline-blcok的解析空格和基线对齐是很头疼的,写一些小demo案例可能不会有那么大的感觉,但是写一些稍微多的会发现div的嵌套也是很头疼的.浮动.好用是好用但是也会造成一些问题.因为设置浮动的元素会半脱离文档流. 半脱离文档流为什么说是版脱离文档流呢?我们前面说到了层级结构,元素浮动起来后,我们可以理解为漂浮到了普通内容层,为什么这么说呢? 我们设置浮动之后,文字会识别到到浮动元素,因此会造成前面元素浮动起来后 后面元素会跑到前面元素下面去但是文字还留在原来的位置上. 块元素是感受不到浮动层的元素,但是inline/inline-block是可以感受到浮动层的,也就造成了上面的现象. 浮动___块级划浮动会将元素转化为块级元素,但却不具有独占一行和父元素宽度100%的特性.而是像inline-block一样由里面的内容撑开.意思就是: 给span标签设置浮动之后, 你就可以给span便签设置宽高和上下margin padding. 浮动---带来的问题浮动是好用,但是同时也带来了些问题就如前面说的,块元素是感受不到浮动元素的.因此 如果父元素是block属性的话,那么就会造成高度塌陷. 高度塌陷就是原本高度由子元素撑开的父元素, 这时候撑开他的子元素飘了, 那么就没人去撑开父元素的高度了,父元素的高度发生了改变,这个现象就叫高度塌陷. 怎么解决浮动带来的问题呢?1.父元素设置固定的宽高浮动元素会造成高度塌陷,是因为元素浮动之后没有内容去撑开父元素的自适应高度.那么这时候如果我们给父元素设置一个固定高度,就不会有高度塌陷这么个现象了. 2.引发bfc(border format context)引发bfc的方法有很多,具体使用是看哪种方法对页面造成的影响最小.都是给父元素设置值 display:inline-block 等可以理解为触发了bfc.同时还可以这么理解,前面所说的行内元素和行内块元素是可以感受到浮动元素的, 那么父元素设置为行内块元素也同样能够感受到浮动的子元素的高度, 那么就不会造成高度塌陷同样的可以设置成:table-cell、tabble-caption 设置overflow值只要overflow值不为默认的visible就能够出发bdc,比如scroll, auto.通常比较习惯使用overflow:hidden,但也会造成一些内容被隐藏的问题. 设置float值子元素悬浮了,那么就把父元素也飘起来那么就在一个平面上了,这时候就可以感受到子元素的高度了. 因此设置父元素的float值不为none就好了. 设置position值既然float半脱离了文档流, 这时候父元素全脱离文档流的话层级更高,因此也就能够感受到底层级的高度了. (别慌,马上就介绍position定位).这里要注意的是:position:static, position:relative 是不脱离文档流的,因此要设置成position:absolute,position:fixed,position:sticky(sticky 要注意兼容性写法, 很多版本还不适用,可以去can i use上查找). 清除浮动clear:both清除浮动本质上就是换行,为什么这么说呢?当给元素设置一个清楚浮动后,这个元素会去感受前面浮动元素的高度大小,然后自适应的调整了下自己的位置. 为什么margin-top 有时候会失效?有些人可能会发现margin-top有时候会失效.其实这不是失效,是找不到看齐的对象.在试验的时候, 可能会发现有时候不管怎么设置上margin值,这个元素都是不动如山.比如下面这个情况,有兴趣的同学可以自己动手调试代码,代码如下, .a{ width: 100px; height: 100px; background-color: yellow; border: 1px solid black; } .b{ width: 500px; height: 500px; background-color: lightblue; /* border: 1px solid ; */ /* padding-top: 10px; */ /* overflow: hidden; */ /* display: inline-block; */ } .c{ width: 100px; height: 100px; background-color: orange; float:left; /* margin-top:100px; */ } .d{ width: 100px; height: 100px; background-color: green; clear:left; margin-top:400px; } /* .e{ width: 100px; height: 100px; } */<div class="a"> </div> <div class="b"> <!-- <div class="e"></div> --> <div class="c"></div> <div class="d"></div> </div>绿色的div块元素已经设置的margin-top:400px但是为什么毫无反应.悄悄地说其实我刚开始的时候也很懵逼,然后就各种试,结果就发现了.因为橘色元素的浮动,并且这个橘色元素的外边距和父元素合并了.导致绿色元素找不到边 去算自己的margin-top.1.那么解决父子外边距合并问题,大家都知道可以设置padding,margin,overflow:hidden 或者设置border就好了. 设置之后绿色元素就会忽略浮动元素去调自己的margin值. 同时还要注意的是, 由于clear:left的使用,这时候的margin值只能比clear:left的默认值大,也就是比浮动元素的高度值大.2.如果橘色浮动元素上面有另外一个元素且不浮动的话(就叫element-1吧)的话,那么这时候绿的方块的margin-top值就是跟着element-1 的底部去调整自己的位置. ...

首先想要实现3D的效果。那么需要设置一个属性ttranform3d： 第一个旋转：当设置了transform-style: preserve-3D的时候，代表此时应用的3d场景了。当设置使用transform-style: flat的时候，使用的是2d的转换效果。所以，当给X设置旋转45度的时候感觉元素有点轻微的向后，宽度不变。但是高度会变低 当设置Y旋转45的时候，想象一个东西被倾斜了，会被拉长 当Z设置了45度的时候，很像2d旋转的模样 当三个都设置了45度的时候。 对于3d的效果，感觉自己的想象力还是有一些不足。不太好形容。有人说，首先需要确认坐标轴。利用左手法则。但是对于我，好像并没有理解啥。然后我想到了一个不太好的方式。自己去找一个盒子。摆出了左右法则。当rotateX的时候，就围绕着自己的大拇指绕一圈当rotateY的时候，就围绕着自己的食指指绕一圈当rotateZ的时候，就围绕着自己的中指指绕一圈并且因为我们还没有用到渲染的3d的透视属性。所以上面的那些图画根据自己的实验结果，就瞬间知道了，渲染的3D设计. 2、perspective设置3D元素的可视效果范围。目前不知道咋用，官网说需要与transform-origin一起使用transform-orgin：一个是X轴的初始值，一个是Y轴的初始值。默认都是50% background-visibility设置背面元素是否可见的。拥有两个属性值：visible可见 hiddle不可见 当然对于3d的也还是 tanslateZ轴，当设置Z轴的时候。就相当于，把一个元素，往后推移了多少的px scaleZ设置Z轴的缩放倍数

前言前两天在浏览 苹果 16寸 营销页面 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。 文章主要讲交互效果，所以文中会有很多 gif 图，大家最好连上无线再看，示例代码链接我放在了文章底部，有需要自取。  两个效果翻盖效果一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条滚动。 缩放图片开始时是一张全屏的图片，在滚动过程中慢慢变成另一张图片，接着这张图片以屏幕正中间为基准点慢慢缩小，在缩小的过程中，这张图是定在屏幕中央的，缩小到一定值的时候，图片随着滚动条滚动。   前置知识再动手写代码之前，我们需要了解几个在接下来代码中要用到的知识点。 粘性定位 sticky可以简单的认为是 相对定位 relative 和 固定定位 fixed 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。 sticky 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量。 一个例子 如下代码，html 结构如下： <body> <h1>我是 sticky 的第一个 demo</h1> <nav> <h3>导航A</h3> <h3>导航B</h3> <h3>导航C</h3> </nav> <article> <p>...</p> <p>...</p> // ... </article></body> 样式如下： nav { display: table; width: 100%; position: sticky; top: 0;}在代码中 nav 元素会根据 body 进行粘性定位，在 viewport 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位，也就是说他会随着文档滚动。之后，元素将固定在与顶部距离 0px 的位置。 ...

1) 字体规则(可以被继承) font-family 'Microsoft YaHei',宋体 font-style: font-weight: font-size: line-height: font:bold normal 14px/1.5em '微软雅黑' em 相对单位，相对于当前元素的字体大小 <div style="font-size:14px;line-height:2em"> hello world </div> rem 相对单位，相对于body中声明的字体大小 body{ font-size:10px } <div style="font-size:14px;line-height:2rem"> hello world </div> https://developer.mozilla.org/zh-CN/docs/Web/CSS/font2) 网络字体（字体图标库）iconfont（阿里的图标库） 图片（设计师设计icon图标）图标--特殊的字体 （写的字跟画画一样）3) 文本相关规则（可以被继承） text-decoration 字体装饰 none 不加任何字体装饰 underline 下划线 line-through 删除线 overline 上划线color 关键字 lightblue blue red 十六进制 #000000 #ffffff #ff0000 #32b593（山西大学校徽绿） rgb rgb(r,g,b) 0~255 rgb(255,0,0) rgba rgba(r,g,b,a) 0~255 rgb(255,0,0,0.5) text-align 容器中的字体的排列方式 text-transform 转换英文的大小写 uppercase lowercase text-indent 字体的缩进4) 列表相关（ul,ol） ...

更多精彩，请点击上方蓝字关注我们！ 5月11日，内蒙古中部、华北大部先后出现了大风沙尘天气，11日午后，北京的天空呈现浅棕色，呼吸中夹着泥土的气息，傍晚时分，沙尘更是混合着雨滴降落在北京，北京市民都惊呼下“泥雨”了。15日，京津冀及周边地区再次受到来自蒙古国沙尘侵袭，频频的沙尘侵扰使大气环境急剧恶化。 对于这次沙尘天气过程，亚洲沙尘暴预报区域专业气象中心早在9日便开始发布沙尘预警提示，引起了远在西班牙的巴塞罗那沙尘暴区域预报中心的关注，并对此进行了报道。 沙尘暴区域专业中心是什么组织？  每年到沙尘天气高发季节，沙尘天气都会给人们健康和财产安全带来巨大威胁。世界气象组织（WMO）亚洲沙尘暴预报区域专业气象中心（北京）（Regional Specialized Meteorological Centre for Atmospheric Sandstorm and Duststorm Forecasts Beijing ,RSMC-ASDF Beijing）应运而生。目前，西班牙巴塞罗那和中国北京是世界气象组织框架下，全球仅有的两个沙尘暴专业业务中心。     亚洲沙尘暴预报区域专业气象中心旨在为提高亚洲受沙尘影响地区或国家的预报预警及防灾减灾能力，积极落实国家“一带一路”倡议，积极推进亚洲各国沙尘监测、预报及预警产品的共享。具体职责包括为亚洲各成员单位提供沙尘天气监测实况和预报产品、编制年度工作报告，参与天气委员会会议，建立数据共享FTP,在国际平台展示国内沙尘天气科研业务成就等。（亚洲沙尘暴预报区域专业气象中心网址http://www.asdf-bj.net/） 沙尘预报技术支撑 近年来，我国在沙尘暴的理化特性、源区位置、释放总量、输送与沉降路径和形式、沉降后的变化，以及气候变化对沙尘的反馈作用等方面取得重要进展： ▼自主研发了亚洲沙尘暴数值预报系统(CUACE/Dust)，成为最早实现沙尘暴数值预报业务化运行的国家之一； ▼开发了基于最优化的沙尘多模式集成产品，大幅提高了沙尘预报的预报精准性； ▼自主研发了基于FY2/FY4系列卫星的沙尘暴分布及强度的卫星定量遥感技术及业务系统，从而使我国有能力利用静止气象卫星动态监测分析亚洲沙尘暴的结构与演变特征； ▼开发了基于源示踪技术的沙尘溯源系统以及基于GIS的三维沙尘显示系统，可跟踪沙尘粒子，追踪沙尘的主要源地。 最优化多模式集成沙尘预报 （利用最优集成方法，可充分集成各模式优点，有效降低预报误差） 2019年北京5月一次沙尘过程溯源 《2019环境气象公报》发布  助力蓝天保卫战  中国气象局上个月刚刚发布的《2019环境气象公报》显示，2019 年共出现15次沙尘天气过程，这个数据较近五年平均次数（11.6次）偏多。但从2000年至2019年的近二十年变化来看，我国沙尘天气过程次数整体趋势是降低的。 2000年至2019年沙尘天气过程次数 2020年，世界气象组织倡导传统气象向地球系统科学迈进，提倡从科研到服务以及业务的目标，提出了全球空气质量预报与信息系统计划——GAFIS(GlobalAir Quality Forecasting and Information System)。该计划旨在以全球协调和标准化的方式提供科学的空气质量预测和信息服务，并带动全球大气观测计划的监测和观测活动。亚洲沙尘暴预报区域专业气象中心将响应WMO的倡议，积极推进和落实基于大气成分观测的包含沙尘预报预警在内的空气质量预报体系建设，更好的为防灾减灾及打赢蓝天保卫战提供科技支撑。 更多环境气象预报产品 请参阅中央气象台官方网站： http://www.nmc.cn/publish/sev...  往期精选  ·END· 中央气象台科技创新服务 创新·绿色·共享 微信号:kjcx_nmc 我就知道你“在看”

一看就会,一做就废最近刚开始学网页前端(Web Front End), 好多人可能都有这种感觉,一看就会,一做就废.那是什么原因呢??每次帮别人解答其实也会有很多收获的,不会的就得多问. 那么问也是有技巧的, 你上来直接问这块代码该怎么写????(execuse me??)别人给你打出来,然后你复制粘贴. 那最后你学到了什么?更加熟练的用ctrl+c, ctrl+v吗?这也是为什么有些人明明是同样的老师下一起学,但是学的效果完全不一样.刚开始学习的时候,最好是每次敲打码前搞清楚自己要做什么怎么做,并且每个标签的用法和特性...别一股脑敲出来然后开始找错,或者代码什么的还不理解,连错哪了都找不出来.学前端也有两周了,今天就跑去敲了敲京东首页的代码,果然之前以为我理解了position,float的用法.一写就全是问题,各种后面的块元素把前面的挡住了什么什么的问题...果然等我把这些问题解决好了然后把排版什么的弄好了,发现对这些东西更熟悉了. 也是由于前面的内容学的比较扎实,后面的知识目前只是大概的过一遍还没认真的搞懂每个标签的含义... 所以敲代码的时候就会出现各种问题..那么刚开始学习的同学们,是不是也有遇到基础的错误老是不知道什么原因造成,或者没有尝试先自己解决就开始问了?学习嘛,既然决定了要学就学精一点..不要说 css html简单大概过一下然后注重学习js什么的鬼话...你基础不打牢固点,后面的学习也是越来越吃力.基础打牢点的话 后面也会越学越轻松. 而且工作方便都比较偏向于解决问题的能力,不然写出来的代码一堆问题,跟你一块写的那不得拿刀砍你...

好吧，这几天忙公司的项目有点搁置了。对于css的中两个地方还是不熟悉。第一个，关于2D转换中的旋转第二个，关于2D转换中的倾斜 1、首先旋转的效果图：在上面，我是将旋转的角度设置为30°，它会沿着X轴的方向，去旋转一定的距离。这个效果图是，旋转了180°，会发现它被反转了位置。 因为在2D的事件中，旋转没有出现按照Y轴旋转的东西，所以我目前自己理解都是按照X轴进行旋转的。所写的代码如下。 <style> *{padding: 0;margin: 0} .warp1{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .warp2{ width: 800px; height: 800px; border: 1px solid; flex-direction: column; display: flex; align-items: center; justify-content: center; } .warp3{ width: 300px; height: 300px; background-color: lightpink; transition: all 2s; /*transform-origin: center;*/ } .warp3:hover{ transform: rotate(180deg); /*可以自己更改数值 */ } .warp4{ height: 6px; background: coral; width: 100%; }</style><body class="warp1"> <div class="warp2"> <div class="warp3">我是会发生变化的部分</div> <div class="warp4"></div> </div></body>2、关于skew()。倾斜一开我甚至以为，倾斜与旋转的差不多的，样子甚至没多大的区别。然后果断的被打脸。 上面是X方向倾斜30deg，Y轴的方向为0deg。我们看到是，容器没有超过线条。 ...