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则会打乱时间线,融合成一个线性的提交,看起来比较简洁。