简述Chome盒模型与IE盒模型的区别
标准模型和IE模型 height 和 width 计算方式不同
标准模型：只包括 content
IE模型：content + padding + border
行内元素和块级元素都有哪一些？
1）行内元素
<span>、<a>、<b>、<strong>、<img>、<input>、<textarea>、<select>、、<em>、<del>
2）块级元素
<address>、<center>、<h1>~<h6>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
BFC：块级格式化上下文
具有BFC的元素可看作是独立的容器，容器里面的元素不会影响到容器外面的元素
人话：https://www.bilibili.com/video/BV1aZ4y1M7gW?from=search&seid=1276149695661179629
人话补充：https://www.bilibili.com/video/BV1h54y1D7rb?from=search&seid=1276149695661179629
图片与文字的配合：https://www.bilibili.com/video/BV1bT4y1P732/?spm_id_from=333.788.recommend_more_video.1
作用1：避免外边距重叠
2，清除浮动
3.阻止元素被浮动元素覆盖
什么是弹性布局
https://zxuqian.cn/css-flex-box-layout/
解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。
设为 flex 布局以后，子元素的 float、clear 和vertical-align属性将失效!!!
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;}
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;}
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;}
html5有哪些新特性？
- (1)
Canvas绘图 - (2)
SVG绘图 - (3)
地理定位 - (4)
Web Worker web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。- (5)
Web Storage - 1.Cookie技术 （ 兼容性好,数据不能超4kb,操作复杂）
- 2.（兼容性差,数据8MB,操作简单）sessionStorage
- 3.localStorage
- (6)
Web Socket - WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端
position有哪些属性？
1. position: relative;相对定位
2. position: absolute;绝对定位
3. position: fixed;固定定位
4. position:static：默认值
5. position: sticky 粘性定位
6. position: inherit 规定应该从父元素继承 position 属性的值
7. position: initial 设置该属性为默认值
rem
单位-最好的讲解视频：https://www.bilibili.com/video/BV1P7411C7EP?from=search&seid=4198260417738973952
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小(1rem),然后其他元素的长度单位就为rem。
此时1rem=16px（谷歌浏览器中）
em 元素用em的话是相对于该元素的font-size（没有则继承父元素，父元素没有一级一级往上，再么有就是继承根元素的。
vw/ vh
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
单页面 SPA
https://www.bilibili.com/video/BV16K411L7Jf?from=search&seid=752382537379208432
SPA是一种特殊的web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面。它将所有活动局限于一个web页面中，仅在该web页面初始化时加载相应的HTML、JavaScript、css。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。在SPA应用中，应用加载之后就不会再有整页刷新。
**优点：**用户体验好 、良好的前后端分离。
缺点：
- 1.不利于SEO,搜索引擎优化，。
- 2.初次加载耗时相对增多。
- 3.导航不可用，如果一定要导航需要自行实现前进、后退。
简述优雅降级与渐进增强
https://www.bilibili.com/video/BV1bh411D7zj?from=search&seid=13049239299903750535
1、渐进增强（progressive enhancement）
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2、优雅降级（graceful degradation）
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3、区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
b. 渐进增强观点认为应该关注于内容本身，这使得渐进增强成为一种更为合理的设计范例；优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。
解释下浮动和它的工作原理？清除浮动的方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1、使用空标签清除浮动
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2、使用after伪对象清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
#parent::after{
content:"";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3、溢出隐藏
overflow: hidden;
4.浮动外部元素
如何让一个盒子在页面垂直水平居中
方法一：已知宽高
div{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
方法二：未知宽高
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
前端性能优化方案
1、减少DOM操作 2、部署前，图片压缩，代码压缩 3、优化js代码结构，减少冗余代码 4、减少http请求，合理设置HTTP缓存 5、使用内容分发cdn加速 6、静态资源缓存 7、图片延迟加载
css选择器优先级顺序
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href="segmentfault.com"]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
什么是空元素？
即没有内容的HTML元素，例如：br、meta、hr、link、input、img
如何实现浏览器内多个标签页之间的通讯
1. 定时器setInterval + cookie
在页面A设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。
由于 Cookies 是在同域可读的，所以在页面 B 审核的时候改变 Cookies 的值，页面 A 自然是可以拿到的。
这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。
**2. 使用localstorage **
localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。
直接在window对象上添加监听即可：
window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))
onstorage以及storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。然后就是在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem('a', 'b')代码，同样是不会触发监听函数的。
为什么要初始化css样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
CSS3新增的伪类有哪些？
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
说说对canvas，svg，webgl的理解
- Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
- SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；
- WebGL（全写Web Graphics Library）是一种3D绘图标准，通俗说WebGL是canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，WebGL 主要用来做 3D 展示、动画、游戏。
解释csssprites，如何使用
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
伪类和伪元素的区别
- 伪类顾名思义就是在元素身上在添加类,在这个类上生成元素
- 伪元素：就是在元素的基础上再添加新的元素
- 伪类 一个: 伪元素两个 ::
- 伪类 种类比较多 伪元素种类少
- 伪类可以多个一块拼接
- 伪元素不能拼接
浏览器工作原理
- 用户界面 、2. 网络 、3. UI后端 、4. 数据存储 、5. 浏览器引擎 、6. 渲染引擎 、7. js解释器
| 
转播
