0308 CSS&JS

1.input的text和button同时使用产生高度差，在不同浏览器表现不同，并受到字体大小和行高的影响，如何解决？

解决办法：

1.首先vertical-align:middle; 这样chrome中显示就正常了，不受字体大小影响，但safari中还是有高度差；

2.设定box-sizing：border-box，safari中的高度差也消失,设定为content-box亦可，但需要调整宽高。两者区别如下：

值描述content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。

2.javascript 基本语法：

     1.js输出信息方式（字符串引号包含，变量和数字不需要引号，分号表示结束）

     alert("");  弹出提示框

     console.log("");  控制台显示（页面不显示，需要审查网页元素，在控制台查看）

     document.write("");

     promet(""); 弹出输入框，提示用户输入信息

     confirm(""); 弹出判断框，让用户选择或取消

     2.变量

     含义：

     定义：var 变量名；

     变量名命名规则：

          1.不能以数字开头；

          2.不推荐使用汉字命名；

          3.不能用关键字(例如 var)；

          4.不推荐使用保留字；

          5.区分大小写

     3.数据类型

          Number 数字

          String 字符串(需要用引号包含)

          boolean 布尔值

          undefined 未赋值的变量

          null 空引用

          new Array() 其它对象：数组，函数，日期

          typeof 判断数值类型

          数据的运算：

          1.加法时，只要变量中包含string类型，则全部视为string进行运算（即将数据拼接，而不            是数学运算），只有所有数据为number时，才进行数学上的运算；

          2.乘法，除法和减法则不论数据为number，还是string，一律都视为number进行数学运算（除以0输出infinity）。