I used to prepare interview questions when I was leaving. Recently, I have been thinking of preparing for a rainy day. I have arranged it at ordinary times, and there is no need to cram at the last minute. Today’s section is the core interview question for the entire HTML and CSS section.

How to understand semantics?

A:

  1. Use the corresponding tag to write the corresponding content, such as H tag, P paragraph…
  2. It makes it easier to read and increases code readability
  3. Make search engines easier to read and enhance SEO

By default, which are block-level elements and which are inline?

Block level elements: display: Block /table elements such as div, h1, h2, table, ul, OL, p

Inline elements: display:inline/inline-block elements such as SPAN, img, input, button

How is the width of the box model calculated?

Answer: offsetWidth = (Inside width + inside margin + border). Excluding margins 122px; If box-sizing:border-box,offsetWidth is 100px;

Margin vertical overlap problem?

Margin-top and margin-bottom of adjacent elements overlap.

15

Margin is a negative problem?

Margin (top, left, bottom, right);

Answer: 1, the top margin – and margin – left negative, negative elements up to 2, margin – right and the left the right side of the element, itself is not affected 3, margin – bottom negative elements up below, itself is not affected

Understanding and application of BFC?

What is BFC? How to apply it?

A: Block format Context: block-level formatting Context

It is a separate rendering area, and the rendering of internal elements does not affect elements outside the boundary.

The conditions for forming BFC are as follows:

  • Float is not none
  • Position is absolute or fixed
  • Overflow is not visible
  • The display is the flex inline – block

Use case: Clear float

Float layout issues, as well as ClearFix

How to achieve the holy cup layout and the twin wing layout?

What is the Holy Grail and twin wing layout?

  • A three-column layout with the middle column loading and rendering first
  • The content is fixed on both sides, and the content in the middle ADAPTS to the width
  • Generally used for PC websites

Examples are as follows:

Summary of Holy Grail technical points

  • Use float layouts
  • Use margin negative values on both sides to overlap the middle content horizontally
  • To prevent the middle content from being overwritten by both sides, use a padding and a margin
#center {
    background-color: #ccc;
    width: 100%;
}
#left {
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -100%;
    right: 200px;
}
#right {
    background-color: red;
    width: 150px;
    margin-right: -150px;
}
Copy the code

Handwritten clearfix

/* Write clearfix */
.clearfix:after {
    content: ' ';
    display: table;
    clear: both;
}
Copy the code

Twin wing layout

Effect:

How to achieve the dual wing layout?

1, left float: left 2, left blank4. Margin-left is negative and floats to the right

Draw a three-point dice in Flex

What does align-self mean?

Center an item within an elastic object element:

#myBlueDiv
{
    align-self:center;
}
Copy the code

According to what definition is absolute and relative?

  • Relative refers to its position
  • Absolute Is located according to the location element (Absolute, relative, Fixed, or body) of the nearest layer.

What is the implementation of center alignment?

Horizontal center

  • Inline element: text-align: center;
  • Block element: margin: auto;
  • Absolute: margin-left: 50%; Margin – left: negative;

Vertical center

  • Inline element: line-height
  • Absolute: top: 50% + margin-top: negative;
  • Absolute: transform(-50%, -50%);
  • Absolute: top, left, bottom, right = 0; margin: auto;

Line-height inheritance problem?

Answer: 40 px

The inheritance rule for line-height is as follows:

  • If the number is concrete, inherit the number
  • If you write it as 2 or 1.5, you inherit 2 or 1.5
  • If written as a percentage, the calculated value of the percentage is inherited

What is REM? How does REM compare to EM and PX?

Rem is a unit of length.

  • Px is the most common unit of absolute length
  • Em is a unit of relative length, relative to phiThe parent element. This is not used very often
  • Rem is also a unit of relative length,Relative to the root element (HTML)Unit of length, often used in responsive layouts

How does REM implement responsiveness?

  • Media-query, which sets the font size of the root element (HTML) depending on the screen width
  • Rem does the length calculation based on the root element

The code is as follows:

@media only screen and (max-width: 374px) {
    /* iphone5 or smaller size, set to iphone5 width (320px) ratio font size */
    html {
        font-size: 86px; }}@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 and iPhone X */
    html {
        font-size: 100px; }}@media only screen and (min-width: 414px) {
    /* iphone6p or larger size, scale to iphone6p width (414px) font size */
    html {
        font-size: 110px; }}body {
    font-size: 0.16 rem;
}
#div1 {
    width: 1rem;
    background-color: #ccc;
}

Copy the code

How to achieve responsiveness through VW/VH?

Rm implementation has some disadvantages, because REM implementation of the response has a step nature.

Understand the premise of VW/VH

  • Window.screen. height Screen height
  • Window. InnerHeight Height of the web page viewport
  • The height of the document. The body. ClientHeight body

Vh refers to 1/100 of the height of a web page viewport

Vw is 1/100 of the width of the viewport

Vmax takes the maximum value of both VH and VM, and vice versa for vmin.