Vanessa

2019-07-11 描述对父元素中的子元素进行平均分配。HTML<divclass="evenly-distributed-children"><p>Item1</p><p>Item2</p><p>Item3</p></div>CSS.evenly-distributed-children{display:flex;justify-content:space-between;}DemoSeetheP

2019-07-10 描述使用 display:table 在父元素中水平且垂直居中一个子元素（flexbox 的一个替代方案）。HTML<divclass="container"><divclass="center"><span>Centeredcontent</span></div></div>CSS.container{border:1pxsolid#333;height:250px;width:25

2019-07-09 描述一个元素的宽度是变化的，在自适应中我们需要保证他的高度和宽度一致（例如：他的宽高比率为一个常数）。HTML<divclass="constant-width-to-height-ratio"></div>CSS.constant-width-to-height-ratio{background:#333;width:50%;}.constant-width-to-height

2019-07-08 描述确保一个元素能够对他的子元素进行浮动的自我清除。注意：如果你还在使用浮动来构建你的布局，这是唯一有用的。请考虑使用现在流行的 flex 盒子布局或栏栅布局。HTML<divclass="clearfix"><divclass="floated">floata</div><divclass="floated">floatb</div><divclass="floated">floa

2019-07-07 描述重置盒子模型，使 width 和 height 不会被他们的 border 或 padding 所影响。HTML<divclass="box">border-box</div><divclass="boxcontent-box">content-box</div>CSShtml{box-sizing:border-box;}*,*::before,*::after{box-sizing:in

2019-07-06 描述创建一个弹跳的加载动画。HTML<divclass="bouncing-loader"><div></div><div></div><div></div></div>CSS@keyframesbouncing-loader{to{opacity:0.1;transform:translate3d(0,-1rem,0);}}.bouncing-loader{display:fl

精选常见交互，帮助您拥有简洁酷炫的站点布局清除浮动重置 box-sizing 宽高保持一致 table 居中显示平均分配子元素盒子模型居中垂直小技巧网格居中最后一个元素占满剩余可用高度使用 transform 进行居中多行文本截断文本截断视觉圆自定义滚动条自定义文本选中样式渐变阴影文本风化效果图片适配全屏文本渐变细而明显的边框:not 选择器逃离屏幕对溢出的内容进行渐变漂亮的下划线重置所有样式带形状的分割线系统字

2019-07-05 描述创建一个数组，其元素应按照原始数组中的位置进行分组。具体如何分组、是否应该被合并应以提供的函数的返回值作为最终值。提示检测提供的最后一个参数是否为函数使用 Math.max()获取参数中最长数组的长度创建一个长度为第二步结果的数组作为返回值使用带有迭代功能的 Array.from()对被分组的元素创建一个数组如果参数中的数组长度不一样时，请使用 undefined 替代找不到的值对元

2019-07-04 描述给出一个包含有效属性标示的数组和一个包含值的数组，返回属性和值组合的对象。提示由于一个对象可以有 undefined 值，但是不能有 undefined 键对包含属性的数组使用 Array.prototype.reduce()来确定最终对象的结构代码 constzipObject=(props,values)=>props.reduce((obj,prop,index)=>((obj[p

2019-07-03 描述基于原始数组中的位置进行分类，然后使用这些元素创建一个数组。提示使用 Math.max.apply()获取传入的参数中最长的数组长度创建一个长度为第一步结果的数组并返回第三步中的结果使用带有迭代功能的 Array.from()将被分组的元素放到一个数组中如果参数中的数组长度不同，找不到对应位置上的值时，请使用 undefined 进行替代代码 constzip=(...arrays)=

2019-07-02 描述使用提供的两个数组进行组合后产生一个新的数组。提示使用 Array.prototype.reduce()，Array.prototype.map()和 Array.prototype.concat()从两个数组中获取每一种可能的配对存储配对结果代码 constxProd=(a,b)=>a.reduce((acc,x)=>acc.concat(b.map(y=>[x,y])),[])

2019-07-01 描述对数组中的元素进行过滤，找出那些特殊的值。提示使用 Array.prototype.filter()创建一个数组使用!Array.includes()获数组中不存在的给定值如果需要改变原始数组可参见 pull 代码 constwithout=(arr,...args)=>arr.filter(v=>!args.includes(v));示例找出数组中不存在的值：without([2,

2019-06-30 描述创建一个由一系列元素组成的数组，通过 zip 和提供的函数来分解原始数组中的元素。提示使用 Math.max.apply()获取数组中最长的子数组长度使用 Array.prototype.map()为每一个元素创建一个数组使用 Array.prototype.reduce()和 Array.prototype.forEach()来对数组中的元素进行元素的重新分组使用 Array.proto