Basic CSS interview question and anwser (Q&A)

as shown below, there are some questions about the basics of css.

what's the priority of css selectors ?
what's the difference between link and @import ?
what kind of methods to hide element in the web page ?
what's the difference between em、px and rem ?
what are the methods for centering block element horizontally ?
how many the methods of postioning does css have ?
how to understand z-index ?
how to understand cascading context ?
how many methods to clear float ?
what's your understanding of css-sprites ?
what's your understanding of media queries ?
what's your understanding of box model ?
what's the difference between the standard box model and the weird box model ?
can you talk about your understanding of BFC(block formating context)?
why do people sometimes use translate to change the position instead of positioning ?
what's the difference between pseudo-classes and pseudo-elements ?
what's your understanding of flex ?
can you talk about the problem about the animation and transition of css ?

this chapter is non-critical difficultly about css interview, so we will write with the easily way of anwser. and there are not many detailed explaintions overhere.

we agree that after each question we mark ✨ as high-frequency interview question.

what's the priority of css selectors ? ✨

the priority of css selectors is : inline style > ID selector > class slector > tag selector

to the specific calculation level, the priority is determined by the values of A, B, C and D, and the calculation rules of their value are as follows:

the premise that the value of A is equal to 1 is that exist inline style, otherwise A = 0.
the value of B is equal to the number of the occurrences of id selector.
the value of C is equal to the total number of the occurrences of the class selectors, the attribute selectors and the pseudo classes.
the value of D is equal to the total number of the occurrences of the tag slector and the psuedo element.

just as following selectors, it has no inline style, so A=0, and there is not id selector that B=0. and there is a class selector that C=1, there are three tag seletcors that D=3, so that the result of final calculation is : {0, 0, 1, 3}

ul ol li .red {
    ...
}

according to the method of settlement, the following the result caculation is {0, 1, 0, 0}

#red {

}

our ways of compare priority is to compare the value from A to D, and from left to right, the weights of A, B, C and D is successively decrease. and if we want to judge the priority that we need to compare one by one from left to right, and until maximum value is compared, then you can get the result of priority.

such as the second example B is comparing to the first example B, we can get the result: 1 > 0, and then we just stop, bacause the second example has a higher priority.

Basic CSS interview question and anwser (Q&A)