Finishing front-end interview questions-CSS

Finishing front-end interview questions-CSS

1. The difference between classes and IDs in CSS.

1. Differences in writing: the class name is defined by starting with ".", and the id name is defined by starting;
2. Differences in calling: On the same html page, the class can be called multiple times (in different places ). The id name as the tag is unique, and the id can only appear once on the page. Id is often used in js scripts to modify the attributes of a tag.
3. id is used as the element label to distinguish between different structures and content. As a style, class can be applied to any structure or content.
4. in terms of layout ideas, the general principle is that id first determines the structure and content of the page, and then defines the style for it: while the class is opposite, it first defines a type of style, then, apply the class style to different elements and content as needed on the page.
5. in actual applications, the class is more applied to text sections and page decoration, and the id is more used to achieve the magnificent layout and design of the Inclusion block, or the style of the Inclusion box.

2. What is the difference between "resetting" and "normalizing" CSS? How do you choose? Why?

Normalize is relatively "peaceful". It focuses on general solutions, resets the reset style, retains the useful user agent style, and fixes some bugs at the same time, which is lacking in reset.
Reset is relatively "violent", regardless of whether you use it or not, it is Reset to the same effect, and the impact scope is large, and cross-browser consistency is required. [From zhihu]
Normalize.css is an alternative to CSS reset. Their differences include:
1. Normalize.css protects valuable default values. Reset forces the elements to have the same visual effect by applying a default style to almost all elements. In contrast, normalize.css maintains many default browser styles. This means that you do not need to reset the style for all common typographical elements. When a element is on a different page view, normalize.css strives to keep these styles consistent and as consistent as possible with modern standards.
2. Normalize.css fixes the browser bug, which fixes Common Desktop and mobile browser bugs. This is often beyond the scope of Reset. In this regard, the problems fixed by normalize.css include the display settings of HTML5 elements, the font-size Problem of pre-formatted text, SVG overflow in IE9, and many forms related in various browsers and operating systems..
3.Normalize.css won't make your debugging tool messy
4. Normalize.css is modular.
5. Normalize.css has detailed documentation
Select normalize.css. The main reason is that reset.css applies the default style to almost all elements, so it is very troublesome to reset the style for all common typographical elements.

3. Please explain Floats and its working principles.

A: The float attribute defines whether or not the element is floating and in which direction it is floating. Any element in CSS can be floating,A floating element generates a block-level box, regardless of its own elements. In addition, the width of the box is determined based on the Content width.The floating attribute disconnects the floating element from the document stream. Therefore, the block boxes in the normal stream of the document behave as if the floating box does not exist.

4. describes how the z-index and overlay context are formed.

First, let's take a look at the reason for overlapping context in CSS:
1. negative margin
When margin is a negative value, the element is offset outward based on the reference line. The reference line of margin-left/margin-top is the element on the left/above (for example, the left inside/top inside the parent element if no sibling element exists ), the reference line of margin-right and margin-bottom is the right side of the border of the element. In general, you can use the negative margin for row layout, but if the calculation is not good, it may cause overlapping elements. The stack sequence is determined by the sequence of elements in the document, and those that appear later will appear above.
2. position relative/absolute/fixed Positioning
When the position value is set to relative/absolute/fixed for the element, the offset of the element may overlap and the z-index attribute is activated. The z-index value can control the stack order of positioning elements perpendicular to the display (Z axis ), elements with a large value overlap on elements with a small value.
Z-index attributes
Z-index is valid only for elements whose position attribute value is relative, absolute, or fixed.
Basic principle: the z-index value can control the stack order of positioning elements perpendicular to the display (Z axis ), elements with a large value overlap on elements with a small value.
Relativity: the z-index value only determines the stacking sequence of sub-elements of the same level in the same parent element. The z-index value of the parent element (if any) defines the stacking sequence for the child element (css stack "fight dad "). If the parent element containing the z-index value is not found, it can be regarded as a free z-index element, it can compare the value of z-index with the sibling positioning element of the parent element or other free positioning elements to determine the stack sequence. If the z-index values of the same-level elements are the same, the stack order is determined by the order of the elements in the document. So if you find that an element with a large z-index value is blocked by a smaller element, check the dom node relationship between them first, most of the reason is that its parent node contains the position element that activates and sets the z-index value.

5. Describe how BFC (Block Formatting Context) works.

The BFC (Block Formatting Context) literal translation is "Block-level Formatting range ".

6. Concepts and differences between block, inline and inline-block

First, this is the three attribute values in display, not the element type. Before HTML5, the element type is divided into two types: block-level elements) and inline elements ). However, when the value of the display attribute is set to block, the element will be displayed as a block-level element (block-level elements), and when it is set to inline, it will be displayed as inline elements.
Display: block
The block element excludes one row, and multiple block elements create a new row. By default, the block element width automatically fills the width of its parent element.
You can set the width and height attributes for the block element. A block-level element occupies only one row even if its width is set.
You can set the margin and padding attributes for the block element.
Display: inline
The inline element does not exclusive to a row. The elements in multiple adjacent rows are arranged in the same row, and the width of the inline element changes with the content of the element until the rows cannot be arranged.
The width and height attributes of the inline element are invalid.
The margin and padding attributes of the inline element. The paintding-left, padding-right, margin-left, and margin-right attributes in the horizontal direction all generate the margin effect, but the padding-top attribute in the vertical direction, padding-bottom, margin-top, and margin-bottom do not produce margin effects.
Display: inline-block
Simply put, the object is rendered as an inline object, but the content of the object is rendered as a block object. The Inline objects are arranged in the same row. For example, we can give a link (element a) inline-block attribute value so that it has both the width and height of the block and the characteristics of inline. That is, you can set the width and height of the inline-block element, and the inline-block element can be arranged in the same row.
Note: If the attribute is a space or line feed between inline-block elements, it will be a blank gap in the browser. IE6 and 7 do not support this attribute. You need to use * display: inline; * zoom: 1 for hack processing.

7. list different floating clearing techniques and indicate their applicable scenarios.

First, why do we need to clear the float?
When all the elements in a container are floating, the elements are moved out of the normal Document Stream. Therefore, for this container, there is no content to open it, and the background settings cannot be displayed, the margin settings cannot be displayed.
How to clear floating:
1. Add new elements, Application clear: both;
For example:

1

 
2  
3  
 
 
. Clear {clear: both; height: 0; line-height: 0; font-size: 0}
Advantages: simple, less code, good browser support, and not prone to strange problems
The disadvantage is that a lot of invalid la s need to be added, but this is a more useful method to clear floating.

 

2. Parent div defines overflow: auto or hidden
// A class is added here
1

 
2  
3  
 
. Over-flow {
Overflow: auto; zoom: 1; // zoom: 1; is dealing with compatibility issues
}
Principle: width or zoom: 1 must be defined, and height cannot be defined at the same time. When the overflow attribute is used to clear floating, note that the overflow attribute has three attribute values: hidden, auto, and visible. We can use the hiddent and auto values to clear the floating, but remember not to use the visible value. If this value is used, the floating clearance effect cannot be achieved.
Advantages: simple, less code, and good browser support
Disadvantage: When auto is used, the scroll bar appears when the internal width and height exceed the parent div, and hidden when hidden is used.

 

3. after Method
Principle: after and before are used to insert two element blocks inside the element to clear the floating surface. The implementation principle is similar to the clear: both method, but the difference is that clear inserts a div in html. clear label, and this method is to use its pseudo class clear: after to add a div-like inside the element. clear effect. Let's take a look at the specific usage:

1

 
2  
3  
 
. Outer {zoom: 1 ;}/ = For IE6/7 Maxthon2 =/
. Outer: after {clear: both; content: '.'; display: block; width: 0; height: 0; visibility: hidden ;}
Clear: both; indicates clearing all floating; content :'. '; display: block; it cannot be missing for FF/chrome/opera/IE8, and content () can be set to or empty. Visibility: hidden; allows the browser to render it, but does not display it, in order to clear the floating.
In general, we recommend that you use pseudo classes.

 

8. Please explain CSS sprites and how you can implement it on pages or websites.

It is often translated as "CSS image splicing" or "CSS texture positioning ".
CSS Sprites integrates some background images in a webpage into an image file, and then uses CSS's "background-image", "background-repeat ", the combination of "background-position" to locate the background. The background-position can be used to precisely locate the background image position.
Advantage: When a page is loaded, the entire combination of images is loaded at a time instead of each individual image. This is an amazing improvement. It greatly reduces the number of HTTP requests, reduces the pressure on the server, and shortens the time delay required to hover over and load images, making the effect smoother without stopping.
Disadvantage: It is troublesome to splice images.

9. What is your favorite image replacement method and how do you choose to use it.

The designer can use a background image to replace the original text in an element, in order to display a more beautiful font.
Implementation Method
I. Add a span tag
The implementation of this technique is very simple: Use span to enclose the text in the element, apply the CSS style to hide the text in the span, and then apply the background image to the element. For example, for the following HTMl Tag.
Ii. Negative text-indent Attribute Value
Designer Mike Rundle proposed a method to use the negative text-indent attribute value to push the text out of the left edge of the screen. Although this solution is not widely applied-IE 5.0 will launch the viewer's line of sight along with the text-but it is quite concise and elegant.
Disadvantage: it does not solve the problem of accessible blank pages after the browser disables images; sometimes it cannot be used in IE 5.0.

Meaning: Image Replacement Technology retains the original text in the replaced element. Therefore, understanding the page content is not a problem for any customer. The main consideration is SEO, rather than visual effects.

10. How do you solve the style issue of a specific browser?

This is a bit difficult to understand what you want to ask. At that time, it was better to ask cross-browser compatibility questions. CSS hack Method
1. IE condition Annotation
2. Issue the symbol prefix
3 .! Important Method

11. How to provide web pages for browsers with functional limitations? What technologies and solutions do you use?

Progressive enhancement of progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve the effects and interactions of advanced browsers and append functions to achieve a better user experience.
Elegant downgrade graceful degradation: build complete functions from the beginning, and then implement compatibility with earlier browsers.

12. What are the methods for hiding content (if the screen reader must be available at the same time )?

Method 1:display：none;The search engine may consider the hidden text to be spam and ignored. The screen reader is a program designed for visually impaired persons to read the screen content) the hidden text is ignored. Therefore, this method is not applicable.
Method 2:visibility: hidden ;We should be familiar with this, that is, the hidden content occupies the physical space that it should occupy. That is, although the content is hidden, the position of the Document Stream where it is located becomes blank, occupying the space on the page.
Method 3:overflow：hidden；It can hide content and be available to screen readers at the same time.
Method 4: remove content from the screen by positioning.
Method 5: Set content transparency to 0.

13. Have you used a grid system? If you have used it, which one do you like best?

 

14. Have you used media queries or layout/CSS for mobile terminals?

Media query is an enhancement of media type and an important part of CSS 3.
Media type)It is a very useful attribute in css 2. With media type, we can specify a specific style for different devices.
The media type we usually use will be all and screen, and then print.
Media type usage:
Method 1:

Method 2:
@import url("style.css") screen;
Method 3:

Method 4:
@media screen{
selector{rules}
}
The first and fourth methods are commonly used.
Media query: media query is the enhancement of media type in CSS 3. In fact, we can regard media query as media type + css attribute judgment.
For example: Http://www.jb51.net/css/27232.html
18. What are the advantages and disadvantages of using CSS preprocessors? Describe the advantages and disadvantages of the CSS Preprocessor you have used.

 

The three common CSS pre-processor frameworks are Sass, Less CSS, and Stylus.
CSS Preprocessor is a language used to add some programming features for CSS, without considering the compatibility of browsers, for example, you can use some basic skills in programming languages such as variables, simple program logic, and functions in CSS to make your CSS more concise and adaptable, code is more intuitive and many other benefits.
In summary, it is to write CSS styles using programming methods, rather than a line of code manually, which is equivalent to the evolution from the handicraft era to the industrial era.

19. If a non-standard font is used in the design, how do you implement it?

1. Use images instead.
2. Use the online font library.

css selector{
Font-family: “font name”, serif;}

20. How does the browser determine whether an element matches a CSS selector?