CSS common interview questions

##CSS introduction

1. Inline style, 2. Internal style Table, 3. External style sheet

link @import

a. link is an HTML tag, and @import is provided by CSS, and can only load CSS

b. The page is loaded , the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading

c. import can only be recognized by IE5 or above, and link is an HTML tag, there is no compatibility issue

d. The weight of the link mode style is higher than the weight of @import

e. When using Javascript to control the DOM to change the style, you can only use the link mode, because @import only sees CSS. It is not DOM and can control

CSS basic selectors:

1. Tag selector element
2. Class selector (multiple class name selector).
3.id selector four
#4. Wildcard Selector*

##Special Recommendation

:Summary of CSS Interview Questions in 2020 (Latest)

CSS compound selector:

Descendant selector E>F

Child element selector
Intersection selector
Union selector,
Link pseudo-class selector lvha
Single colon ( :) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): indicates the second li element under ul

li :nth-child(2): Indicates that it is both a li element and the second element under ul (cannot be found).

It is recommended to generally use nth-of-type, which is less likely to cause problems.
Three major features of css: CSS cascading, CSS inheritance, CSS priority
Talk about your understanding of CSS layout

Box model

Clear the way of floating:

1. Extra tag method,

<p style="clear:both"></p>

2. Method of adding overflow attribute to parent

3. Use after pseudo-element to clear float

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. Use double pseudo-element to clear float

Positioning mode and edge offset:

Display and hide elements:

display:none;

overflow:hidden

Mouse style cursor

default Xiaobai Default, pointer, move, text, not-allowed prohibit

vertical-align vertical alignment

Overflowing text ellipsis display

1.white-space:nowrap forces the text to be on one line Displayed on

2.overflow: hidden is hidden beyond part
3.text-overflow: ellipsis displays an omission mark when the text in the object overflows

Common layout methods:

Fixed layout,

Flow (%) layout,
Elastic (flex) layout,
rem layout
Floating layout, clear float
Positioning layout,
margin and padding

blocks Level element is vertically centered

How to center a p up, down, left and right

1.
left:50%; top:50%
transform: translate(-50%,-50%)
2 .
left:0; top: 0; bottom: 0; right: 0; margin: auto
3.px
Three major features of CSS: cascading inheritance priority
Inheritable properties
Text-related: font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, color

List-related: list-style-image, list-style-position, list-style-type, list-style

CSS3 new features

Realize rounded corners (border-radius), shadow (box-shadow), and add special effects to text (text- shadow), linear gradient (gradient), transformation (transform)

Added more CSS selectors multi-background rgba, the only pseudo-element introduced in CSS3 is ::selection, media query, multi-column layout

link @import
a. Link belongs to the HTML tag, while @import is provided by CSS, and can only load CSS

b. When the page is loaded, link will be loaded at the same time, and @import references The CSS will wait until the page is loaded before loading

c. import can only be recognized in IE5 or above, and link is an HTML tag, so there is no compatibility issue

d. The link style style has a high weight The weight of @import

e. When using Javascript to control the DOM to change the style, you can only use the link method, because @import only sees CSS, not the DOM that can control

CSS basics Selector:

1. Tag selector element

2. Class selector (multiple class name selector).

3. ID selector four
#4. Wildcard selector*

CSS compound selector:
Descendant selector E>F
Child element selector
Intersection selector
Union selector,
Link pseudo-class selector lvha
Single Colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): Represents the second li element under ul
li:nth-child(2): Indicates that it is both a li element and the second element under ul (cannot be found).
It is recommended to generally use nth-of-type, which is less likely to cause problems.
Three major features of css: CSS cascading, CSS inheritance, CSS priority
Talk about your understanding of CSS layout

Box model

Clear the way of floating:
1. Extra tag method,

<p style="clear:both"></p>

2. Method of adding overflow attribute to parent
3. Use after pseudo-element to clear float

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. Use double pseudo-element to clear float

Positioning mode and edge offset:

Display and hide elements:
display:none;
overflow:hidden

Mouse style cursor
default Xiaobai Default, pointer, move, text, not-allowed prohibit
vertical-align vertical alignment

Overflowing text ellipsis display
1.white-space:nowrap forces the text to be on one line Displayed on
2.overflow: hidden is hidden beyond part
3.text-overflow: ellipsis displays an omission mark when the text in the object overflows

Common layout methods:
Fixed layout,
Flow (%) layout,
Elastic (flex) layout,
rem layout
Floating layout, clear float
Positioning layout,
margin and padding

blocks Level element is vertically centered
How to center a p up, down, left and right
1.
left:50%; top:50%
transform: translate(-50%,-50%)
2 .
left:0; top: 0; bottom: 0; right: 0; margin: auto
3.px
Three major features of CSS: cascading inheritance priority
Inheritable properties
Text-related: font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, color

List-related: list-style-image, list-style-position, list-style-type, list-style

CSS3 new features
Realize rounded corners (border-radius), shadow (box-shadow), and add special effects to text (text- shadow), linear gradient (gradient), transformation (transform)

Added more CSS selectors multi-background rgba, the only pseudo-element introduced in CSS3 is ::selection, media query, multi-column layout

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of CSS common interview questions. For more information, please follow other related articles on the PHP Chinese website!