Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "what are the classic interview questions of CSS?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the classic interview questions of CSS?"

1. Introduce the standard box model of CSS? How is it different from the box model of the earlier version of IE?

Standard box model: width = content width (content) + border+padding + margin lower version IE box model: width = content width (content+border+padding) + margin

2. Box-sizing attribute?

The parsing mode used to control the box model of the element defaults to the standard box model of content-boxcontext-box:W3C, and setting the height/width attribute of the element refers to the high / wide border-box:IE traditional box model of the content section. Setting the height/width attribute of an element refers to the height / width of the border + padding + content section

3. What are the CSS selectors? Which attributes can be inherited?

CSS selector: id selector (# myid), class selector (.myclassname), tag selector (div, H2, p), adjacent selector (H2 + p), sub selector (ul > li), descendant selector (li a), wildcard selector (*), attribute selector (a rel = "external"]), pseudo class selector (a:hover, li:nth-child)

Inheritable properties: font-size, font-family, color

Non-inheritable styles: border, padding, margin, width, height

Priority (nearest principle):! important > [id > class > tag]! important has higher priority than inline

4. How to calculate the CSS priority algorithm?

Element selector: 1class selector: 10id selector: 100element tag: 1000! the style declared by important has the highest priority, and it will be calculated in case of conflict. If the priority is the same, select the last style that appears. Inherited styles have the lowest priority.

5. What are the new pseudo classes in CSS3?

P:first-of-type selects the first element that belongs to its parent element p:last-of-type selects the last element that belongs to its parent element p:only-child selects the only child element that belongs to its parent element p:nth-child (2) selects the second child element that belongs to its parent element: the disabled state of the enabled: disabled form control. The checked radio box or check box is selected.

6. How to center the div? How to center a floating element? How to center the absolute positioning div?

Div:border: 1px solid red;margin: 0 auto;height: 50pxash width: 80px

The floating element is centered from top to bottom: border: 1px solid red;float: left;position: absolute;width: 200pxposition height: 100pxposition height: left: 50% position top: 50% position margin:-50px 00-100px

Absolute positioning left and right center: border: 1px solid black;position: absolute;width: 200px position height: 100px position margin: 0 auto;left: 0 politics right: 0

7. What are the values of display? Explain their role?

Inline (default)-inline none- Hidden block- Block Show table-tabular display list-item- Project list inline-block

8. The value of position?

Static (default): arranged according to the normal document stream; relative (relative positioning): do not deviate from the document stream, refer to its own static position through top, bottom, left, right positioning; absolute (absolute positioning): reference to the nearest parent element that is not static through top, bottom, left, right positioning; fixed (fixed positioning): the fixed reference object is the visual window.

9. What are the new features of CSS3?

RGBA and transparency background-image background-origin (content-box/padding-box/border-box) background-size background-repeatword-wrap (wrapping long inseparable words) word-wrap:break-word text shadow: text-shadow: 5px 5px 5px # FF0000 (horizontal shadow, vertical shadow, blur distance, shadow color) font-face attribute: define your own font fillet (border radius): border-radius property is used to create fillet border Picture: border-image: url (border.png) 30 30 round box Shadow: box-shadow: 10px 10px 5px # 888888 Media query: define two sets of css, different attributes will be used when the size of the browser changes

10. Please explain the flexbox (elastic box layout model) of CSS3 and the applicable scenarios.

The purpose of this layout model is to provide a more efficient way to layout, align, and allocate space for items in the container. In traditional layouts, block layouts arrange blocks vertically from top to bottom, while inline layouts are arranged horizontally. The elastic box layout does not have such inherent directional restrictions and can be operated freely by the developer. Trial scenario: flexible layout is suitable for mobile front-end development and is also perfectly supported on Android and ios.

11. What is the principle of creating a triangle with pure CSS?

First, you need to set the width and height of the element to 0. Then set the border style.

Width: 0 40px solid transparent;border-right height: 0 bordermuri top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid # ff0000

12. How to design a full screen word layout?

The first real character: the height and width of the three blocks are determined; the top piece is centered with margin: 0 auto;; the bottom two pieces are not wrapped with float or inline-block; and the position is adjusted with margin to center them. The second full-screen character layout: the div on the top is set to 100%, the div below is 50% wide, and then use float or inline to keep it from wrapping.

13. Common compatibility issues?

The default margin and padding for tags in different browsers are different. * {margin:0;padding:0;} IE6 bilateral distance bug: after the block attribute tag float, when there is a horizontal margin, the margin display in IE6 is larger than the set one. Hack:display:inline; converts it to an inline attribute. The way of progressive recognition gradually excludes the local part from the whole. First, cleverly use the "9" tag to separate IE browsers from all situations. Then, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been identified independently.

{background-color:#f1ee18;/ all recognition / .background-color:#00deff\ 9; / IE6, 7, 8 recognition / + background-color:#a200ff;/IE6, 7 recognition / _ background-color:#1e0bd1;/IE6 recognition /} set a smaller height label (generally less than 10px), and the height in IE6,IE7 exceeds the height you set. Hack: set overflow:hidden; for labels that exceed height or set row height line-height less than the height you set. Under IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute () to obtain custom attributes; under Firefox, you can only use getAttribute () to get custom attributes. Solution: get custom attributes uniformly through getAttribute (). Text smaller than 12px is forced to be displayed according to 12px by default in the Chrome Chinese interface, which can be solved by adding the CSS attribute-webkit-text-size-adjust: none;. The hover style no longer appears after the hyperlink is accessed, and the hyperlink style that has been clicked to no longer has hover and active. The solution is to change the order of the CSS attributes: L-V-H-A (love hate): a:link {} a:visited {} a:hover {} a:active {}

14. Why initialize the CSS style

Due to browser compatibility problems, different browsers have different default values for some tags, and page display differences between browsers often occur if there is no initialization of CSS.

15. How is the containing block calculation method of absolute different from that of normal flow?

No matter which one you belong to, you should first find the element whose ancestral element has the nearest position value that is not static, and then judge:

If this element is an inline element, containing block is the smallest rectangle that can contain the padding box (except margin, border) of the first and last inline box generated by this element; otherwise, it consists of the padding box of this ancestor element. Initial containing block if none can be found.

Add:

Static (default) / relative: simply the content box of its parent element (that is, the part that removes the padding) absolute: look up to the nearest element positioned as absolute/relative fixed: its containing block is always the root element (html/body)

16. Does the visibility attribute in CSS have a collapse attribute value? What's the difference between different browsers?

When the visibility attribute of an element is set to the collapse value, it behaves the same as hidden for a normal element.

In chrome, there is no difference between using collapse values and using hidden. Firefox,opera and IE, there is no difference between using collapse values and using display:none.

17. What is the difference between display:none and visibility:hidden?

Display:none does not show the corresponding elements, no space is allocated in the document layout (reflow + redraw) visibility:hidden hides the corresponding elements, and still retains the original space (redraw) in the document layout

18. What happens when position is superimposed with display, overflow, and float?

The display attribute specifies the type of box that the element should generate; the position attribute specifies the positioning type of the element; and the float attribute is a layout that defines the direction in which the element floats. Similar to the priority mechanism: position:absolute/fixed has the highest priority, when they are present, float does not work, and the display value needs to be adjusted. Elements positioned by float or absolute can only be block elements or tables.

19. Understanding of the BFC specification (block-level formatting context: block formatting context)?

BFC specifies how the internal Block Box is laid out. Positioning scheme: the internal Box will be placed one after another vertically. The vertical distance of the Box is determined by the margin, and the margin of two adjacent Box belonging to the same BFC will overlap. The left side of the margin box of each element touches the left side that contains the block border box. The area of BFC does not overlap with float box. BFC is an isolated container on the page, and the child elements inside the container do not affect the outer elements. Floating elements also participate in the calculation when calculating the height of the BFC. BFC can be triggered if one of the following conditions is met

Root element, that is, the value of htmlfloat is not none (default) the value of overflow is not visible (default) the value of display is inline-block, table-cell, the value of table-captionposition is absolute or fixed

20. Why is there a float and when do I need to clear it? How to clear the float?

The floating element encounters the border containing it or the border of the floating element. Because the floating element is not in the document stream, the block box of the document stream behaves as if the floater does not exist. The floating element floats on the block box of the document stream. Problems caused by floating:

The height of the parent element cannot be stretched, and non-floating elements (inline elements) that affect the same level of the parent element as the floating element will follow. If not the first element floats, then the element before that element also needs to float, otherwise it will affect the structure of the page display. How to clear the float:

The parent div defines the last floating element of the height, followed by an empty div tag and a style clear:both. The parent tag that contains the floating element adds the style overflow to hidden or auto. Parent div defines zoom

21. The problem of coincidence of upper and lower margin

Wraps a container around the coincident element and triggers the container to generate a BFC. Example:

.aside {margin-bottom: 100px; width: 100px; height: 150px; background: # F66;} .main {margin-top: 100px; height: 200px; background: # fcc;} .text {/ * the box main wraps a div, and by changing the properties of the div so that the two boxes belong to two different BFC, to prevent the margin from overlapping * / overflow: hidden; / / the BFC attribute has been triggered at this time. }

22. After setting the element to float, what is the display value of the element?

Automatically become display:block

23. Has the layout of the mobile terminal been queried by media?

Through media query, different css can be defined for different sizes and sizes of media to adapt to the display of the corresponding devices.

24. What's the difference between style tags written after body and before body?

The page loads from top to bottom, of course, loading styles first. Write after the body tag because the browser parses the HTML document line by line, when parsing to the stylesheet written at the end (external or written in the style tag) will cause the browser to stop rendering before, wait for the stylesheet to be loaded and parse the stylesheet and re-render, FOUC phenomenon may occur under the IE of windows (that is, page flicker caused by style failure)

25. What are the ways to optimize and improve the performance of CSS?

Avoid excessive constraints avoid descendant selectors avoid chained selectors use compact syntax avoid unnecessary namespaces avoid unnecessary repetition it is best to use names that represent semantics. A good class name should describe what it is rather than what to avoid! Important, you can choose other selectors to simplify the rules as much as possible, and you can merge repetitive rules from different kinds.

26. How does the browser parse the CSS selector?

The resolution of the CSS selector is parsed from right to left. If you match from left to right, it is found that it does not meet the rules and needs to be backtracked, which will lose a lot of performance. If we match from right to left, we first find all the rightmost nodes, and for each node, we find its parent node until we find the root element or the matching rule that satisfies the condition, then the traversal of the branch is ended. The performance of the two matching rules is very different because the right-to-left matching filters out a large number of ineligible rightmost nodes (leaf nodes) in the first step, while the performance of left-to-right matching rules is wasted on failed lookups. After the CSS parsing is finished, we need to analyze the results of the parsing together with the contents of the DOM Tree to build a Render Tree, which is finally used for drawing. When establishing a Render Tree (the "Attachment" process in WebKit), the browser determines what kind of Render Tree is generated based on the parsing result (Style Rules) of the CSS for each element in the DOM Tree.

27. Should I use odd or even fonts on the web page? Why?

Use even fonts. Even font sizes are relatively easy to scale with other parts of the web design. Windows's own lattice Song style (Zhongyi Song style) only provides 12, 14 and 16 px dots from Vista, while a smaller dot is used for 13, 15 and 17 px. (that is, each word takes up 1 px more space, but the lattice remains the same), so it is slightly sparse.

What scenarios are suitable for 28, margin and padding respectively?

When to use margin:

When you need to add white space on the outside of the border, you do not need the white space between the two boxes connected up and down the background color, and you need to cancel each other out. When to use padding:

Need to add white space on the inside of the border requires the white space of two boxes connected up and down the background color, hopefully the sum of the two. Compatibility issues: in IE5 IE6, when you specify margin for float's box, the margin on the left may become twice as wide. Solve by changing the padding or specifying the display:inline of the box.

29. Is the vertical percentage of the element set relative to the height of the container?

When setting the width of an element as a percentage, it is calculated relative to the width of the parent container, but for attributes that represent vertical distances, such as padding-top, padding-bottom, margin-top, margin-bottom, and so on, when they are set as a percentage, they are also based on the width of the parent container, not the height.

30. What is the principle of full screen scrolling? Which attributes of CSS are used?

Principle: it is a bit similar to carousel, where the overall elements are arranged all the time. Suppose there are five full-screen pages that need to be displayed, then the height is 500%, only 100% is displayed, and the rest can be positioned on the y-axis through transform, or overflow:hidden;transition:all 1000ms ease can be achieved through margin-top.

31. What is responsive design? What is the basic principle of responsive design? How to be compatible with earlier versions of IE?

Responsive website design (Responsive Web design) is a website that is compatible with multiple terminals, rather than making a specific version for each terminal. The basic principle is to detect the screen size of different devices through media query. The header of the page must have a viewport declared by meta.

32. Parallax scrolling effect?

Parallax scrolling (Parallax Scrolling) creates an amazing 3D effect by controlling that the background moves more slowly than the foreground as the page scrolls down.

CSS3 implementation has the advantages of short development time, good performance and development efficiency, but the disadvantage is that it is not compatible with the lower version of browser jQuery to control the scrolling effect by controlling the scrolling speed of different layers, calculating the time of each layer and controlling the scrolling effect. Advantages: can be compatible with various versions, the effect is controllable, disadvantages: developed to require high plug-in implementation methods such as: parallax-scrolling, compatibility is very good

What is the difference between double colons and single colons in 33,:: before and: after? Explain the role of these two pseudo elements.

A single colon (:) is used for CSS3 pseudo-classes, and a double colon (::) is used for CSS3 pseudo-elements. :: before is a pseudo element defined in front of the main content of an element in terms of the existence of a child element. Does not exist in the dom, only in the page. : before and: after, these two pseudo elements, are new in CSS2.1. At first, the prefix of pseudo elements used single colon syntax, but with the evolution of Web, in the CSS3 specification, the syntax of pseudo elements was modified to use double colons to:: before:: after

34. How do you understand line-height?

Line height refers to the height of a line of text, specifically the distance of the baseline between two lines of text. Height and line-height play a high role in CSS, there is no definition of height attribute, and in the end, its expression must be line-height. Vertical centering of single-line text: setting the line-height value to the same size as height can achieve the vertical center of single-line text, but you can also delete the height. Multiline text is centered vertically: you need to set the display property to inline-block.

35. How to make Chrome support text smaller than 12px?

P {font-size:10px;-webkit-transform:scale (0.8);} / / 0.8 is the scaling factor

36. How to make the font on the page clearer and thinner with CSS?

-webkit-font-smoothing does not work on window, but works on IOS devices-webkit-font-smoothing:antialiased is the best and grayscale smoothing.

37. CSS attribute overflow attribute defines what to do with the content of the overflow element content area?

When the parameter is scroll, a scroll bar must appear. When the parameter is auto, a scroll bar appears when the content of the child element is larger than the parent element. When the parameter is visible, the overflow occurs outside the parent element. The overflow is hidden when the parameter is hidden.

38. If you need to write animation manually, how long do you think the minimum time interval is and why?

The default frequency of most monitors is 60Hz, that is, 60 refreshes per second, so the theoretical minimum interval is 1/60*1000ms = 16.7ms.

39. What is the reason for the invisible gap between li and li? Is there any solution?

The arrangement of line boxes will be affected by the middle space (carriage return space), etc., because spaces also belong to characters, and these spaces will also be styled and occupy space, so there will be intervals. If the character size is set to 0, there will be no spaces. Solution:

You can write all the code in a row of floating li. Float:left uses font-size:0 in ul (not supported by Google); you can use letter-space:-3px

When will the 40 display:inline-block show the gap?

There will be gaps when there are spaces: remove spaces when margin positive values: margin uses negative values when using font-size: font-size:0, letter-spacing, word-spacing

The above is about the content of this article "what are the classic interview questions of CSS?" I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.