什么是盒模型？

在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。 对于盒模型，分为标准盒模型和怪异盒模型两种。 标准(W3C)盒模型

标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分。

怪异(IE)盒模型

怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border。

div { box-sizing: border-box; // 怪异盒模型 box-sizing: content-box; // 标准盒模型 }

行内、块元素、空元素分别举例

块级元素

div、p、ul、ol、dl、li、dt、dd、form、h1、h2、h3、h4、h5、h6、table、thead、tbody、tfoot H5新增块级元素 header、main、footer、aside、article、address、blockquoke、audio、video、section··· 行内元素

span、a、b、u、i、label、em、strong、del、sub、sup、code 行内块元素

img、input、button 空元素

br、meta、hr、link

src和href的区别

首先看一下使用src属性的元素和使用href属性的元素： 使用src的元素

<img src="haochenguang.png" /> <iframe src="home.html"><iframe> <script src="index.js"></script>

使用href的元素

<link href="app.css" /> <a href="https://baidu.com">百度一下</a>

接着，我们来对比一下这些标签的区别： 1.使用src属性的元素，例如img、iframe、script，如果src路径出现问题的话，页面的内容会受到影响，用户没有办法看到页面本来应该显示的内容和使用页面应该实现的功能。 2.使用href属性的元素，例如link、a,如果href路径出现问题的话，页面不会有很大的影响，对于样式文件来说，只是影响页面的美观度，而不会影响页面的正常浏览和使用，对于超链接来说，只是页面无法与其它页面建立链接，对当前页面的影响也不大。 由此，我们可以总结： src表示引用资源，是页面不可少的一部分，它会替换掉当前的元素，而href是关联，是将当前页面与指定资源建立链接。

请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。webstorage和cookie的区别 WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。

Sass 、S LESS 是什么？大家为什么要使用他们

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可 以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 为什么要使用它们？ 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的 机械劳动。 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代 码也可以与 LESS 代码一同编译。

css 优先级算法如何计算

1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

javascript 的typeof 返回哪些数据类型

alert(typeof [1, 2]); //object alert(typeof 'leipeng'); //string var i = true; alert(typeof i); //boolean alert(typeof 1); //number var a; alert(typeof a); //undefined function a(){;}; alert(typeof a) //function

例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt(),parseFloat(),Number()） 隐式（== ,!!）

数组方法 pop() push() unshift() shift()

push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除 map() : 遍历数组中的元素, 返回一个新数组(包含回调函数返回的数据) filter():遍历数组中的元素, 返回一个新数组(包含回调函数返回 true 的元素)

window.onload 和 document ready 的区别

window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中 没有这个方法，jquery 中有 $().ready(function),在 dom 文档树加载完之后执行一个函数（注意，这里面 的文档树加载完不代表全部文件加载完）。 $(document).ready要比window.onload先执行window.onload只能出来一次，$(document).ready 可以出现多次

””和“=”的不同

前者会自动转换类型 后者不会

iframe的作用

用法 1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

优点 1、便于修改，模拟分离，像一些信息管理系统会用到。 2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

缺点 1、iframe的创建比一般的DOM元素慢了1-2个数量级 2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。 3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。 jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。 gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

style标签写在body后与body前有什么区别

页面加载自上而下 当然是先加载样式。 写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

在网页中的应该使用奇数还是偶数的字体？为什么呢

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。