148 CSS and JavaScript basic interview questions

Preface:

This article will share basic CSS and JavaScript interview questions. CSS and JavaScript are both front-end basic knowledge, which must be learned in front-end learning and essential in front-end interview.

CSS interview questions

1. Introduce the standard CSS box model? What’s different about the box model for the lower version of IE?

Related knowledge:

There are two types of box models: IE border-box and W3C Content-box
Box model: divided into content, padding, margin, border four parts

The differences between the IE box model and the W3C standard box model:

W3C standard box model: Properties width, height only contain content, not border and padding
Width, height contains content, border, and padding, referring to content+padding+border.

Which box model to use in IE8 + can be controlled by box-sizing (a new CSS property). The default value is Content-box, the standard box model;

If box-sizing is set to border-box, IE box model is used. If the DOCTYPE is missing in IE6, 7, and 8, the box model is interpreted as the IE box model. If a DOCTYPE is declared on a page, all browsers interpret the box model as the W3C box model.

2. What are the CSS selectors?

Id selector (# myID)
Class selector (.myClassName)
Tag selector (div, H1, P)
Descendant selector (H2p)
Adjacent descendant selector (child) selector (UL > LI)
Sibling selector (LI ~ A)
Adjacent sibling selector (Li + A)
Attribute selector (a[rel=”external”])
Pseudoclass selector (A :hover, Li :nth-child)
Pseudo-element selectors (::before, ::after)
Wildcard selector (*)

3. What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do.

Related knowledge:

The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements. (A pseudo-element consists of a double colon and a pseudo-element name)
The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. Browsers need to support older pseudo-elements such as :first-line, :first-letter, :before, :after, etc. The new pseudo-elements introduced in CSS3 are not allowed to support the old single colon.
If you want the inserted content to appear before other content, use ::before. If not, use ::after.
In code order ::after also generates later content than ::before.
If the stack view is pressed, ::after generates content above that generated by ::before.

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

CSS introduced the concept of pseudo-classes and pseudo-elements to format information beyond the document tree. That is, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter in a sentence or the first element in a list.
Pseudo-classes are used to style existing elements when they are in a state that changes dynamically based on user behavior. For example, when a user hovers over a specified element, we can use :hover to describe the state of the element.
Pseudo-elements are used to create and style elements that are not in the document tree. They allow us to style certain parts of an element. For example, we can append some text to an element and style the text with ::before. Although this text is visible to the user, it is not actually in the document tree.

5. Which properties of CSS can be inherited?

2. Having the attribute of inheriting:

Font family properties

Font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust

Text series attributes

Text-indent, text-align, text-shadow, line-height, word-spacing, letter-spacing, text-transform, direction, color

Table layout properties

caption-side border-collapse empty-cells

A list of attributes

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

The cursor attributes

cursor

Element visibility

visibility

There are some that are not commonly used; Speak, page, set attributes such as quotes type for nested references

Note: When a property is not an inherited property, you can specify that a property should inherit its value from the parent element using the Inherit keyword, which is used to explicitly specify inheritance and can be used for any inherited/non-inherited property.

6. How to calculate the CSS priority algorithm?

The priority of CSS is determined by the value of the particularity of the style declaration. The particularity value of the selector is divided into four grades as follows:

Tag selectors x,0,0,0
ID selectors 0,x,0,0
Class selector/attribute selector/pseudoclass selector 0,0,x,0
Element and pseudoelement selectors 0,0,0,x

Calculation method:

Each level has an initial value of 0
The stack for each level is the sum of the number of selector occurrences
Not carry, like 0,99,99,99
They are 0,0,0,0
There is no correlation between each level count
The rank is judged from left to right. If one digit is the same, the next digit is judged
If the two priorities are the same, the last one appears with the highest priority. Important is true
The specificity values of the wildcard selector are: 0,0,0,0
Inherited styles have the lowest priority, while wildcard styles have higher priority than inherited styles
! Important (weight), it has no special value, but it has the highest priority. For easy memorization, it can be considered as 1,0,0,0,0.

Example:

#demo a{
    color: orange;
}/* special value: 0,1,0,1*/

div#demo a{
    color: red;
}/* special value: 0,1,0,2*/
Copy the code

Note:

When applying a style, CSS first looks at the weight of the rule (! Important), the weighted rule has the highest priority. When the weight is the same, the particularity of the rule will be compared.
The greater the particularity value, the higher the declaration priority.
Declarations of the same particularity values, in the order in which the style was introduced, with the rule declared later having higher precedence (the one closest to the element appearing)
Some browsers do not consider the carry performance due to byte overflow problems

7. Explanation of pseudo-class LVHA?

A tag has four states: before link visit, after link visit, mouse slide and activated respectively correspond to four pseudo-classes: Link, :visited, : Hover and :active;

When the link is not accessed:

When the mouse slides over a link, it meets :link and :hover two states. To change the color of a tag, it must declare :hover pseudo-class after :link pseudo-class.
When the mouse clicks to activate a link, three states :link, :hover and :active are met at the same time. To display the style when a tag is activated (:active), the :active declaration must be placed after :link and :hover. Hence the order LVHA.

When the link access is outdated, the situation is basically the same as above, except that :link should be replaced with :visited.

Can we change the order? Yes, but only: Link and :visited can exchange positions. Because a link has either been visited or not visited, it is impossible to meet both of them, so there is no problem of coverage.

8. What are the new pseudo classes in CSS3?

Elem :nth-child(n) Selects the NTH child of the parent element with the label elem. N can accept either a specific value or a function.
Elem :nth-last-child(n)
Elem :last-child Selects the last child element.
Elem :only-child Select elem if it is the only child of the parent element.
Elem :nth-of-type(n) Select the NTH elem type element under the parent element. N can accept a specific value or a function.
Elem :first-of-type Selects the first elem type element of the parent element.
Elem :last-of-type Selects the last elem type element under the parent element.
Elem :only of type If the child element under the parent element has only one elem type element, this element is selected.
Elem: Empty Selects elem type elements that do not contain child elements and content.
Elem :target Selects the active ELEm element.
:not(elem) Selects each element that is not an ELEm element.
:enabled Controls the disabled status of form controls.
:disabled Controls the disabling status of form controls.
: Checked check boxes or check boxes are selected.

9. How do I center div?

Horizontal center: Give the div a width and add margin:0 auto

div {
  width: 200px;
  margin: 0 auto;
}
Copy the code

Text-align :center

.container {
  background: rgba(0.0.0.0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}
Copy the code

Center the absolutely positioned div

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* * */
}
Copy the code

Center one horizontally and vertically

/* Determine the container width height width 500 height 300 layer set layer margins */
div{
  position: absolute;/* Absolute position */
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -150px00 -250px;/* The margin is half its width and height */
  background-color: pink;/* * */
}
Copy the code

Horizontal and vertical center two

/* Unknown container width and height, using the 'transform' attribute */
div {
  position: absolute; /* Relative positioning or absolute positioning */
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /* * */
}
Copy the code

Horizontal and vertical center three

/* Use flex layouts for compatibility */
.container {
  display: flex;
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /* * */
}
Copy the code

Horizontal and vertical center four

/* Use the text-align:center and vertical-align:middle attributes */
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0.0.0.0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}
Copy the code

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

Block Block type. The default width is the width of the parent element. The width and height can be set.
The None element is not displayed and is removed from the document stream.
Inline inline element type. The default width is the content width. The width and height cannot be set.
The default width of inline-block is the width of the content, and the width height can be set.
List-items are displayed as block type elements, and style list tags are added.
The table element is displayed as a block-level table.
Inherit specifies that the display property value should be inherited from the parent element.

11. The values of position are relative and absolute.

Related knowledge:

Absolute Generates an absolutely positioned element relative to the padding box of the first parent element that is not static. It can also be understood that the upper left corner of the padding box of the parent element whose position is set to absolute or relative is the origin of the element closest to its level.
Fixed (not supported by old IE) generates an absolutely positioned element, positioned relative to the browser window.
Relative Generates elements that are positioned relative to the normal position of the element itself.
Static Default value. Without positioning, the element appears in the normal stream (ignoring the top,bottom,left,right,z-index declarations).
Inherit specifies that the value of the position property be inherited from the parent element.

What are the new features of CSS3? (According to project answers)

Added various CSS selectors (:not(.input) : all nodes whose class is not “input”)
Rounded corner (border-radius:8px)
Multi-column Layout
Shadow\Reflect
Text-shadow
Text-decoration
Linear gradient
Transform
Zooming, positioning, tilting, animation, multi-background

13. Please explain the Flex Box layout model of CSS3 and its application scenarios.

Related knowledge:

Flex, short for FlexibleBox, is designed to provide maximum flexibility to box models.

Any container can be specified as a Flex layout. Inline elements can also be laid out using Flex. Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis, along which items are arranged by default.

The following six properties are set on the container:

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).
The flex-wrap property defines how to wrap a line if an axis does not fit.
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.
The context-content attribute defines the alignment of items on the main axis.
The align-items property defines how items are aligned on the cross axis.
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

The following six properties are set on the project:

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.
The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
The Flex-basis property defines the amount of principal space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto.
The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

14. What is the principle behind creating a triangle with pure CSS?

The equipartition principle of adjacent border joints is adopted. Set the width and height of the element to 0, set only the border, hide any three edges (the color is transparent), and you are left with a triangle.

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
Copy the code

How to design a full screen word layout?
How to implement the CSS multi-column height?
What are some common browser compatibilities? Why? What is the solution? Common hack skills?
What is the cause of the invisible space between Li and Li? What’s the solution?
Why do I initialize CSS styles?
What is an inclusion block and what is the understanding of an inclusion block?
The CSS visibility property has a collapse property value. What’s the difference between different browsers?
Width :auto; width:100%
The difference between the percentage calculation of absolute and non-absolute positioning elements
A brief introduction to the advantages and disadvantages of using image Base64 encoding.
The relationship between ‘dsplay’, ‘position’ and ‘float’?
Understanding of margin overlap problem.
Understanding of the BFC specification (block formatting Context)?
What is IFC?
Please explain why you need to clear the float? The way to clear the float
How does the clear property clear floats?
Zoom :1 clear float principle?
Have you used media query for mobile layout?
Use CSS preprocessors? Which one do you like?
What are the ways to optimize and improve CSS performance?
How do browsers parse CSS selectors?
Should I use odd or even fonts on a web page? Why is that?
Which scenes are suitable for margin and padding?
How to write out the style module, say the idea, have any practical experience?
A brief description of cSS3’s ALL attribute.
Why not use wildcards to initialize CSS styles?
How does an absolute containingBlock compute differently from a normal stream?
Understanding hasLayout?
Is the vertical percentage of the element set relative to the height of the container?
How does full-screen scrolling work? What CSS properties are used?
What is responsive design? What are the fundamentals of responsive design? How to compatibility with earlier Versions of IE?
Parallax scrolling effect, how to animate each page differently?
How to modify Chrome to remember passwords after automatically filling forms with yellow background?
How to make Chrome support text smaller than 12px?
To make the font on the page clear and thin how do YOU do that with CSS?
What is the difference between ITALIC and Oblique in the font-style attribute?
What are the differences between device pixels, CSS pixels, device independent pixels, DPR, PPI?
Layout ViewPort, Visual ViewPort and Ideal ViewPort?
position:fixed; How to deal with invalid under Android?
If you need to write animation manually, what is the minimum time interval you think, and why?
How to remove the spacing between inline-block elements?
You have a height adaptive div with two divs, one 100px high, and you want the other to fill the remaining height.
PNG, JPG, GIF these picture formats explain, respectively when to use. Have you heard about WebP?
How does the browser determine whether webP images are supported
What is Cookie isolation?
What is the difference between writing the style tag after the body and before it?

What is a CSS preprocessor/post-processor?
Describe CSSSprites
Pros and cons of using rem layouts?
Draw a 0.5px line
Transition and animation
What is the preferred minimum width?
Why is height:100% invalid?
Width /max-width and min-height/max-height?
Basic concepts of inline box model
What is a replacement element?
How is the substitution element evaluated?
How does content relate to replacement elements?
Margin: Auto padding rule?
Margin is invalid
What’s special about border?
What is baseline and x-height?
What’s special about line-height?
What makes vertical-align special?
What is special about Overflow?
What is dependency free absolute positioning?
Absolute and Overflow relation?
What is clip clipping?
Relative?
What is a cascading context?
What are cascading levels?
What is the cascading order of elements?
Cascade principle?
Font weight is special?
What’s special about text-indent?
Letter-spacing and character spacing?
Word-spacing and word spacing?
White-space with line breaks and whitespace controls?
Is the background-image of the hidden element loaded?
How to implement single-line/multi-line text overflow ellipsis (…) ?
Common ways to hide elements?
CSS up and down fixed middle adaptive layout?
CSS two column layout implementation?
CSS three column layout implementation?
Implement a width and height adaptive square
Implement a triangle

Limited space, only questions and partial answers, information required [You can click hereCollect 100 CSS interview questions, JavaScript Basic Interview questions document (including questions and answers)

JavaScript basic interview questions

Introduces the basic data types of JavaScript
What are the basic specifications for writing JavaScript?
JQuery Usage Suggestions
Ajax USES
How many types of values does JavaScript have? Can you draw their memory map?
What’s the difference between stack and heap?
Several ways in which Javascript implements inheritance
How many ways can Javascript create objects?
Javascript scope chain domain
Talk about the understanding of this
What does Eval do?
What is a Window object? What is a Document object?
Null, undefined?
[“1”, “2”, “3”]. Map (parseInt)
In terms of events, what is the difference between IE and Firefox’s event mechanism? How do I stop bubbling?
What is a closure and why do you use it?
“Use strict” in javascript code; What does that mean? What’s the difference in using it?
How do YOU determine if an object belongs to a class?
What exactly does the new operator do?
In Javascript, when you do an object lookup, you never look up the prototype, right?
What you know about JSON?
What are the ways to lazily load JS?
What’s the difference between synchronous and asynchronous?
What is a cross-domain problem and how to solve it?
What if the page encoding and the requested resource encoding are inconsistent?
How do you do modular development?
AMD, CMD specification differences?
What is the core principle of requireJS? How does it load dynamically? How to avoid multiple loads? How is it cached?
Call and apply
The difference between documen.write and innerHTML
Reflux and redraw
DOM manipulation
What native methods do array objects have? List them
Those operations cause memory leaks
What is Cookie isolation?
Respond to events
How do Flash and JS interact through what classes?
What are the pros and cons of Flash versus Ajax?
Valid javascript variable definition rules
What’s the difference between XML and JSON?
What’s the difference between HTML and XML?
Progressive enhancement and graceful degradation
Web workers and Web sockets?
JS garbage collection mechanism?
How do Web applications actively push data from the server to the client?
How do I delete a cookie?
What is the difference between attribute and property?
Page history status issues for Ajax requests?

148 CSS and JavaScript basic interview questions

Preface:

CSS interview questions

JavaScript basic interview questions

Related Posts

The relationship between wechat applets authorization and login

The trend of 2022 front-end development from 2021

Menu data generation scheme of reductive routing