1. 程式人生 > >多益網路筆試題(前端工程師)

多益網路筆試題(前端工程師)

1 寫出inline和inline-block的差別:

佈局方式相同,唯一的區別在inline-block可以設定寬高,inline不可以。另外:inline設定上下內邊距和上下外邊距會造成一些mess。詳見:

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:

  • opacity
.hide {
  opacity: 0;
}

佔據空間,可以響應使用者互動,可以有動畫。

  • visibility
.hide {
   visibility: hidden;
}

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

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;
}

不佔據空間,響應互動

6 jQuery中live,bind,on,delegate的區別

  • 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元素上。