破壳而出的蝌蚪

摘要： align-content 和 align-items ： 1：共同点：它们对齐方向为交叉轴 2：不同点：align-content 应用于为 多行 而 align-items:应用于单行。 单行对齐例子： 多行对齐例子 阅读全文

摘要： 基本思路 圣杯布局分为3段：上、中、下。 中段被分为：左、中、右3块。 1：采用flex布局时，先把弹性容器主轴设置为垂直方向（flex-direction:column） 2：上、中、下3块弹性项目设置均匀拉伸（flex:1）或固定上、下两端大小，让中间自动拉伸。注意：flex:拉伸是方向为主轴方 阅读全文

摘要： 1：创建一个弹性容器(display:flex) 2：构建2个或3个弹性项目. 3：把弹性项目设置为居中对齐.(align-items:center) 4：改变input自身对齐方式，把它设置为拉伸以适应容器（align-self:stretch）。 实例： 阅读全文

摘要： flex：auto 将增长值与收缩值设置为1，基本大小为 auto 。 flex：none. 将增长值与收缩值设置为0，基本大小为 auto 。也就是固定大小。 增长： 基本大小 + 额外空间 *（增长系数 / 增长系数总和） 按比例划分额外空间，然后各自分配。 缩小： 基本大小 – 溢出大小 *（ 阅读全文

摘要： flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。 主轴 justify-content justify-content对齐方式共有5种对齐方式： flex-start ：主轴起点边缘开始，从左向右。 flex-end ：主轴终点边缘开始，从右向 阅读全文

摘要： flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式。flex-direction共有4种模式：从左向右、从右向左、从上往下、从下往上。 主轴 主轴的起点与终点定义了容器元素的开始和结束边缘。 交叉轴 交叉轴的起点与终点定义了容器的顶部与底部。 从左向右：flex- 阅读全文

摘要： 基本思路 红色：为可见区域 黑色方框：元素，不可见。 通过绝对定位方式，把黑色方框，移动到红色可见区别，来实现图片切换。 实例 创建幻灯实例对象 源码：https://pan.baidu.com/s/1-A0GkZ2hOpuVJ5dg1y6mnQ 样本：http://js.zhuamimi.cn/% 阅读全文

摘要： 策略模式 简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标. 所以至少有2个对象 . 一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执行方案. 策略模式的优点: 1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择 阅读全文

摘要： 元素大小缩放是一套连贯事件，按下鼠标不放，拖动鼠标 然后松开。 按下鼠标事件 当按下鼠标时，记录元素大小、鼠标按下的位置、状态位。 拖动鼠标事件 当鼠标拖动时，计算元素调用后的大小。 元素调整后大小 = 初始元素大小 + （鼠标移动位置 - 鼠标按下位置） 鼠标松开事件 当调整完成后，鼠标松开这时重 阅读全文

摘要： iterator作用 为所有的数据结构提供统一的访问方式。 接口对象 接口对象一共有3个方法，next()方法、return()方法、throw()方法。 next() 必填 用于for..of迭代。 该方法返回一个对象{value,done}。 value：元素值，done：状态位，用于指定循环是 阅读全文