css学习记录+js

学习css一段时间时间了，总感觉用到哪忘到哪，so，记录一下印象深刻一些。如果哪里记录的不对，请大神们不吝赐教，感激不尽。

1.css相对布局和绝对布局

当width:50%;  相对布局，缩放浏览器，宽度随着浏览器变化而变化

当width:50px；绝对宽度，缩放浏览器，大小位置不变

2.css动态超链接

a：link   超链接

a：visited  已被访问过的连接设置样式用

a:hover  鼠标经过时 

3.ul项目符号设置

ul{list-style-type:none}   不显示项目符号

ul{list-style-type:circle}      效果：空心圆你
ul{list-style-type:square}   实心正方形

ul{list-style-image: url("/images/list-orange.png")}   效果：li前面显示图片

4.ol项目符号设置
ol{list-style-type:upper-roman}       显示效果为: I.    II.   III.
ol {list-style-type:lower-alpha}   显示效果为：a.   b.   c.

5.border属性定义和用法

"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框

可以按顺序设置如下属性：

• border-bottom-width
• border-bottom-style
• border-bottom-color

如：

p {border-style:solid;        border-bottom-width:15px;   border-bottom-color:#ff0000;}

border-style可能的值

可能的值

值描述none定义无边框。hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。inherit规定应该从父元素继承边框样式。

6.float:left用法（很多地方效果不一样，待研究）

添加一个float:left的样式，结果是这个标签会浮动到段落的左侧

7.input调出文件选择框

代码：

<input type="file"/>

效果：

8.vuejs中定义json文件取值

{{$t('queryEmployee.num')}}

对象名.属性名

在JS中取值

this.$

9.数组学习

1）var connt = [1,,3];//数组有三个元素，中间的元素值为underfined

2）var undefs=[,,];//数组中有两个元素，都是undefined

3）添加数组元素

a = [];//定义一个空数组

a[0] = 'one';

a[1] = 'two';

或者使用push（）添加

a = []; // 空数组

a.push('one');//在末尾添加一个元素  a=['one']

a.push('two','three');//再添加两个元素，a=['one','two','three']

4)删除数组元素

例：

a = [1,2,3];

delete a[1]; // a在1的索引位置不再有元素

1 in a // => false 数组索引1并未在数组中定义

a.length // => 3; delete操作并不影响数组长度

5)遍历数组 ECMA Script5定义了新方法

例：

var data = [1,2,3,4,5];

var sumOfSquares = 0;//要得到数据的平方和

data.forEach(function(x){//把每个元素传递给此函数

sumOfSquares += x*x; //平方相加

})；

sumOfSquares // => 55； 1+4+9+16+25

6）join()方法

可以将数组中元素转化成字符串连在一起

用法：

var a = [1,2,3];

a.join(); // =>"1,2,3"

a.join(" "); //=>"1 2 3"

a.join(""); //=>"123"

var b = new Array(10);//长度为10的空数组

b.join('-'); //=>'---------';9个-组成的字符串

7）reverse()

Array.reverse()将数组中的元素颠倒排序

8）sort()

数组排序，并返回排序后的数组

9）concat()

创建并返回一个新数组

10）slice()

返回指定数组的一个片段或子数组.

例：

var a = [1,2,3,4,5];

a.slice(0,3); //返回[1,2,3]

a.slice(3); //返回[4,5]

a.slice(1,-1); //返回[2,3,4]

a.slice(-3,-2); //返回 [3]

11)splice()

在数组中插入或删除元素的通用方法

12)push()和pop()

13)unshift()和shift()

14)toString（）和toLocaleString()

15)map()

例：

var a = [1,2,3];

b = a.map(function(x){

return x*x;

});//b是[1,4,9]

10.chrome添加vue插件

首先浏览器需要翻墙，我这里用的 Lantern翻得墙。

在chrome右上角更多里面---更多工具---扩展程序---获取更多扩展程序---chrome网上应用店搜索vue,找到vue.js.devtools,点击添加至chrome,

重启浏览器，F12，在工具栏能看到Vue，说明成功

1.NAN  not a number
2.类型转换 
parseInt




3.NaN和NaN不相等   false
4;isNaN() //判断一个结果是否是非数字
5.alert(typeof a); 弹出a的类型  underfined
var a = document 
alert(typeof a)//object类型
var a = function(){}
alert(typeof a) //function类型
var a = 'aa'
alert(typeof a) //String 类型
alert(b) //underfined类型


var a = 0;   
alert(a) //false   非0字符串是true
//真 true 非0，非空字符串，非空对象
//假 false 数字零  空字符串，空对象或者null,underfined


6.隐式类型转换
var a=5;
var b='5';
alert(a==b) //先转换类型 然后比较  结果是true  隐式类型转换
alert(a===b) // 不转换类型，直接比  结果是false


var a = '12';
var b = '7'
alert(a-b)  //也是隐式类型转换，结果是5
alert(a+b) //字符串连接，结果是125
-  //在js里面只有减法一种含义
+  // 1.字符串连接符  2.加法


7.作用域
8.DOM document object model 文档  对象 模型  实际上就是 html  document
9.bom browser object model   浏览器  window


BCME  几乎没有兼容性问题
DOM  有一些操作不兼容
BOM   没有兼容问题（完全不兼容）


10.闭包
子函数可以使用父函数的局部变量
11.json循环
for in
var json = {a:1,b:2.c:3};
for(var i in arr){
alert(i+'---'+arr[json])   //第一次：a---1  二次：b---2 三次：c---3   
}


12.arguments 可变参（不定参）
13.数组
var a=[1,2,3,4,5,6]
a.length=3 //数组变成a[1,2,3] 


a.push()   //尾部添加
a.pop()   //尾部删除
a.shift  //从头部添加
a.unshift //从头部删除
a.splice(开始，长度，元素...)//插入
a.splice(2,3) //结果[1，2，6] 
a.splice(2,0,'a','b','c') //插入  结果是 [1，2，3，a,b,c,4,5,6]
a.splice(2,2,'a','b') //替换   删两个，替换两个 结果是[1，2，a,b,5,6]
a.json('-') //连接符  1-2-3-4-5-6


排序
a = ['zdd','ad','gc'] 
a.sort() // 结果  ad,gc,zdd


a=[12,,8,99,19,112]
a.sort(function(n1,n2){
if(n1 < n2) {
return -1;//只要是负数就可以
}else if (n1 〉 n2){
return 1;//只要是正数就可以
}else {
return 0;
}
})

-----------------------------------------------------------------------------

横向居中

margin: 0 auto;

-------------------------------------------------------------

纵向居中

height:20px;

line-height:20px;