1. What are the methods for centralizing elements vertically and horizontally?

For inline elements, use text-align and line-height:

 { text-align : center; line-height: "Parent height"}
Copy the code

For block level elements:

(1) Using Flex layout:

{display : flex;  justify-content: center;  align-items: center; }Copy the code

(2) Using Absolute positioning;

(3) Set margin or padding around the edges.

What is a BFC container? What are its characteristics? How do I generate a BFC container?

BFC is a block-level formatting Context, which can be seen as a relatively independent layout container on a page.

Its characteristics are:

(1) Independent layout environment. Internal elements are not affected by external elements, nor do they affect the layout of external elements;

(2) The internal block box and row box are arranged vertically along the border of their parent element;

(3) The vertical distance between internal elements is determined by their margins, and the adjacent margins of two internal elements will overlap vertically;

(4) When calculating the height of BFC, internal floating elements should also be taken into account;

(5) THE BFC region does not overlap with the float element (this feature can be used to clear the float).

The generation modes are as follows:

(1) The root tag < HTML > is itself a BFC container;

(2) Elements whose float attribute is not None;

(3) The position attribute is Absolute or fixed;

(4) display elements with inline-block, flex, inline-flex attributes;

(5) Overflow is not a visible block element.

How to arrange the weights of CSS selectors?

The overall weight order is:! Important > Inline Style > Internal Style > External Style > Browser Style

Comparison methods include: 1. Comparison method of weight value; 2. The four-zero comparison method.

What is the difference between standard box model and weird box model?

By default, browsers use the standard box model. The standard box is supported by the padding, but the size of the weird box is not.

Box-sizing :content-box:

"Total box width "=margin-left + margin-right + border-right + border-left
    + padding-right + padding-left + width(" content width ") // Height the same wayCopy the code

Box-sizing :border-box: 16px

"Total box width "=margin-left + margin-right + width(" content area width ") =margin-left + margin-right+ border-right + border-left + padding-right + padding-left// Same heightCopy the code

What is standard document flow, breaking document flow and leaving document flow?

Standard document flow: a document flow in which elements are normally ordered, block by block, box by box, top to bottom and left to right in a document.

Breaking the document flow: Forces the element to move in the specified direction to the specified location, but still occupies its original position in the standard document flow. This can be done by setting a negative margin.

Detach from document flow: Detach elements from the standard document flow and arrange and move them according to their own specifications. Elements that leave the document flow no longer occupy positions in the standard document flow. Can be set by floating, set absolute positioning or fixed positioning methods to achieve.

6. How to solve the problem of height collapse caused by floating?

Height collapse causes the height of the parent element of the floating element to be unable to spread over the quilt element. This can be solved by:

(1) Set the pseudo-element on the parent element to clear float:

::after {
	content: "";
	display: block;
	clear: both;
}
Copy the code

(2) Set overflow: hidden for the parent element;

(3) Set the display: inline-block attribute for the parent element;








<br clear="all">
<! Sibling block elements cannot be displayed side by side with floating elements
Copy the code

(5) Add the clear attribute to the sibling element:

"Sibling element" {clear: both;
}
Copy the code

Seven,srcProperties andhrefWhat are the differences in attributes?

Href refers to a hypertext reference. It is commonly used in and to establish an association between the current element and the resource. While the browser processes the href resource, it continues to process the rest of the DOM (which can be considered asynchronous loading).

SRC represents a reference to an external resource, commonly used in ,

Eight, how to solvemarginOverlap problem?

Margin overlap refers to the phenomenon that adjacent margins of two parent and child elements or sibling elements in the same BFC container will overlap vertically.

Solutions include:

(1) Try to use padding instead of margin;

(2) Add margin values of both elements separately to one of them;

(3) For overlap between parent and child elements, transparent border can be set for the parent element;

For sibling overlaps, float can be set to one of the following elements.

Nine, throughrgba()Set transparency andopacitWhat’s the difference in y Settings?

Rgba () is only used to set the transparency of the element color, and the transparency of the setting is not inherited by the quilt element.

Opacity setting Is used to set the overall opacity of an element, which is inherited by the element.

Both have compatibility problems in IE8 and the following browsers.

Front End Interview Guide series portal:

Front-end interview Guide JS interview questions summary

Summary of Vue interview questions in the Front-end Interview Guide

Summary of HTML interview questions in the front-end Interview Guide