多益网络笔试题(前端工程师）

多益网络笔试题(前端工程师）

2017年08月30日 22:48:13

阅读数：2521

1 写出inline和inline-block的差别：

布局方式相同，唯一的区别在inline-block可以设置宽高，inline不可以。另外：inline设置上下内边距和上下外边距会造成一些mess。详见：

What is the difference between display: inline and display: inline-block?

2 写出五大主流浏览器的内核名称

简要介绍主流浏览器的内核

3 根据具体的情景写出一个JSON数据

知道JSON数据怎么写，了解JSON数据和JS对象的区别就可以，很简单。

4 考察字体大小的单位：rem,em,百分比

看了官方文档，才知道我对这些概念了解不深。

• em:

  Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven’t set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

  In order to calculate the em equivalent for any pixel value required, you can use this formula:

  em = desired element pixel value / parent element font-size in pixels

  核心观点: 
  可以复合计算，当前元素的一个em值的大小等于父元素的字体大小（如果父元素被定义了字体大小，递归找父元素），否则等于浏览器一般默认的16px

• rem

  rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

  核心观点：避免em的复合计算，相对root html元素的大小。

• length-percentage

  A positive length or percentage value. When the units of length values are specified in em or ex, the size is defined relative to the size of the font on the parent element of the element in question. For example, 0.5em is half the font size of the parent of the current element. When the units are specified in rem, the size is defined relative to the size of the font used by the html (root) element.

  percentage values refer to the parent element’s font size.

  It is best to use values that are relative to the user’s default font size, and avoid absolute values such as lengths with units other than em or ex. However, if such absolute values must be used, px are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.

百分比： 
可以复合计算。请读者自行去查阅文档。

5 隐藏元素的N种方式

reference:

Five Ways to Hide Elements in CSS

• opacity

.hide {
  opacity: 0;
}

• 1
• 2
• 3

占据空间，可以响应用户交互，可以有动画。

• visibility

.hide {
   visibility: hidden;
}

• 1
• 2
• 3

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

占据空间，但是不响应用户交互，可以有动画。

display

display: none

• 1

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

不占据空间，不响应交互，没有动画。

• Position

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

• 1
• 2
• 3
• 4
• 5

不占据空间，响应交互

6 jQuery中live,bind,on,delegate的区别

详见：Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

• to be continued

7 如何去除img元素底部的空白

详见：元素底部为何有空白？

补充一下：line-height为什么直接设置在img上

The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

如果要通过改变font-size=0,从而实现设置line-height的目的，那么font-size也不能设置在img元素上。

 

 

转载网址：https://blog.csdn.net/huangpin815/article/details/77726753