2018前端面试总结,看完弄懂,工资少说加3K

hulan 发布于 07-30 22:14 浏览:117 类型:原创 - 随笔 分类:HTML/CSS - comment 作者原创 版权保护

前端目录

  1. HTML相关
  2. CSS相关
  3. JAVASCRIPT相关
  4. DOM相关
  5. HTTP相关
  6. VUE相关
  7. 算法相关
  8. 网络安全相关
  9. webpack相关
  10. 其他

Html相关

1 html语义化

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
注意:
1.尽可能少的使用无语义的标签div和span;
2.在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3.不要使用纯样式标签,如:b、font、u等,改用css设置。
4.需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
5.使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
6.表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
7.每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

新标签:

 2 meta viewport相关

  H5标准声明,使用 HTML5 doctype,不区分大小写
 标准的 lang 属性写法
    声明文档使用的字符编码
   优先使用 IE 最新版本和 Chrome
       页面描述
      页面关键词
    网页作者
      搜索引擎抓取
 为移动设备添加 viewport
 iOS 设备 begin
  添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏

添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

  设置苹果工具栏颜色
  启用360浏览器的极速模式(webkit)
     避免IE使用兼容模式
    不让百度转码
     针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
   微软的老式浏览器
   uc强制竖屏
    QQ强制竖屏
              UC强制全屏
       QQ强制全屏
   UC应用模式
    QQ应用模式
    windows phone 点击无高光
设置页面不缓存


3 canvas 相关

使用前需要获得上下文环境,暂不支持3d
常用api:
    1.fillRect(x,y,width,height)实心矩形
    2.strokeRect(x,y,width,height)空心矩形
    3.fillText("Hello world",200,200);实心文字
    4.strokeText("Hello world",200,300)空心文字
各种东西!!!

新标签兼容低版本

  1. ie9之前版本通过createElement创建html5新标签
  2. 引入html5shiv.js

CSS相关

1.盒模型

1.ie盒模型算上border、padding及自身(不算margin),标准的只算上自身窗体的大小
css设置方法如下

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

2.margin、border、padding、content由外到里
3.几种获得宽高的方式

  • dom.style.width/height
      这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。
  • dom.currentStyle.width/height
      这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。但这种方式只有IE浏览器支持。
  • window.getComputedStyle(dom).width/height
      这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。
  • dom.getBoundingClientRect().width/height
      这种方式是根据元素在视窗中的绝对位置来获取宽高的
  • dom.offsetWidth/offsetHeight
      这个就没什么好说的了,最常用的,也是兼容最好的。

4.拓展 各种获得宽高的方式

  • 获取屏幕的高度和宽度(屏幕分辨率):
    window.screen.height/width
  • 获取屏幕工作区域的高度和宽度(去掉状态栏):
    window.screen.availHeight/availWidth
  • 网页全文的高度和宽度:
    document.body.scrollHeight/Width
  • 滚动条卷上去的高度和向右卷的宽度:
    document.body.scrollTop/scrollLeft
  • 网页可见区域的高度和宽度(不加边线):
    document.body.clientHeight/clientWidth
  • 网页可见区域的高度和宽度(加边线):
    document.body.offsetHeight/offsetWidth

5.边距重叠解决方案(BFC)
BFC原理

  • 内部的box会在垂直方向,一个接一个的放置
    每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
  • box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
  • bfc的区域不会与浮动区域的box重叠
  • bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
  • 计算bfc高度的时候,浮动元素也会参与计算
    创建bfc
  • float属性不为none(脱离文档流)
  • position为absolute或fixed
  • display为inline-block,table-cell,table-caption,flex,inine-flex
  • overflow不为visible
  • 根元素
    demo

这块margin-bottom:30px;

这块margin-top:50px;

 

标签:
z
给个赞 7 人点赞
收藏 0 人收藏
hulan 作者

这家伙什么都没留下

作者最新