IMWeb提升营Day7

今日早报

• 大数据协同安全技术国家工程实验室揭牌，360牵头承建。
• Connecterra（一家荷兰的农业科技公司，主要研发用于奶牛身上的电子设备）获得180万美元投资，利用AI技术，融入机器学习，软硬件配合共同实时监测牲畜的健康情况
• DeepMind团队（这两天怎么老是上头条）发布博客

前端常见题目

问题1: display:none和visibility:hidden的区别

• display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
• visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

问题2: position的absolute与fixed共同点与不同点

• A：共同点：

  • 1.改变行内元素的呈现方式，display被置为block；
  • 2.让元素脱离普通流，不占据空间；
  • 3.默认会覆盖到非定位元素上

• B不同点：

  • absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
  • 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

问题3: CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

• CSS 选择符：

  • 1.id选择器(# myid)
  • 2.类选择器(.myclassname)
  • 3.标签选择器(div, h1, p)
  • 4.相邻选择器(h1 + p)
  • 5.子选择器(ul > li)
  • 6.后代选择器(li a)
  • 7.通配符选择器( * )
  • 8.属性选择器(a[rel = “external”])
  • 9.伪类选择器(a: hover, li:nth-child)

• 可继承的样式：

  • 1.font-size
  • 2.font-family
  • 3.color
  • 4.text-indent

• 不可继承的样式：

  • 1.border
  • 2.padding
  • 3.margin
  • 4.width
  • 5.height

• 优先级算法：

  • 1.优先级就近原则，同权重情况下样式定义最近者为准;
  • 2.载入样式以最后载入的定位为准;
  • 3.!important> id > class > tag
  • 4.important 比 内联优先级高，但内联比 id 要高

• CSS3新增伪类举例：

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
  • p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
  • p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
  • :enabled:disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

问题4：你知道多少种Doctype文档类型？

• 1.该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
• 2.HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
• 3.XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
• 4.Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

前端常见题目个人思考题：

1、请说出三种减少页面加载时间的方法

• 优化图片像素或大小
• 减少http请求（合并文件、合并图片）
• 压缩JavaScript、CSS代码

2、哪些操作会造成内存泄漏？

• 1.IE7/8 DOM对象或者ActiveX对象循环引用导致内存泄漏
  
  • .标记清除，js中最常用的垃圾回收方式就是标记清除
• 2.基础的DOM泄漏
  
  • DOM 插入顺序导致内存泄漏
• 3.timer定时器泄漏

http://www.tuicool.com/articles/ZjAv2eR