Summary of CSS interview knowledge points (continuous update...)

1. What is the standard CSS box model? What is the difference between the box model of lower versions of IE?

• There are two box models: IE box model (border-box), W3C standard box model (content-box)
• Box model: divided into four parts: content, padding, margin, and border

The difference between IE box model and W3C standard box model:

(1) W3C standard box model: the attributes width and height only contain content, not border and padding
(2) IE box model: the attributes width and height include content, border and padding, which refers to content
+ padding + border.

Answer: The
box model is composed of four parts, respectively margin、border、padding和content.

The difference between the standard box model and the IE box model is that when the width and height are set, the corresponding ranges are different. The range of the width and height attributes of the standard box model only includes content, while the range of the width and height attributes of the IE box model includes border, padding, and content.

We can change the box model of the element by modifying the box-sizing attribute of the element.

---

2. What are the CSS selectors?

(1) id selector (#myid)
(2) class selector (.myclassname)
(3) label selector (div, h1, p)
(4) descendant selector (h1 p)
(5) adjacent descendant selection Selector (sub) selector (ul>li)
(6) Brother selector (li~a)
(7) Adjacent brother selector (li+a)
(8) Attribute selector (a[rel="external"] )
(9) Pseudo-type selector (a:hover, li:nth-child)
(10) Pseudo element selector (::before, ::after)
(11) Wildcard selector (*)

---

What is the difference between a double colon and a single colon in ::before and :after? Explain the role of these two pseudo-elements.

In the CSS3 单冒号（:）for CSS3 pseudo-classes, 双冒号（::）for CSS3 pseudo-elements. (Pseudo-elements are composed of double colons and pseudo-element names). In order to be compatible with existing pseudo-element writing, single colons can also be used to represent pseudo-elements in some browsers.

Pseudo-classes generally match some special states of elements, such as hover, link, etc., while pseudo-elements generally match special positions, such as after, before, etc.

• If you want the inserted content to appear before other content, use ::before, otherwise, use ::after;
• In terms of code order, the content generated by ::after is also later than the content generated by ::before.
• If you follow the stack perspective, the content generated by ::after will be on top of the content generated by ::before.

---

4. The difference between pseudo-classes and pseudo-elements

CSS introduces the concept of pseudo-classes and pseudo-elements to format information outside the document tree. In other words, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, for example,
the first letter in a sentence , or the first element in a list.

Pseudo-classes are used to add corresponding styles to existing elements when they are in a certain state. This state changes dynamically according to user behavior. For example, when the user hovers over a specified element, we can use :hover to describe the state of this element.

Pseudo-elements are used to create some elements that are not in the document tree and add styles to them. They allow us to style certain parts of the element.For example, we can add some text before an element through ::before, and add styles to these texts. Although the user can see the text, the text is not actually in the document tree.

---

5. Which properties in CSS can be inherited?

Inheritable attributes:

(1) Font family attributes
font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust

(2) Text series attributes:
text-indent, text-align, text-shadow, line-height, word-spacing, letter-spacing,
text-transform, direction, color

(3) Table layout attributes
caption-side border-collapse empty-cells

（4）列表属性
list-style-type、list-style-image、list-style-position、list-style

(5) Cursor attribute
cursor

(6) Element visibility
visibility

(7) There are also some not commonly used; speak, page, set the quotation mark type of nested quotation and other attributes

When an inherited attribute of an element does not have a specified value, the calculated value of the same attribute of the parent element is taken. Only the document root element takes the initial value given in the overview of the attribute (the meaning here should be the default value in the definition of the attribute itself).

When a non-inherited attribute of the element does not have a specified value, the initial value of the attribute is taken as the initial value(The value is specified in the overview of the attribute).

Note: When an attribute is not inherited, you can use inheritkeywords to specify that an attribute should inherit its value from the parent element. inheritKeywords are used to explicitly specify inheritance and can be used for any inherited/non-inherited attributes.

---

6. How is the CSS priority algorithm calculated?

The priority of CSS is judged based on the particularity value of the style declaration.

The specificity value of the selector is divided into four levels, as follows:

(1) In-tag selector x,0,0,0
(2) ID selector 0,x,0,0
(3)class selector/attribute selector/pseudo-class selector 0,0,x,0
( 4) Element and pseudo element selector 0,0,0,x

Calculation method:

(1) The initial value of each level is 0
(2) The superposition of each level is the addition of the number of times the selector appears, and it cannot be carried, such as 0,99,99,99. In turn, expressed as: 0,0,0,0
(3) There is no correlation between the counts of each level, and the level judgment is from left to right. If the value of a certain digit is the same, the next value is judged
(4) The wildcard selector The particularity value is: 0,0,0,0. If the two priorities are the same, the last one has the highest priority, and !important is also applicable; the inherited style has the lowest priority, and the wildcard style has a higher priority than the inherited style
(5)!important (weight), it has no special value, but Its priority is the highest. In order to facilitate memory, it can be considered that its special value is 1,0,0,0,0.

Calculation example:

(1) #demo a{color: orange;}
Special value: 0,1,0,1
(2) div#demo a{color: red;}
Special value: 0,1,0,2

The comparison of the specificity values ​​of selectors is sorted from left to right, which means that the specificity values ​​starting with 1 are greater than all the specificity values ​​starting with 0.

---

7. What is the explanation of the pseudo-type LVHA?

The a tag has four states: before link access, after link access, mouse over, and activation, corresponding to four pseudo-categories link、:visited、:hover、:active:;

The a tag has four states: before link access, after link access, mouse over, and activated, corresponding to four pseudo-categories: link, :visited, :hover, and :active;

When the link has not been visited:

(1) When the mouse rolls over the a link, it meets the two states: link and :hover. To change the color of the a tag, you must declare the :hover pseudo-class after the :link pseudo-class;
(2) Activate when the mouse clicks When linking a, satisfy the three states: link, :hover, and :active at the same time. To display the style when the a tag is activated (:active), the :active statement must be placed after :link and :hover. Therefore, the order of LVHA is derived.

When the link has been visited , the situation is basically the same as above, but you need to replace :link with :visited.

---

8. What are the new pseudo-classes in CSS3?

(1) elem:nth-child(n) select the nth child element under the parent element, and the label of this child element is elem, n can accept specific
values ​​and functions.

(2) elem:nth-last-child(n) has the same effect as above, but searches from the back.

(3) elem:last-child selects the last child element.

(4) elem:only-child If elem is the only child element under the parent element, select it.

(5) elem:nth-of-type(n) Select the nth elem type element under the parent element. n can accept specific values ​​or functions.

(6) elem:first-of-type selects the first elem type element under the parent element.

(7) elem:last-of-type selects the last elem type element under the parent element.

(8) elem:only-of-type If the child element under the parent element has only one element of type elem, select this element.

(9) elem:empty selects elem type elements that do not contain child elements and content.

(10) elem: target selects the currently active elem element.

(11): not (elem) selects each element of a non-elem element.

(12):enabled Controls the disabled state of form controls.

(13): disabled Controls the disabled state of form controls.
(14): The checked radio button or check box is selected.

---

9. How to center the div?

Several common methods of centering are:

For elements with fixed width and height

• We can use margin:0 autoto achieve the element level centering.
• Using absolute positioning, set the values ​​of the four directions to 0, and set the margin to auto. Because the width and height are fixed, the corresponding direction is divided equally, and the centering in the horizontal and vertical directions can be realized.
• Using absolute positioning, first pass top:50%and left:50%position the upper left corner of the element to the center of the page, and then adjust the center point of the element to the center of the page through a negative margin value.
• Using absolute positioning, first position the upper left corner of the translateelement to the center of the page through top:50% and left:50%, and then adjust the center point of the element to the center of the page.
• Using flex layout, the vertical and horizontal directions of the container are aligned by align-items:centerand justify-content:centerset, and then its sub-elements can also be centered vertically and horizontally.

For elements with variable width and height, the latter two methods above can achieve the vertical and horizontal centering of the element.

---

10. What are the values ​​of display? Explain their role.

blockBlock type. The default width is the width of the parent element, you can set the width and height, and display in a new line.
noneThe element is not displayed and is removed from the document flow.
inlineInline element type. The default width is the content width, width and height cannot be set, and display in the same line.
inline-blockThe default width is the content width, you can set the width and height, and display in the same line.
list-itemDisplay like a block type element, and add style list tags.
tableThis element will be displayed as a block-level table.
inheritSpecifies that the value of the display attribute should be inherited from the parent element.

---

11. What is the relative and absolute positioning origin of the position value?

Relatively positioned elements are positioned relative to the normal position of the element itself.

The absolute positioning element is positioned relative to the padding box of its first ancestor element whose position value is not static.

We can understand this sentence in this way. We first need to find an ancestor element whose position value of the absolutely positioned element is not static, and then locate it relative to the padding box of the ancestor element, that is to say, when calculating the positioning distance, The padding value should also be included.

expand:

• fixed(Old IE does not support) Generate absolutely positioned elements and position them relative to the browser window.
• staticDefaults. No positioning, the element appears in the normal flow
• inherit Specifies to inherit the value of the position attribute from the parent element.

---

Continuously updating...