待整理

1、css的display：none和visibility:hidden区别

display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；

visibility:hidden:视觉上的不可见，但是保留占据的空间，还具有宽度和高度；

2、box-sizing ： content-box || border-box || inherit

content-box：border和padding不计算入width之内;

padding-box：padding计算入width内;

border-box：border和padding计算入width之内，其实就是怪异模式了;

当为border-box,则让元素维持在了IE传统模式下的怪异模式，即，设置的元素的width和height都是包括元素的宽度和padding和border。可以运用到布局（因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了）和表单元素（表单中除了checkbox和radio外默认都是2px的border）上。

3、浏览器渲染

DOM:浏览器将HTML解析成树形结构，即DOM。

CSSOM:将css解析成树形结构，即CSSOM。

Render Tree:DOM 和 CSSDOM合并后生成Render Tree。

Layout：计算Render Tree每个节点的具体位置。

Painting：将layout后的节点内容呈现在屏幕上；

遇到外部的css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

Repaint——(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。

Reflow——（回流）：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程就叫回流。意味着元件的几何尺寸变了，我们需要重新验证并计算 Render Tree。

4、display有哪些值？说明他们的作用。

1）none：元素不会显示，而且该元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。

2）inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3）block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

4）inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

5）inherit：规定应该从父元素继承 display 属性的值。

6）table：此元素会作为块级表格来显示（类似