元素溢出 overflow
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
CSS内边距
padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px; padding-top： 检索或设置对象顶边的内部边距 padding-right： 检索或设置对象右边的内部边距 padding-bottom：检索或设置对象下边的内部边距 padding-left： 检索或设置对象左边的内部边距
CSS外边距
margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto; margin-top： 检索或设置对象顶边的外延边距 margin-right： 检索或设置对象右边的外延边距 margin-bottom： 检索或设置对象下边的外延边距 margin-left： 检索或设置对象左边的外延边距 设置元素水平居中： margin:x auto 注意,margin 外边距 在垂直方向会合并,水平方向不会合并
盒子
设置边距
border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red;
设置内间距padding
padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */ 上面的设置可以简写如下： padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左 四个方向的内边距值。 */ padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */
★margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: ''; display:table; }
块元素,内联元素,内联块元素
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
浮点
float:left 左浮动
float:right 右浮动
★清除浮动
方法1： .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;} 浮动的父级添加： <div class="con2 clearfix"> 方法2： 父级上增加属性overflow：hidden .con2{... overflow:hidden}
★定位
relative：相对定位,不脱离文档流,相对于自己本身的位置进行定位, absolute：绝对定位,脱离文档流,位置相对于已定位的父级, 如果没有父级,或父级没有定位,那么相对于文档的00点 (body) 可以通过 z-index 属性定义层叠(先后),参数值越大,越先 在style里面定义 .z1{z-index:1;background:#000;} fixed：固定定位,脱离文档流,位置相对于浏览器窗口 进行定义
javascrip
1, 在html页面中任意位置 书写 script标签,在标签内写js代码 2. 在元素 (标签) 内书写事件属性 来触发js代码的执行 3, 注意 ,在 包含src属性的script标签内不能在书写js代码 js 是运行在浏览器端的脚本语言,属于解释性语言.
锦定义变量时，用var关键字，不然严格模式会报错。 console。log(a) 在控制台打印值 alert() 弹框内容 typeof()函数 检测当前变量的数据类型 例 console.log(a,typeof(a))
使用场景
1, 注意 ,在 包含src属性的script标签内不能在书写js代码 <script type="text/javascript" src="./1.js"></script> 2. 在元素 (标签) 内书写事件属性 来触发js代码的执行 --> <div onclick="alert('点我干啥?')" style="width: 200px;height: 200px;background: #369;"></div> <a href="javascript:alert('点你咋滴')">点一下试试</a> <a href="javascript:void(0)" onclick="alert('试试就试试')">再点一下试试</a> !! void(0) 下面提示不显示值 3在html页面中任意位置 书写 script标签,在标签内写js代码 --> <script type="text/javascript"> // alert('哎呦,不错哦'); </script>
1、行间事件（主要用于事件） <input type="button" name="" onclick="alert('ok！');"> 2、页面script标签嵌入 <script type="text/javascript"> var a = '你好！'; alert(a); </script> 3、外部引入 <script type="text/javascript" src="js/index.js"></script> javascript语句与注释 1、一条javascript语句应该以“;”结尾 <script type="text/javascript"> var a = 123; var b = 'str'; function fn(){ alert(a); }; fn(); </script> 2、javascript注释 <script type="text/javascript"> // 单行注释 var a = 123; /* 多行注释 1、... 2、... */ var b = 'str'; </script>
常用方法
console.log(a) 在控制台进行输出 alert(a) 弹出一个窗口 document.write(a) 向文档中输出一个文档流 如果遇到有-的单词，去掉-，后面的首字母大写，比如 fontSize. document.write(a) 在页面进行输出。 标签对象.innerHTML="内容"；//在标签对象内放置指定内容 onclick 单击事件 onsubmit 提交事件 docunment.getElementsByTagName 获取元素(比如 input,div)里的状态 document.getElementById 获取id所属的状态 for (var i in window){ document.write(i+'======'+window[i]+'<br>') }; 查看js的所有属性和方法，window是浏览器最大的对象。 var res = rr.constructor; console.log(res); 查看当前对象的构造函数（当前这个对象和函数的上一层）
数据类型转换
typeof函数获取一个变量的类型： * boolean - 如果变量是 Boolean 类型的 * number - 如果变量是 Number 类型的 (整数、浮点数) * string - 如果变量是 String 类型的 （采用""、 ''） * object - 如果变量是一种引用类型或 Null 类型的 如：new Array()/ new String()... * function -- 函数类型 * undefined - 如果变量是 Undefined 类型的 数值类型 Number NaN 任何值与NaN进行比较,都是false,除了!= 检测一个变量是否为NaN,只能使用isNaN() 字串类型 string var = 'a' 对象类型 object var a =new Object() 数组类型 (表现类型为对象0bject) var a = new Array() （数组） var a = [1,2,3,4] 空（表现类型也为对象） var a = null 未定义 undefined var a (直接定义不给值)
使用：Number（）、parseInt() 和parseFloat（） 做类型转换 Number()强转一个数值(包含整数和浮点数)。 整形和浮点型都可以，如果是纯数字，转数字，包含非数字时，转 NaN，可以转布尔 *parseInt()强转整数， 只能转整型 如果字符转中首字母是非数字，转为NaN *parseFloat（）强转浮点数 （最好用） 整形和浮点都可以，如果字符串中首字母是非数字，转为NaN 函数isNaN()检测参数是否不是一个数字。 isNaN() is not a number ECMAScript 中可用的 3 种强制类型转换如下： Boolean(value) - 把给定的值转换成 Boolean 型； 为假的情况： !!! false,0,NaN,null,undefined,0.0,‘’。 Number(value) - 把给定的值转换成数字（可以是整数或浮点数）； String(value) - 把给定的值转换成字符串；
运算符
++ 自加1 --自减 + 后面是字符串进行连接，数字则进行相加 （必须注意优先级，如果前面为字符串连接，后面也都为连接）
算 字 赋 比 逻 位 它 算术运算符 + - * / ++ -- 字符串连接 + 赋值运算 = += -= %= 比较运算符 < > >= <= == === != !== === 值和类型都要相同 == 值相同 逻辑运算符 && （与） ||（或） ! 位运算 ^ & | << >> 其它运算符 ? : 三元运算符 delete：用于删除对象中属性的 如：delete o.name; //删除o对象中的name属性 void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。 var iNum1=1, iNum2=2, iNum3=3;// 逗号运算符 用逗号运算符可以在
流程控制
if 判断值一样就可以 ### else if中间必须有空格 if(判断){ 执行 }else if{ 执行 }else{ 执行 }
switch 的判断 === 值和类型都一样 var a = 6; swith(a){ case 1: case 2: case 2: case 4: case 5: alert{'工作日'}; break; case 6: case 7: alert{'休息日'}； break; !!!!（如果这个祛除，default也会默认出现。） default: alert{'火星人你好'}； break; }
循环
for循环 for(var i=0;i<len;i++){ ...... } while循环 var i=0; while(i<8){ ...... i++; } for-in 语句 for-in 语句是严格的迭代语句，用于枚举对象的属性。 var a = [10,20,30,40,50]; //迭代的是数组的下标。 for(i in a){ document.write(a[i]); } //输出： 1020304050 ！！！简短写法 for(car i =1;i<=10,i++){ if(i == 7){ continue; } if(i == 8){ break; } }
元素获取
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如： <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div id="div1">这是一个div元素</div> 上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种： 第一种方法：将javascript放到页面最下边 .... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> </body> 第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。 <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div> 样式操作 标签对象.style.css属性名="值" //改变标签对象的样式。 示例：id.style.color="red"; 注意：属性名相当于变量名,所以css属性名中含有双拼词的(font-size)的减号要去掉，将后面的首字母大写。fontSize 文本操作 标签对象.innerHTML="内容"；//在标签对象内放置指定内容 表单中值的操作 标签对象.value； //获取标签对象的value值 标签对象.value=”值“；//设置标签对象的value值
定时器
单次定时 setTimeout(要执行的代码，时间) 时间以毫秒算 clearTimeout 关闭只执行一次的定时器
多次计时 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 ！！一般都是用单次是来结束多次计时
做一个小动画图片流畅切换 <img src="./img/p1.png" alt="" id="tp"> <script type="text/javascript"> var tp = document.getElementById('tp'); var i = 1; setInterval(function(){ i++; if(i > 5){ i = 1; } tp.src = './img/p'+i+'.png'; },50) </script>
三种写法 1 var init = setTimeout(function(){ alert('2'); },2000); function love(){ console.log('22'); } 2 setTimeout('love()',2000); 3 setTimeout(love,2000);
函数
*第一种是使用function语句定义函数 function abc(){ alert('abc'); } *第二种是在表达式中定义函数 var 函数名 = function(参数1，参数2，…\){ alert('abc')； }; ！！！在使用函数时,如果没有传递参数,形参的默认值就是undefined 第三种是使用Function()构造函数来定义函数（不常用） var 函数名 = new Function\(“参数1”，”参数2”，”参数3”……”函数体”\); 如： var 函数名 = new Function\(”x”,”y”,”var z=x+y;return z;”\); arguments 对象 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。 例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0， 第二个参数位于位置 1，依此类推）。 关于变量和参数问题： 函数外面定义的变量是全局变量，函数内可以直接使用。 在函数内部没有使用var定义的=变量则为全局变量， *在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。 js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持）
优先级
如果有变量和函数通用一个变量名，函数会在执行时，优先加载。 函数会在执行时,优先加载,如果在代码中还有变量的定义和函数名一样,那么变量会覆盖函数 ！！！注意,函数名和变量名千万不要冲突 // var love = 222; function love(){ alert('111'); } love(); // alert(love); (打印出来时一个函数)
