1.移动端meta常用设置
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=1">
2.transform:rotate,skew,scale,translate,matrix使用详解
3.for(var i=0;...;...){}中的i和for本身在同一个作用域
4.inline,inline-block,block的区别:
inline无宽高无垂直方向的margin
inline-block相当于inline，但是有宽和高,相互之间有和字体大小有关的空隙(即父元素font-size:0可以去空隙)
block宽度默认100%,即使设置了宽度，默认也是占一行的空间
5.水平居中
1.text-align:center(inline,inline-block)
2.margin:auto 0(block,inline-block)
3.margin-left:50%(left:50%);-webkit-transform:translate(-50%,0)
4.flex
6.垂直居中
1.文字line-height设置为父元素height;
2.父div(display:table),子div(display:table-cell;vertical-align:middle);
3.或者同上(top:50%;-webkit-transform:translate(0,-50%))
6.5［水平垂直居中］
display:flex;
align-items:center;
justify-content:center;
7.获取当前日期
var myDate=new Date();
myDate.getFullYear()+"-"+(parseInt(myDate.getMonth())+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()
+":"+myDate.getSeconds();//getMonth()是0-11
8.ajax执行完成的前后顺序和代码顺序不是必然关系，除非一个方法写在另外一个方法的success中
9.移动端touchmove的触发要设置event.preventDefault();
10.字符间距：
letter-spacing:..中文间距字符
word-spacing:..英文间距字符
11.iphone手机上数字可能默认是超链接，若想不是超链接可设置
<meta name="format-detection" content="telephone=no"/>
12.position
position:static; /*默认值，忽略top,bottom,left,right,z-index*/
position:absolute; /*相对于static以外的第一个父元素进行定位*/
position:fixed;/*Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. */
position:relative;
13.元素的垂直方向的外边距存在合并的情况，具体见http://www.softwhy.com/forum.php?mod=viewthread&tid=4592,即相邻的两个或多个外边距在垂直方向合并成一个外边距，水平不存在。
外边距条件:
-相邻的外边距没有非空元素，padding和border和clear分隔
-对象都处在文档流中，即非浮动和pisition不为fixed和absolute的元素
14.页面滚动到元素位置
$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');
15.ajax和jsonp
ajax和jsonp本质上是不同的东西，ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。ajax和jsonp的区别不在于是否跨域，ajax通过代理服务器一样可以跨域，jsonp本身不排斥同域的数据的获取。jsonp不是ajax的一个特例，只是被jquery封装在ajax中。
16.按钮设置ajax调用的时候，防止用户多次点击，可以点击失效，complete后恢复。
17.if中的条件==即可满足，而switch(param){case param1:...;break;}需要param===param1
18.function声明时的参数和执行时传入的参数可以数量不一致，参数的调用可以用arguments.
19.this
Inside a function, the value of this depends on how the function is called.
not in strict mode : window/global
strict mode : undefined //in strict mode, if this was not defined by the execution context, it remains undefined.
但是在 arrow functions 中
An arrow function does not create its own this context, so this has its original meaning from the enclosing context. Thus, the following code works as expected:
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
另外 obj.prototype属性中的this，不管属性是函数还是什么，还是obj是函数还是什么，这里的this指的是obj
20.Object.prototype:
All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype, although they may be overridden
new Boolean(false) returns an object which is not null. Non-null objects are always truthy.Incidentally, calling the Boolean function as a function—without the new—actually does return a primitive
new Boolean(false)//true
Boolean(false)//false
22.手动释放变量 变量＝null;
-webkit-touch-callout:none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust:none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
-webkit-user-select:none; /* prevent copy paste, to allow, change 'none' to 'text' */
24.closure/闭包
闭包的关键在于闭包可以保存其执行环境
<div id="c1" style="width:400px;height:400px;background-color:red;">
</div>
<div id="c2" style="width:400px;height:400px;background-color:green;">
</div>
<div id="c3" style="width:400px;height:400px;background-color:yellow;">
</div>
<div id="c0" style="width:400px;height:400px;background-color:black;">
</div>
for(var s=0;s<4;s++){
(function(n){
document.getElementById('c'+n).onclick=function(){
alert(n);
}
})(s)
}//点击div,alert响应的数字
var Counter=(function(){
var privateCounter=0;
function changeBy(val){
privateCounter+=val;
}
return {
increment:function(){
changeBy(1);
},
decrement:function(){
changeBy(-1);
},
value:function(){
return privateCounter;
}
}
})();
Counter.increment();
Counter.value();//1
Counter.increment();
Counter.value();//2
Counter.decrement();
Counter.value();//1
3
//计数器优化版
var makeCounter=function(){
var privateCounter=0;
function changeBy(val){
privateCounter+=val;
}
return {
increment:function(){
changeBy(1);
},
decrement:function(){
changeBy(-1);
},
value:function(){
return privateCounter;
}
}
};
var Counter1=makeCounter();
var Counter2=makeCounter();
Counter1.increment();
Counter1.increment();
Counter1.value();//2
Counter2.increment();
Counter2.increment();
Counter2.decrement();
Counter2.value();//1
4
function showHelp(help){
document.getElementById("help").innerHTML=help;
}
function setupHelp(){
var helpText=[
{'id':'email','help':'Your e-mail address'},
{'id':'name','help':'Your full name'},
{'id':'age','help':'Your age must be over 16'}
];
for(var i=0;i<helpText.length;i++){
var item=helpText[i];
document.getElementById(item.id).onfocus=function(){
showHelp(item.help);
}
}
}
setupHelp();//每一个focus都是Your age must be over 16，循环创建的三个匿名函数共享同一个执行环境
5
//上一个例子更正
function showHelp(help){
document.getElementById("help").innerHTML=help;
}
function makeHelpCallback(help){
return function(){
showHelp(help);
}
}
function setupHelp(){
var helpText=[
{'id':'email','help':'Your e-mail address'},
{'id':'name','help':'Your full name'},
{'id':'age','help':'Your age must be over 16'}
];
for(var i=0;i<helpText.length;i++){
var item=helpText[i];
document.getElementById(item.id).onfocus=makeHelpCallback(item.help);
}
}
setupHelp();
25.变量范围/ the scope of variables
closure
var a = 1;
var six = (function() {
var a = 6;
return function() {
// JavaScript "closure" means I have access to 'a' in here,
// because it is defined in the function in which I was defined.
alert(a);
};
})();
six();//6
Object properties
var a = 1;
function five() {
this.a = 5;
}
alert(new five().a)//5
Prototype-based scope resolution
var a = 1;
function seven() {
this.a = 7;
}
// [object].prototype.property loses to
// [object].property in the lookup chain. For example...
// Won't get reached, because 'a' is set in the constructor above.
seven.prototype.a = -1;
// Will get reached, even though 'b' is NOT set in the constructor.
seven.prototype.b = 8;
new seven().a;//7
new seven().b;//8
Global+Local
var x = 5;
(function () {
console.log(x);
var x = 10;
console.log(x);
})();
//This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations
//(not initializations) to the top of the scope, making the code equivalent to:
var x = 5;
(function () {
var x;
console.log(x);
x = 10;
console.log(x);
})();
26.在iPhone中使用video标签时，网页中打开视频会自动全屏，可以试着在vedio中设置webkit-playsinline="true"
27.call/apply
While the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.
A different this object can be assigned when calling an existing function. this refers to the current object, the calling object. With call, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.
function greet(){
var reply= [this.person, 'Is An Awesome', this.role].join(' ');
console.log(reply);
}
var i = {
person: 'Douglas Crockford', role: 'Javascript Developer'
};
greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
/* min/max number in an array */
var numbers = [5, 6, 2, 3, 7];
/* using Math.min/Math.max apply */
var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);
/* vs. simple loop based algorithm */
max = -Infinity, min = +Infinity;
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] > max)
max = numbers[i];
if (numbers[i] < min)
min = numbers[i];
}
28.Jquery的each方法中return相当于continue，return false 相当于break即跳出循环
29.对象属性的引用中，如果属性名词是以数字开头，或者属性名是保留字的，用点号引用是非法的，只能用中括号(例如Array)
renderer.3d.setTexture(model, 'character.png'); // a syntax error
renderer['3d'].setTexture(model, 'character.png'); // works properly
//在Array中 arr['2']和arr[2]是相等的，因为在javascript引擎中会强制把arr[2]中的2转换为'2'
30.Array
var associative_array = new Array();
associative_array["one"] = "Lorem";
associative_array["two"] = "Ipsum";
associative_array["three"] = "dolor";
for (i in associative_array) { alert(i) };// "one""two""three"
//Array.length does not count them as items , associative_array.length=0
一元正号运算符（unary plus operator）位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。
var a="5";
alert(typeof(a));//string
alert(typeof(+a));//number
32.简洁代码的写法
1.a&&a.stopPropagation&&a.stopPropagation()
2.var ss=a||{};
3.random_num=Math.random()>0.5?-1:1;
33.new
When the code new Foo(...) is executed,the following things happen:
1.A new object is created,inheriting from Foo.prototype.
2.The constructor function Foo is called with the specified arguments and "this" is bound to the newly create object. "new Foo" is equivalent to new Foo(),i.e. if no argument list is specified,Foo is called without arguments.
3.The object returned by the constructor function becomes the result of the whole new expression.if the constructor function doesn't explicitly return an object, the object created in step 1 is used instead.(Normally constructors don't return a value,but they can choose to do so if they want to override the normal object creation process)
34.alert()
message is an optional string of text you want to display in the alert dialog, or, alternatively, an object that is converted into a string and displayed.alert()隐式调用toString();
var add=function(a){
var obj={};
var val=a;
obj.add=function(b){
val+=b;
return obj.add;
}
obj.add.toString=function(){
return val;
}
return obj.add;
}
var f=add(1)(2)(3)(4); //程序运行是从左向右
alert(f);//10
35.Cookie
An HTTP cookie (also called web cookie, Internet cookie, browser cookie or simply cookie), is a small piece of data sent from a website and stored in the user's web browser while the user is browsing. Every time the user loads the website, the browser sends the cookie back to the server to notify the user's previous activity.[1] Cookies were designed to be a reliable mechanism for websites to remember stateful information (such as items added in the shopping cart in an online store) or to record the user's browsing activity (including clicking particular buttons, logging in, or recording which pages were visited in the past). Cookies can also store passwords and form content a user has previously entered, such as a credit card number or an address.
36.Navigator
The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
A Navigator object can be retrieved using the read-only Window.navigator property.
37.true&false
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）,可通过 var bool_str=new Boolean(str);来检测bool值,注意空对象{}也是true，此时可以用 obj.toString().trim()来判定是true or false;
38.margin-top&margin-bottom
margin-top或margin-bottom设置百分比，实际长度是百分比乘以父级元素的宽度
1.The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
2.它们的设置可能会影响.parent().siblings().children()的元素的位置，此时应设置 parent()的overflow:hidden
39.清除浮动
父元素:after{clear:both;content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;
height:0;}
display : block 是不可少的
39.对于多行分类信息，信息不固定可能换行的情况，此时可以直接用line-height把高度撑开，或者文字上下padding
40.-webkit-appearance
修改iPhone中的默认样式：-webkit-appearance:none;
41.TouchEvent
42.event
The Event interface represents any event of the DOM. It contains common properties and methods to any event.
A lot of other interfaces implement the Event interface, either directly or by implementing another interface which does so:TouchEvent...
The load event is fired when a resource and its dependent resources have finished loading.load is used for window.onload or $( window ).load(function() { ... })
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.DOMContentLoaded is equal to Jquery:$(function(){}) or $(document).ready();
44.!important 强制覆盖其他css样式
45.background-position&background-origin
background-origin:The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property
background-position:The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
window.addEventListener('deviceorientation',function(){},false);//function中的事件会一直触发
47.table
{*常用设置*}
table{border-left:1px solid $666;border-bottom:border-left:1px solid $666;}
td{border-right:1px solid $666;border-top:border-left:1px solid $666;}
<table border="0" cellspacing="0" cellpadding="0">
...
</table>
post 不限大小 安全
get 参数体现在url中，长度受url长度限制，不安全
48.compare time---Date
var startdate=Date.parse(new Date(arrayStr[0].replace(/\-/g,'/')));
var comm_endtime=Date.parse(new Date(arrayStr[1].replace(/\-/g,'/')));
//1990-5-31 is invalid in iphone
//Date.now() Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.
//Date.parse() Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC.
//or new Date().getTime();
//new Date("1997/1/1 11:11:11").getTime();new Date()可以把字符串转换成日期格式
49.iphone中 通过$(document).on('click','selector',function(){...})点击无效的问题
参考https://www.zfanw.com/blog/ios-safari-click-not-working.html,
经多次实验后有多种方式可修复
－－－1.js方式
1.$(selector).on('click',function(){});
2.$(selector).click(function(){...});
3.或者方法写入标签中
4.或者标签中另外添加 onclick="javascript:void(0)"
－－－2.css方式--推荐
cursor:pointer
50.css的height,width变化是自带动画效果的线性变化
51.点击执行click事件的时候，会执行touchstart 和 touchend，但是不会执行touchmove，所以对于右滑出现删除按钮，点击修改的功能，如下
code：
.info_select{-webkit-transform: translate(-70px,0);-webkit-transition:all 0.3s linear;}
var test_start=false,test_move=false;
var _this="";
var end_x=0,start_x=0;
$(document).on('touchstart','.info',function(e){
start_x=e.originalEvent.targetTouches[0].pageX;
_this=$(this);
test=true;//确定是否是可移动区域滑动
});
$(document).on('touchmove',function(e){
if(!test){
return;
}
e.preventDefault();//安卓这条必须加上，iPhone非必需
end_x=e.originalEvent.targetTouches[0].pageX;
test_move=true;//验证是否是点击事件
});
$(document).on('touchend',function(e){
if(!test){
return;
}
if(!test_move){
return;
}
if(end_x-start_x<=-100){
_this.addClass('info_select').parent().siblings().children('.info').removeClass('info_select');
}
test=false;
test_move=false;
});
52.安卓机：
window.location.href=window.location.href;
//或者
window.location.reload();
//无效，应该是缓存的问题 ，此时可以通过加后缀解决
window.location.href=window.location.href+Math.random();
53.body 即使 设置 height:100px;overflow:hidden 页面上的内容也会显示
此时 可以把页面内容放在相通设置的div中即可达到想要的效果
/*可以直接绘制出距上下左右都是8px的element*/
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
If your iframe is in the same domain as your parent page you can access the elements using document.frames collection.
If your iframe is not in the same domain the browser should prevent such access for security reasons.
--1.iframe内部获取iframe外部的元素
window.parent.document.getElementById('target');
window.parent.$(elementid).attr(attributeName);
--2.iframe外部获取iframe内部的元素
$("#myiframe").contents().find("#myContent");
window.frames['myIFrame'].document.getElementById('myIFrameElemId')
56.函数中声明的变量 无论在哪声明或者赋值，javascript引擎总会把声明提升到函数顶部。
var regular_joe='regular_joe is assigned';
(function prison(regular_joe){
var regular_joe;
alert(regular_joe);
})('the regular_joe argument');
//alert 'the regular_joe argument'
//因为regular_joe先在顶部声明 ，再由参数赋值
57.css 获取排序的元素
input:nth-child(0){}/*获取第一个input元素*/
input:last-child{}/*获取最后一个元素*/
58.假设opacity设置的是一个动画，在这个动画完成之后才回进行该元素的后续的css样式生效
1.css:＋，This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.
.payInput[type="radio"]:checked + .payName{
background:url(../image/radioButton_select.gif) 20px center no-repeat;
}
.payName{
background:url(../image/radioButton.gif) 20px center no-repeat;
}
2.The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
60.圆－border-radius:50%;
61.css 开启设备硬件加速
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
/* In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. */
/* The following declarations can be used to fix the issue: */
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
/* Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d */
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
62.ps切图:文字取色 取最深色;字体的高度大致为font-size;第一行的底部 到第二行的底部 为line-height
63.touchmove中不是任何时候都要加上 'e.preventDefault()'，例如左右滑动显示隐藏删除按钮，但是上下需要滑动显示更多信息。
64.单边阴影效果：
/*通过边缘设置渐变元素的方式设置单边阴影,例如 单边下阴影*/
:after{
content: ' ';
background: -webkit-linear-gradient(bottom, #EEE, #ddd);
position: absolute; /*父元素设置 position:relative*/
bottom: 0;
left: 0;
width: 100%;
height: 0.1rem;
-webkit-transform: translate(0,100%);
}
64.一般动态更改 'title'使用的方式是
document.title = "123";
但是此种修改方式在微信浏览器中不起作用，解决方式是 每次更改title的时候新增一个隐藏的iframe
changeTitle = function (_title){
var $body = $('body');
document.title = _title;
// hack在微信等webview中无法修改document.title的情况
var $iframe = $('<iframe src="image/clock.png" width="0" height="0"></iframe>');
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
}
65.元素的创立和需要过渡的动画的结果同时设置时，transition不会生效，直接到达最终结果。此时需要
即把初始阶段和最终阶段分割成两部分。
应用了transform后，会使当前元素变成了设置了position:absolute的效果。
67.Access the css “:after” selector with jQuery
68.table-cell
69.一个元素同时设置background-image和background-color，这两个属性要写在一起。
background:url(../image/spa-homepage-notice_bg.png) no-repeat #ffecd6;
70.同一个元素设置前后两个相同属性，需要后一个覆盖前一个的话，前后的格式需要相同。
.a .b .c{background-color:red}
.a .b .d{background-color:blue}
71.What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?
Edge mode tells Internet Explorer to display content in the highest mode available.If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9. Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed.
If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible.
IE8 或以后的版本才有效
72.自执行函数和闭包 保证了各个模块之间的隔离以及各个模块的使用方式(公开API)的使用。
73.javascript 中 唯一能定义变量作用域的就是函数。可以在函数中声明全局变量，只要省略var即可。在函数的顶部声明变量可以使变量的作用域清晰。当变量被声明时，声明会被提升到它所在函数的顶部，并被赋予undefined值。在定义函数的时候变量的作用域链已经固定了。
在运行时，javascript会检索作用域层级来解析变量名。它从当前作用域开始，然后按它的查找方式回到顶级的作用域，即(window)或者global(node.js)对象，它使用找到的第一次匹配并停止查找。
74.一些小tips
i.form 表单的提交和重置
<button type="submit">提交</button>
<button type="reset">重置</button>
ii.列表
ul li;ol li;dl dt dd
iii.
<a href="mailto:*****@163.com">联系我们</a>
<a href="tel:18888888888">18888888888</a>
iiii.语义化标签使用
iiiii.当鼠标在a元素hover时，a的title属性会出现。
75.函数声明和函数表达式不一致的地方是函数声明在调用前后都不影响使用，但是函数表达式的定义要在调用前。
abc();//正常
eee();//报错
function abc(){
//code
}
var eee = function (){
//code
}
76.当使用scale变大一个元素，其父元素充当容器元素并且设置overflow:scroll后，scroll to the top 和 left 没有用，结果使得元素展示不完全，此时只要设置
document.getElementById(container_id).style.transformOrigin = '0 0';
[相关问题](Using CSS transform scale() to zoom into an element without cropping, maintaining scrolling)
77.在window.onload的情况下才能用js或者jq获取未知图片的宽高(被图片元素撑高的容器元素也是)
78 . 文字底部对齐
display:table-cell;
vertical-align:bottom;
79.局部变量的使用问题
function a(b){
var b = b;
alert(b);
}//这种写法没问题
b=1 //或者var b=1
function (){
var b = b;
alert(b);
}//报错 b undefined ，因为此处var b的时候把外面的b覆盖了
for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key + " -> " + p[key]); }}
80.offsetX,pageX,clientX,screenX的区别
pageX and pageY:
Relative to the top left of the fully rendered content area in the browser.
screenX and screenY:
Relative to the top left of the physical screen/monito
clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window.
offsetX and offsetY：
are relative to the parent container
ps: In jquery,don't confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container
80.父元素设置好了左右padding，此时想要达到父元素的快递，可以设置左右margin为负值。
margin-left:-10px;
margin-right:-10px;
但此时要注意 ，div p等不用设置宽度即可生效，但针对a元素需要设置宽度时，宽度要设置成父元素的宽度
81.What are the differences between JSON and JavaScript object?
json的key必须是双引号
81.设定一个p元素为其中字体的高度时
font-size:24px;
height:24px;
/*或者改行文字为单行时*/
font-size:24px;
line-height:24px; /*因为此时line-height把高度撑高*/
因为
The font-size property specifies the size, or height, of the font.
The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text.
