HTML、CSS相关

HTML：

web assembly

WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

Web语义化的理解

Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。

总结起来就是：

• 正确的标签做正确的事情
• 页面内容结构化
• 无CSS样子时也容易阅读，便于阅读维护和理解
• 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

H5的新特性

首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，

在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，

在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，

在多媒体方面规定了音频和视频元素audio和vedio，

另外还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议

img是行内元素吗？为什么可以设置宽高呢

是

iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器

缺点：

会阻塞主页面的onload事件

搜索引擎无法解读这种页面，不利于SEO

iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。

混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

CSS相关：

px转rem有什么好的方案

1rem等于多少px呢？

1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。

html{font-size:14px}
那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

重排和重绘，讲讲看

重绘（repaint或redraw）：重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

触发重绘的条件：改变元素外观属性。如：color，background-color等。

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系：重排必定会引发重绘，但重绘不一定会引发重排。

盒模型

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有两种标准的，一个是标准模型，一个是IE模型。

box-sizing(有3个值哦)：border-box,padding-box,content-box.

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

Css 写