面试浏览器/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就能够了