2015.9.18笔记
2015-09-18 16:21
435 查看
1. 删除给定数组中的第二项和第三项,并且在得到的新的数组中第二项后面添加一个新的值
2. splice详解
3. 写一个求和的函数sum,达到下面的效果
补充:
parseFloat()之后null和string都为NaN;NaN || 0 为0。
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, true返回a, false返回b
转换规则:
对象为true
非零数字为true
非空字符串为true
其他为false
**4. **Flex布局
首先给出一个使用flex实现水平垂直居中的方法
.box{
display:flex;
justify-content:center;
align-items:center;
}
是不是很酷!!!!
以下内容参考阮一峰flex布局教程
任何一个容器都可以指定为flex布局
![](https://img-blog.csdn.net/20150918215622734)
flex container的6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
nowrap:不换行
wrap:换行,第一行在上面
wrap-reverse:换行,第一行在下面
flex-flow为flex-direction加flex-wrap的简写形式
对齐方式与轴的方向有关,下图为main axis从左到右
![](https://img-blog.csdn.net/20150918221512500)
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
对齐方式与轴的方向有关,下图为cross axis从上到下
![](https://img-blog.csdn.net/20150918222348750)
![](https://img-blog.csdn.net/20150918223253512)
flex item也有6个属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
![](https://img-blog.csdn.net/20150918223855088)
![](https://img-blog.csdn.net/20150918223944314)
![](https://img-blog.csdn.net/20150918224211701)
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
var arr1 = ['a','b','c','d','e']; var arr2 = arr1. ?( ? , ? ,'newvalue');
2. splice详解
3. 写一个求和的函数sum,达到下面的效果
// Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Should equal 10 sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1); // Should equal 0.3, not 0.30000000000000004 sum(0.1, 0.2);
function sum(){ var result = 0; var arg = arguments.length; foreach(var i = 0;i < arg;i++){ result += window.parseFloat(arguments[i]) || 0; } return result.toFixed(3) * 1000 / 1000; }
补充:
parseFloat()之后null和string都为NaN;NaN || 0 为0。
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, true返回a, false返回b
转换规则:
对象为true
非零数字为true
非空字符串为true
其他为false
**4. **Flex布局
首先给出一个使用flex实现水平垂直居中的方法
.box{
display:flex;
justify-content:center;
align-items:center;
}
是不是很酷!!!!
以下内容参考阮一峰flex布局教程
任何一个容器都可以指定为flex布局
.box{ display:-前缀-flex; display:flex }
flex container的6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction有四个值
.box { flex-direction: row | row-reverse | column | column-reverse; } //row为默认值
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap有三个值
.box{ flex-wrap: nowrap | wrap | wrap-reverse; } //nowrap为默认值
nowrap:不换行
wrap:换行,第一行在上面
wrap-reverse:换行,第一行在下面
flex-flow为flex-direction加flex-wrap的简写形式
.box { flex-flow: <flex-direction> || <flex-wrap>; } //row nowrap为默认值
justify-content定义了项目在主轴上的对齐方式
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } //flex-start为默认值
对齐方式与轴的方向有关,下图为main axis从左到右
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items定义了在交叉轴上的对齐方式
.box { align-items: flex-start | flex-end | center | baseline | stretch; } //注意这里:stretch为默认值
对齐方式与轴的方向有关,下图为cross axis从上到下
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } //stretch为默认值
flex item也有6个属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item { order: <integer>; }
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item { flex-grow: <number>; /* default 0 */ }
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */ }
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
相关文章推荐
- Hadoop单节点环境搭建
- Cocos2d-JS 创建node节点示例
- The resource could not be loaded because the App Transport Security policy requires the use of a sec
- CodeForces 13A - Numbers
- socket select函数的详细讲解
- HDOJ 4857 逃生(拓扑排序(邻接表+反向建图,逆序输出+优先队列))
- 倒排索引
- VB.NET与C# 语法show差异
- SSH深度历险记(八) 剖析SSH核心原则+Spring依赖注入的三种方式
- Head First Python学习笔记1
- testng dataprovider 的几种用法以及Java中的二维数组
- 小结(jquery,ui,flexgrid,数据库资源)
- socket 的select函数例子
- python多线程编程:生成者和消费者
- android系统平台显示驱动开发简要:LCD驱动调试篇『四』
- Cocos2d-js v3.1 事件分发机制
- 经常用到的代码段
- 算法之每日一题:找出无序数组中第k大的数字
- opengl函数功能详解
- java生成范围内的纯数字随机数