1. 盒模型
w3c盒模型: content-box width等于content的宽度
IE盒模型: border-box width等于content+padding+border的宽度
padding-box: width等于content+padding的宽度
2. BFC与margin穿透、margin折叠
BFC(块级作用域上下文),创建了新的BFC的盒子是独立的，盒子内元素的样式不会影响到外面的元素。
同一个BFC中，两个相邻的块状元素会在垂直方向上出现margin折叠。
解决方案：创建一个bfc
position: absolute;
overflow: hidden; 这个需要在父元素上使用
float: left;
display: inline-block; 这个比较完美。加上width: 100%;就跟之前没有区别
3. 垂直水平居中
1> 垂直居中：
内联元素 line-height等于行高
块级元素 display: flex; align-items: center;
position: absolute; top: 50%; transform: translateY(-50%);
2> 水平居中：
内联元素 text-align: center
块级元素 position: absolute; left: 50%; transform: translateX(-50%);
display: flex; justify-content: center;
margin:0 auto;
4. display:none与visibility:hidden的区别
display:none隐藏对应元素，在文档流中不再给他分配空间，各边的元素会合拢，即脱离文档流。
visibility:hidden隐藏对应元素，在文档流中仍保留原来的空间。
5. first-child与first-of-type的区别
p:first-child所有父元素的第一个元素是p的
p:first-of-type所有父元素的第一个p元素
6. 如何实现自适应布局
媒体查询做响应式页面
栅格系统
flex布局
7. 如何实现1物理像素？
pc端1css像素就是1物理像素。移动端的1css像素可能是多个物理像素。
移动端为了得到1物理像素，需要进行缩放处理，有两种方法：
利用视口的meta标签中的initial-scale进行缩放。页面加载完成后，根据设备的dpr来调整initial-scale的大小。但这样会导致所有的都会缩小。因此我们需要配合rem来使用。一般来说需要1物理像素的是边框，我们把宽高设置为rem，border设置为px。
或者利用媒体属性media，根据dpr来进行对应选择器的缩放。
8. 如何实现rem适配？
一般来说，把1rem=100px
但是，为了保证在不同屏幕上的比例相同。一般需要根据设备的宽度来决定1rem等于多少px.
比较大的屏幕有750px,我们把大于750px的等于750px.然后屏幕宽度/750 * 100即为1rem的大小。
9. 在使用transform变换后，原来的位置还会占据空间吗？
会。这是因为元素没有脱离文档流。原来的位置依然会占据空间。
为避免原来的位置占据空间，可以配合absolute使用。
10. 如何用css3画一个钟表
- 画表面，一个div，圆角50%
- 画刻度,ul里包li，根据li的索引旋转。从0度到360度。每隔5个，高度增加（相当于整点）
- 画指针,定义3个div，宽是1，高度自定义。作为指针
- 定义个函数，计算出当前时间的时，分，秒。根据时分秒，旋转时针分针秒针。且每隔1秒钟执行一次。
11. 常用的meta标签
<!-- 浏览器适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!-- 搜索引擎优化(SEO) -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<!-- 忽略自动识别为电话、邮箱 -->
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no">
12. 常见的浏览器兼容问题
不同浏览器的标签默认margin, padding不同。解决办法是 * { margin: 0; padding: 0; }
事件绑定不同。IE8以下:dom.attachEvent()，其他浏览器addEventListener('click', function(){})
阻止冒泡不同。IE8以下: e.cancelBubble = true, 其他浏览器e.stopPropagation()
发送ajax请求，IE6以下用的是ActiveXObject，其他浏览器xmlHttpRequest()
13. 从一个url地址到最终页面渲染完成，发生了什么？
1> 域名解析：将域名转换为ip地址
-- 浏览器dns缓存
-- 系统dns缓存
-- 路由器dns缓存
-- 网络运营商dns缓存
-- 递归搜索，首先是顶级域名，然后是二级域名，三级域名。搜索dns。如果还是找不到那只能 报错
2> 建立tcp连接，tcp三次握手
-- 第一次握手，浏览器发起，表示 想要建立连接
-- 第二次握手，服务器发送，表示 同意建立连接
-- 第三次握手，浏览器发送，表示 我要发送数据了
3> 发送请求
4> 接收响应
5> 渲染页面
-- 遇见html标记，会调用html解析器解析成token并构建成dom树
-- 遇见style/link标记，会调用css解析器，构建cssom树
-- 遇见script标记，会调用JavaScript解析器，处理script代码（绑定事件，修改dom树、cssom树）
-- 将dom树和cssom树，合并成一个渲染树
-- 根据渲染树计算布局，计算每个节点的几何信息（布局）。将各个节点颜色绘制到屏幕上（渲染）
这5个步骤不一定按照顺序执行，如何dom树或cssom树被修改了，可能会执行多次布局和渲染
往往在实际页面中，这些步骤都会执行多次
6> 断开tcp连接，4次挥手
-- 第一次挥手，浏览器发起，表示 想到终止连接
-- 第二次挥手，服务器发起，表示 收到了请求。但我这边还没有准备好。
-- 第三次挥手，服务器发起，表示 我这边准备好了，可以终止连接。
-- 第四次挥手，浏览器发起，表示 我收到了终止请求，可以终止连接了。
然后浏览器等待2MSL后依然没有收到回复，则证明Server端已正常关闭，然后就关闭连接。
14. 重绘和回流
重绘是当节点需要更改外观而不会影响布局的，比如改变color 就叫称为重绘.
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流.
15.性能优化
图片优化
不用图片，使用字体图标（iconfont等）代替
对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
使用精灵图
Webp格式，体积小
节流和防抖
预加载和懒加载
预渲染
按需加载
静态资源尽量使用CDN 加载
16. 降低页面加载时间的方法
css文件放在头部头部
js文件放在文件尾部
压缩CSS、JavaScript文件
合并CSS、JavaScript文件，减少http请求
把外部的CSS、JavaScript文件放在最底下
减少dom操作，尽可能用JavaScript对象操作代替不必要的dom操作（虚拟dom）
图标用iconfont等字体图标
17. http状态码
1xx: 表示请求已接收，继续处理
2xx: 表示请求成功
3xx: 重定向
4xx: 客户端请求错误
5xx: 服务端错误
400 Bad Request。客户端请求语法错误，不能被服务器所理解
401 Unauthorized。请求未授权
403 Forbidden. 服务器收到请求，但是拒绝提供服务
404 Not Found。 请求资源不存在
500 Internal Server Error。服务器发生不可预期的错误
503 Server Unavailable。 服务器当前不能处理客户端请求，一段时间后可能恢复正常。
18. 强制缓存与协商缓存的区别
强制缓存整体流程比较简单，就是在第一次访问服务器取到数据之后，在过期时间之内不会再去重复请求。实现这个流程的核心就是如何知道当前时间是否超过了过期时间。
协商缓存与强制缓存的不同之处在于，协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回 304 状态码，浏览器就读取本地缓存服务器中的数据。
19. 正向代理与反向代理的区别
正向代理是对客户端的代理，由客户端设立，客户端了解代理服务器和目标服务器，但目标服务器不了解真正的客户端是谁；使用正向代理可达到 突破访问限制、提高访问速度、对服务器隐藏客户端IP等目的；
反向代理是对服务器的代理，由服务器设立，客户端不了解真正的服务器是谁，使用反向代理可达到负载均衡、保障服务端安全、对客户端隐藏服务器IP等目的。
20. git pull与git fetch、git merge与git rebase
git pull相当于git fetch + git merge
git pull -r也就是git pull --rebase，相当于git fetch + git rebase
merge与rebase从效果上看没有任何区别，都是将不同分支代码合并到一起。就是生成的代码树稍有不同。merge结果能够体现出时间线，rebase则会打乱时间线，融合成一个线性的提交，看起来比较简洁。
网友评论