BFC、媒体查询、横屏竖屏、异步操作、透明背景上a链接失效、vue和react、虚拟dom、call和apply和bind

1、BFC

三种常见定位

• 普通流 (normal flow) 在普通流中，元素按照其在 HTML
  中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在HTML 文档中的位置决定。
• 浮动 (float)
  在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
• 绝对定位
  (absolute positioning)
  在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

Block Formatting Contexts (块级格式化上下文)，属于普通流，像是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll)

2、媒体查询

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒体类型mediatype

• all 用于所有设备
  print 用于打印机和打印预览
  screen 用于电脑屏幕，平板电脑，智能手机等。
  speech 应用于屏幕阅读器等发声设备

媒体功能media feature

• aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
  color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
  color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
  device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。
  device-width 定义输出设备的屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。
  height 定义输出设备中的页面可见区域高度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
  max-color 定义输出设备每一组彩色原件的最大个数。 max-color-index 定义在输出设备的彩色查询表中的最大条目数。
  max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
  max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。
  max-height 定义输出设备中的页面最大可见区域高度。
  max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
  max-resolution 定义设备的最大分辨率。 max-width 定义输出设备中的页面最大可见区域宽度。
  min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
  min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。
  min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
  min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。
  min-height 定义输出设备中的页面最小可见区域高度。
  min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 min-resolution 定义设备的最小分辨率。
  min-width 定义输出设备中的页面最小可见区域宽度。
  monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
  orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。如：96dpi,
  300dpi, 118dpcm scan 定义电视类设备的扫描工序。 width 定义输出设备中的页面可见区域宽度。

举个栗子

<style>
body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
 
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open ('http://www.w3cschool.cc/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
}
//写成一行
-->
</SCRIPT>

3、判断横屏竖屏

1、通过在html中分别引用横屏和竖屏的样式：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的CSS

2、CSS中通过媒体查询的方法来判断：

@media (orientation: portrait ){
 //竖屏CSS 
}
@media ( orientation: landscape ){
 //横屏CSS 
}

3、js判断是否为横屏竖屏:

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) { 
   alert('竖屏状态！');
  } 
  if (window.orientation === 90 || window.orientation === -90 ){ 
   alert('横屏状态！');
  } 
 }, false);

或

var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
    if(mql.matches) {
        // 竖屏
    }else {
        // 横屏
    }
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);

存在的问题

• 1.有些移动设备不支持这个 window.orientation 这个属性，导致没法检测。
  2.有些设备横屏和竖屏并不一定代表横屏就是宽度最大，竖屏就是高度大的，横屏和竖屏的定义是有厂商规定那个正面的屏幕方向。

4、雪花水滴落下屏幕不触发点击，css控制

没找到，哭/(ㄒoㄒ)/~~

5、元素铺满但不显示滚动条

 overflow:hidden；

6、几个功能、属性

tostring ：将对象转换成字符串

object.toString( )

instanceof：判断对象类型
object.defineproperty：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
语法

Object.defineProperty(obj, prop, descriptor)

参数

• obj 要定义属性的对象。 prop 要定义或修改的属性的名称或 Symbol 。 descriptor 要定义或修改的属性描述符。

举个栗子

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

Object.prototype.toString.call()
在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。
对于null、array、function、object来说，使用typeof都会统一返回object字符串。
要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。
分为null、string、boolean、number、undefined、array、function、object、date、math。

7、异步业务有哪些、获取dom是异步吗？

1、定时器是异步操作
2、事件绑定是异步操作
3、AJAX中一般我们采取异步操作（也可以同步）
4、回调函数可以理解为异步（不是严谨的异步操作）

获取dom是同步的。

8、路由history模式会有什么问题

history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。

9、 块元素和内联元素如何互相转化？

块->行内:display:inline;

行内->块:display:block;

块,行内->行内块:display:inline-block;

10、 IE6中给一个元素使用透明png做背景会引发元素内a链接失效，什么原因？如何解决？

举个栗子

.png{background:url(../image/png_test.png);}
* html .png {_background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}

原因：ie6不支持png24图片格式，所以需要加filter。就是图片的层级比伪类内容要高。

解决：给a样式添加position：relative属性；或设置z-index层级，让内容位于背景层之上。

11、写一个高度为0的div

答：

divHeight0{

width:200px;//定义宽度

height:1px;//定义高度

overflow:hidden; //超出隐藏

border-top:1px solid #000;//边框，用于测试

}

 Html代码：<div class="divHeight0" ></div>

13、vue和react的区别

react和vue的4点不同：

数据是不是可变的
通过js操作一切还是各自的处理方式
类式的组件写法还是声明式的写法
什么功能内置，什么交给社区去做

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程。
react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css。
react是类式的写法，api很少。
vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
vue是声明式的写法，通过传入各种options，api和参数都很多。

14、虚拟dom

为什么需要虚拟DOM，它有什么好处?
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

引入了Virtual DOM之后，React是这么干的：你给我一个数据，我根据这个数据生成一个全新的Virtual DOM，然后跟我上一次生成的Virtual DOM去 diff，得到一个Patch，然后把这个Patch打到浏览器的DOM上去。完事。并且这里的patch显然不是完整的虚拟DOM，而是新的虚拟DOM和上一次的虚拟DOM经过diff后的差异化的部分。

15、call、apply与bind的区别

call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

xw.say.call(xh);

xw.say.apply(xh);

xw.say.bind(xh)();

call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的。由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。

xw.say.call(xh,"实验小学","六年级");       

w.say.apply(xh,["实验小学","六年级"]);

xw.say.bind(xh,"实验小学","六年级")();