CSS 面试题（基础部分）English

2018-02-24 本文已影响47人全栈开发之道

序言

HTML、 CSS、 JavaScript 是前端的三大法宝。其中， CSS 最为琐碎，虽说它不是一门编程语言，理解容易，在项目中，需要反反复复地修改。对CSS，需要有一个清晰的理解。
为此，准备了以下CSS的基础面试题。

CSS Interview Questions

A list of top frequently asked CSS interview questions and answers are given below.

1) What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites.

2) What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS.

3) What are the different variations of CSS?

Following are the different variations of CSS:

CSS1
CSS2
CSS2.1
CSS3
CSS4

4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

Inline method
Embedded/Internal method
Linked/Imported/External method

5) What are the advantages of CSS?

Bandwidth
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation

6) What are the limitations of CSS?

Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behavior
Rules, styles, targeting specific text not possible

7) What are the CSS frameworks?

CSS frameworks are the preplanned libraries which makes easy and more standard compliant web page styling.

8) Why background and color are the separate properties if they should always be set together?

There are two reasons behind this:

It enhances the legibility of style sheets. The background property is a complex property in CSS and if it is combined with color, the complexity will further increases.
Color is an inherited property while background is not. So this can make confusion further.

9) What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire style sheet in an HTML document by using the STYLE element.

10) What are the advantages of Embedded Style Sheets?

You can create classes for use on multiple tag types in the document.
You can use selector and grouping methods to apply styles in complex situations.
No extra download is required to import the information.

11) What is CSS selector?

It is a string that identifies the elements to which a particular declaration will apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements.

12) What is ruleset?

Ruleset is used to identify that selectors can be attached with other selectors. It has two parts:

Selector
Declaration

13) What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only a single element differing from other elements.

14) What are the advantages of External Style Sheets?

You can create classes for reusing it in many documents.
By using it, you can control the styles of multiple documents from one file.
In complex situations, you can use selectors and grouping methods to apply styles.

15) What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of code.

Embedded: Embedded style sheets are put between the <head>...</head> tags.

External: This is used to apply the style to all the pages within your website by changing just one style sheet.

16) What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don't need to create a different page for each device.

17) What are the benefits of CSS sprites?

: If a web page has large no. of images that takes a longer time to load because each image separately sends out an http request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.

18) What is the difference between logical tags and physical tags?

Physical tags are referred to as presentational mark-up while logical tags are useless for appearances.
Physical tags are newer versions on the other hand logical tags are old and concentrate on content.

19) What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

Margin
Border
Padding
Content

20) What is the float property of CSS?

The CSS float property is used to move the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it.

21) How to restore the default property value using CSS?

In short, there is no easy way to restore to default values to whatever a browser uses.

The closest option is to use the 'initial' property value, which will restore the default CSS values, rather than the browser's default styles.

22) What is the purpose of the z-index and how is it used?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.

23) Explain the difference between visibility: hidden and display: none?

visibility: hidden simply hides the element but it will occupy space and affect the layout of the document.

display: none also hides the element but will not occupy space. It will not affect the layout of the document.

24) What do you understand by W3C?

W3C stands for World Wide Web Consortium.

25) What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.

26) What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which is also known as modules.

Unlike CSS2, CSS3 modules are supported by many browsers.

参考书：《全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。