xx公司笔试题解答

1.display:inline-block;行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，
可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有**空白缝隙**
（2）**默认宽度就是它本身内容的宽度。**
（3）高度，行高、外边距以及内边距都可以控制。

display:inline;行内元素

（1）** 默认宽度就是它本身内容的宽度。 **
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）和相邻行内元素在一行上。
（4）行内元素只能容纳文本或则其他行内元素。 a标签除外

display:block；块级元素

（1）**宽度默认是容器的100%**
（2）高度，行高、外边距以及内边距都可以控制。
（3）总是从新行开始
（4）可以容纳内联元素和其他块元素。

2.link和@import

link：1.可以定义rss、rel等作用；2.当引入到link标签时，页面会同步加载所引的css；3.可以使用js动态引入

@import:1.只能加载css样式；2.等到页面加载完才会被加载；3.需要ie5以上才能使用

3.盒模型

W3C标准盒模型：（默认）box-sizing:content-box;宽度width:width+padding+border

怪异盒模型(IE盒模型)：box-sizing:border-box;宽度width:width(content+padding+border)

4.怎么让Chrome支持小于12px 的文字

谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下：
-webkit-text-size-adjust:none;

但是在最新版的谷歌里。已经不在支持这个属性啦，需要通过css3的transform来解决，方法如下：

css部分	html布局
body,p{ margin:0; padding:0;} p{font-size:10px;} span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}	<p><span id="span1">我是一个小于12PX的字体</span></p>

解释：

1.{webkit-transform:scale(0.8);  display:inline-block}  //0.8位缩放倍数，具体自己根据实际需求修改，只能缩放可以定义宽高的元素，而span是行内元素，

为什么定义 display:inline-block而不是 display:block？转为block就独占一行啦，所以转换为inline-block

2.{-o-transform:scale(1);}opera现在最新版也是webkit内核，新版本的opera，本来就是10px的字体了。

5.null undefined的区别

6.react的框架中没有嵌套关系的组件通信有哪些方式？

7.React的生命周期？vue生命周期？

8.vue中data为什么被设计成一个函数？

9.Html5提供了哪些常用的api?

10.什么是跨域？为什么会有跨域？

11.js中有哪些数据类型？数据类型分为哪几种？他们有什么区别？检测数据类型的方法又有哪些？

12.循环遍历一个数组的方法有哪些？分别是如何跳出循环？

13.(Less)sass里如何定义变量？如何实现样式继承？

14.如何对一个数组做一个快速浅拷贝？

15.讲讲常用的http请求响应的状态码分别是什么意思，1-5分别举例？

16.vue跨组件通信应该怎么做？

17.异步加载数据放在Vue哪个生命周期做更合适，为什么？

18.vue或react在渲染列表时，key属性的作用是什么？

19.讲讲React组件中的props和state作用和区别？

20.Opacity是否有浏览器兼容性？

21.Iframe如何自适应内容高度？