前端基础-HTML,CSS,浏览器相关面试题汇总

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画一个钟表

  1. 画表面,一个div,圆角50%
  2. 画刻度,ul里包li,根据li的索引旋转。从0度到360度。每隔5个,高度增加(相当于整点)
  3. 画指针,定义3个div,宽是1,高度自定义。作为指针
  4. 定义个函数,计算出当前时间的时,分,秒。根据时分秒,旋转时针分针秒针。且每隔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则会打乱时间线,融合成一个线性的提交,看起来比较简洁。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容