前端面试之浏览器/HTML/CSS问题

盒模型

盒模型主要两种，标准盒模型和怪异和模型

• 标准盒模型：width指content部分的宽度

• 怪异盒模型：width指content、padding、border的总宽度

• 解决方法：box-sizing属性，值为content-box（标准盒模型），值为border-box（怪异盒模型）

垂直居中方法

• 已知宽高，左上50%，坐上外边距缩进长宽一半的负值

div.box{     weight:300px;     height:400px;     position:absolute; 
     left:50%;     top:50%;     margin-left:-150px;     margin-top:-200px; } 

 

• 未知宽高，同上，将上面最后缩进使用transform：translate（-50% ，-50%）；

• flex布局（设置父容器）

div.father{ display:flex; justify-content:center; align-items:center; } 讲讲flex

父容器属性

• flex-direction : row(水平,左起)、row-reverse(水平，右起)、column（垂直，上起）、column-reverse（垂直，下起）

• flex-wrap : nowrap(不换行)、wrap（换行，第一行在上），wrap-reverse（换行，第一行在下）

• flex-flow ： 上面两个属性的缩写形式

• justify-content:flex-start(左对齐)，flex-end(右对齐)，center(居中对齐)，space-between（均匀分布），space-around(每个项目左右间隙相同，不发生重叠)

• align-items ： flex-start,flex-end,center,baseline(项目第一行文字基线对齐),stretch(若未设置高度，则占满整个高度)

项目属性

• order：排列顺序，数值越大越靠前

• flex：是(flex-grow, flex-shrink 和 flex-basis)三个属性的合并 flex-grow:项目放大比例。默认为0 flex-shrink:若超出，项目按比例缩小，默认为1 flex-basis:项目大小，默认为auto（即本来的大小）

• flex-self：项目单独的对齐的方式，可覆盖align-items属性

清除浮动问题：

overflow: hidden;元素后面加空标签，并设置clear：both（清除浮动）；给父元素设置宽高；利用伪元素

 .clear:after{     content:"";//内容为空     height:0;//高为0；    
  line-heght:0;//行高为0     dispaly:block;//转为块级元素     
 visibility:hidden;//将元素隐藏     clear:both;//清除浮动 } .clear{     zoom:1;//兼容IE } 

 

三栏布局

• 左右浮动，中间部分设置左右margin

行内元素？块级元素？

• 行内元素：a b span img input select strong

• 块级元素：div ul ol li dd dt h1-h6 p

html语义化标签

• 为什么语义化： 1.易修改，易维护； 2.无障碍阅读支持； 3.利于SEO

常见的兼容性问题

• 不同的浏览器默认margin和padding不同。

• 块元素float后，有横向的margin。解决方式：设置成行级元素（inline）

display：none与visibility:hidden区别： 前者不占用空间，也就是none没了，后者只是隐藏起来，依旧占用空间。 bfc规范： 说说他有什么特性可以解决什么问题：

• 特性1：垂直方向的距离由margin决定，同一个BFC内的元素的margin会叠加（注意是叠加，而不是重叠），相邻的两个独立BFC才会重叠。

• 特性2：计算BFC元素高度时，浮动元素也会进行计算，可以解决浮动塌陷的问题，方法时overflow不为visible即可。

浏览器如何解析css节点？

• css树左面是父节点，向由依次时此父节点的分支子节点，浏览器解析时是从右面的子节点开始向左面父节点一步步解析的

• 原因：每一个子节点只有一个父节点，每次查找都会成功，可每个父节点不单单一个子节点，可能有多个，在查找时，可能存在不匹配的情况，浪费时间。

元素竖向百分比设置相对于父元素的宽度，而不是高度。 li与li之间的空格是怎么引起的？如何消除？

• 行元素的排列会受到中间空格的影响，因为中间空格也算字符，所以会导致空格的出现。只需把字符大小设置成0就消除了。

浏览器是如何渲染界面的？

• 在服务器获取html文档（少一次http请求）

• 解析文档构建dom树、css树（主要是结构）

• 构建渲染树（将css规则渲染到dom树上，主要是色彩）

• 布局（发生重构和重绘）

http状态码

• 1开头的（表示临时响应）

• 2开头的（表示成功）

• 200：服务器成功处理

• 204：收到请求，但返回空信息（区别于304）

 

• 3开头的（代表重定向类）

• 300：请求资源可在多处得到

• 304：请求内容未发生变化，继续使用缓存（当协商缓存时放回304，继续使用强缓存内容）

 

• 4开头的（客户端错误）

• 403：拒绝访问（例如你的github链接设置自己可见，当别人点击你的GitHub链接会返回404）

• 404：这个是最常见的，访问内容不存在。

 

• 5开头的（服务端错误）

• 500：服务器内部错误

 

如何实现一个浏览器内多个标签通信

• websocket：这是一种全双工通信（双方都可发送可接受），可实现标签之间的通信。

• localstorage：本地缓存，可理解为多个标签公用的存储空间，

如何对网站文件资源进行优化

• sprites合并图片

• cdn内容分发（因为单次对某一个存储文件和资源的站请求文件的数量的大小是一定的，一次只能请求部分文件，需要返回文件再次请求，这样多次请求时间的叠加会浪费时间。如果采用cdn分发，文件和资源会分别保存在多个站点，我们可以一次对多个站点同时发送请求，这样节省时间，就时费带宽。）

• 使用缓存

• 压缩文件

• 减少dom操作

常见的兼容性问题

• 默认margin、padding不同

• IE双边距：快属性float后，IE显示的margin比设置的大，解决办法是转换为行元素

• chrome中小于12px的文本按照12px处理

前端性能优化

• 减少http请求：

• 合并js文件

• 合并css文件

• 雪碧图（将页面使用的图片合并成一张图片，使用时使用定位 ）

 

• 减少资源体积

• js压缩

• css压缩

• 图片压缩

 

• 缓存

• DNS缓存

• CDN部署

• http缓存

 

• 移动端优化

• 首屏优化

 

• 渲染和操作dom

• css放在头部，js放在尾部

• 避免频繁操作dom

 

• 数据处理方面

• 图片预加载

• 图片懒加载

 

前端需要注意哪些SEO

• 语义化标签

• 提高网站速度

• 非装饰性图片要加alt

• 重要内容放在前面

• 合理的title、description、keywords

canvans和SVG区别

• svg所绘制出来的图形都是独立的dom节点，便于绑定事件或修改，canvans就是一整个画布

• svg是矢量图形，放大或缩小不失真，canvans反之，

说说css3的flex

• 传统布局中块元素是垂直排列，行元素水平排列，flex弹性布局摆脱了这种限制，可以干小的进行空间分配，对齐和布局。

浏览器兼容问题

• 不同浏览器默认margin，padding不同，可初始化css样式

• IE双边距，设置为inline

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

li之间存在的空白格

• 因为li之间存在空格，空格也算一个字符，所以会有间隔，把字符大小设置成为0就可以了

总结

大家有什么要说的，欢迎在评论区留言

对了，小编为大家准备了一套2020最新的web前端资料，需要点击下方链接获取方式

1、点赞+评论（勾选“同时转发”）

学习前端，你掌握这些。二线也能轻松拿8K以上