京东面试题分析

昨天有幸去京东面试，做了一套面试题，考察的都是很基础的东西，但也暴露出了不少问题。今天就抽时间总结一下，避免下次遇见时再出错。

1、PNG8格式图片的颜色模式是：（索引）颜色，在修改前要先更改颜色模式为RGB颜色。

2、已知这样一段HTML:<p class="a"></p>,应用这样一段css： .a{font:12px/2 arial;},则这个p元素的line-height的值是(24)px.
分析：font:12px/2 这是缩写形式，font-size为12px，line-height位font-size的2倍，24px。

3、已知var obj = Object.create({a:1}),则obj.hasOwnproperty(‘a’)返回的结果是：(false).

分析：Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的。hasOwnproperty方法是判断一个属性是否是定义在对象本身，如果是则返回true，否则返回false。很显然obj是在原型的基础上创建的。

4、已知这样一段HTML，<div class="a"><div class="b"></div></div>，如果应用了这样一段css，

.a{width:100px;padding:10px;box-sizing:border-box;}
.b{width:100%;height:10px;background-color:red}

那么红色区域的宽度为：B

A. 90px
B. 80px
C. 110px
D. 100px

分析：box-sizing:border-box;是怪异盒模型，border、padding不会撑开盒子的大小。默认是content-box，标准盒模型,border、padding会撑开盒子的大小.所以b的宽度就是100-10x2=80px。

5、以下代码执行后a、b的值分别是（c）
var a=0;
var b=false || a++;
A、1,1
B、0,0
C、1,0
D、0，false

分析：在运算过程中，首先js 会将 && 或|| 两边的值转成Boolean 类型，然后再算值 ，&&运算如果返回true，则取后面的值，如果|| 返回true,则取前面的值 。而其中数值转换成boolean 的规则 是：

对象、非零整数、非空字符串返回true,

其它为false ;
在本题中a++结果是0，a是1。||两边都为false,所以结果也就是false。按照上面所说的如果||返回true,则取前面的值。所以b的值就取后面的值0，故选c。

6、以下表达式返回的结果：B
“1”-null+true
A.NaN
B.2
C.1
D.0
分析：这道题考察数据的隐式转换，字符串1默认转化成数字1，null转化成0，true转换成1,所以结果就是2.

7、以下代码执行时两个alert分别输出值是（B）
(function(){
a=5;
alert(window.a);
var a=10;
alert(a);
})();
A.5,5
B.undefined,10
C.undefined,5
D.10,10

分析：本题考察变量提升，var a=10 提前声明并把a=5顶替掉，所以执行alert(window.a)就返回undefined。

8、以下表达式中返回结果是true的有：ABC
A. false == ‘0’
B. ‘123’ ==123
C. new String(‘123’) == ‘123’
D.null == false

分析：这道题考察的是==的用法,==比较，先进行类型转换，再进行值比较。===的比较，如果数据类型不相同，就直接返回false。

9、下列浏览器对应的hack方式正确的有：A
A. IE6: _property:value
B. IE6/7/8: *property:value
C. IE8: *property:value
D. IE9: property:value\9

分析：这道题考察的是css hack。css hack的目的就是使你的css代码兼容不同的浏览器，一般有两种方式，条件注释法、类内属性注释法。 本题显然是运用的类内属性注释法 ： _ ie6识别 * ie6/7识别 \9 ie6-10都能识别。

10、css实现单行文本超出显示….
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

11、已知父容器和子容器，宽度均不固定。用css实现子容器水平居中。

    <div class="parent">
        <div class="child">jd.com</div>
    </div>

方法1：.parent{
text-align:center;
}

方法2：.parent{
position:absolute;
left:50%;
transform:translateX(-50%);
}