preface

According to the moOCs “Quick Handling of front-end technology and matching big factory interview requirements” course organized by the topic, updated

Take interview questions often

1. How to understand semantics

  • ① Make it easier to read (increase code readability)
  • ② Make search engines easier to read (SEO problems, let the search ranking top “money”)
  • ③ The right labels do the right things
  • (4) Page content structure

2. Which tags are block-level elements? Which tags are inline elements?

  • Block level display: block/tablediv,p,h1-h6,ul,ol,dl,li,header,footer,aside,section,article,form,tableEtc.
  • Inline (display: inline/inline-block)span,img,button,input,b,q,i,a,em,labelEtc.

3. How to calculate the width of box model (offsetWidth)?

#div1{
 width: 100px
    padding: 10px
    border: 1px solid #ccc
    margin: 10px
 } Copy the code

First of all, what is the concept of offsetWidth?

OffsetWidth = (content width + padding + border) as shown belowSo 100px + 20px + 2px = 122px

So what do I do if I want the value of offsetWidth here to be 100px?

We can set box-sizing: Border-box: offsetWidth = 78px + 20px + 2px; border-box: offsetWidth = 78px + 20px + 2px

4. What attributes are added to CSS3?

Only some common, commonly used attributes are listed

  • The animation properties
    • @keyframes
    • animation
  • Border attribute
    • border-image
    • border-radius
    • box-shadow
  • Color attribute
    • opacity
  • “Flexible Box model“
    • flex
    • align-content
    • align-items
    • align-self
    • justify-content
    • order
  • Grid property
    • grid-columns
    • grid-rows
  • Hyperlink properties
    • target
  • 2D/3D transform properties
    • transform
    • Translate, which controls horizontal or vertical movement of elements
    • Scale, which controls the zoom in and out of elements, defines the zoom in and out of elements with a limit of 1
    • Rotate: Controls the rotation of elements by Angle
    • Set translate3D to control the Z axis
    • Skew: Skew an element
  • The Transition property
    • transition

5. What is the effect of setting negative values on margin?

  • Top, left: With negative values, the element moves up and to the left
  • Right: Set a negative value and the right element moves to the left without moving itself
  • Bottom: Set a negative value so that the bottom element moves up and does not affect itself

6.BFC understanding and application

What is?

  • Block Format Content: Block level formatting context
  • Is a separate render area where the rendering of internal elements does not affect elements outside the boundary

application

  • Remove the floating
  • Function: to solve the problem of height collapse of parent element; Solve the problem of margin overlap; Clear internal element float

How is the BFC generated?

    1. The root element
    1. Float property [not] none;
    1. Display attribute [for] :line-block,table-cell,line-flex,flex
    1. Position attribute 【 not 】:static,relative;
    1. Overflow attribute [not] :visible;

7. Float layout problem, handwritten ClearFix

Grail layout, twin wings layout

  • Requirements: three-column layout, left, middle and right, middle column loaded and rendered first, fixed content on both sides, middle content ADAPTS to width, generally used for PC web pages
  • General key steps:
    • ① Use float layout
    • ② Use margin negative values on both sides to overlap the middle content horizontally
    • ③ Prevent the middle content from being covered by both sides, one using padding, the other using margin

CSS Classic layout series three – three column layout (Holy Grail layout, twin wing layout)

Handwritten clearfix

clearfix:after{
 content: ' '
    display: table
    clear: both
}
Copy the code

8. Flex dice

The main review of flex application, directly on the code

<head>
    <style>
        .box {
 width: 200px;  height: 200px;  border: 2px solid #ccc;  border-radius: 10px;  padding: 20px;   display: flex;  justify-content: space-between;  /* Align both ends */  }   .item {  display: block;  width: 40px;  height: 40px;  border-radius: 50%;  background-color: # 666;  }   .item:nth-child(2) {  align-self: center;  /* align top, bottom, left, right and center */  }   .item:nth-child(3) {  align-self: flex-end;  /* End alignment */  }  </style> </head>  <body>  <div class="box">  <span class="item"></span>  <span class="item"></span>  <span class="item"></span>  </div> </body>  Copy the code

9. What is absolute and relative?

  • Absolute: An element offset that is not static relative to its parent is searched one layer at a time until the root element is found, equivalent to browser page positioning. It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset
  • Relative: offset from the default (static) position, i.e. the base of position is the element’s default position. It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset

10. What are the implementation methods of center alignment?

Horizontally centered:

  • Inline element: text-align: center
  • Block element: margin: 0 auto
  • Absolute: (left: 50% + margin-left: negative)
  • translateX
  • Flex: (display: flex; The justify – content: center;)

Vertically centered:

  • Inline element: height = line-height
  • Absolute: (top: 50% + margin-top: negative)
  • translateY
  • Flex: (display: flex; flex-direction: column; The justify – content: center;)

11. Line-height inheritance problem

  • ① Specific value, direct inheritance
  • ② Proportion, inherit the proportion
  • ③ The percentage, such as 200%, is calculated first and then inherited the value

12. What is REM? What are the common scenarios for responsiveness?

Rem: A unit of relative length relative to the root element, often used in reactive layouts

What are the common scenarios for responsiveness?

  • Media queries
  • Flex layout
  • Grid layout (poor compatibility)
  • Percentage layout

13. What is the web view size?

  • Vh, VW, 1% height and width of web page viewport

At the end of the article

If you think my writing is good, you can give me a thumbs up. If there is anything wrong or bad, please comment and point out so that I can correct it.

Other articles

  • Traversal of binary trees of data structures
  • Imitation go where project video learning summary
  • Webpack is easy to learn
  • Gluten series ① — Didi SP side interview question
  • Gluten series ② — Didi intern cool the meridian

This article is formatted using MDNICE