Bytedance favorite test front: CSS basics

Note: the (xx) number in front of each question represents the frequency of the question. This CSS is based on the sorted questions in front of 30+ articles and corresponding answers, reference links, etc. The content of the article is arranged by myself who got the Offer.

(2) write code: CSS div vertical horizontal center, and complete div height is always half of the width (width can not be specified)

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html.body {
        width: 100%;
        height: 100%;
      }

      .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;

        display: flex;
        align-items: center;
      }

      .inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
      }

      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="box">hello</div>
      </div>
    </div>
  </body>
</html>
Copy the code

Refer to the link

Github.com/cttin/cttin…

Please talk about CSS weights and priorities

The weight

Starting at 0, an inline style +1000, an ID selector +100, an attribute selector, class or pseudo-class +10, an element selector, or pseudo-element +1, and wildcard +0

priority

The weights are the same, and the ones that are written behind override the ones that are in front
use! importantReach maximum priority, both used! important, the most important priority is high

Refer to the link

zhuanlan.zhihu.com/p/41604775

Flex is short for what property:

Elastic box layout, a new property of CSS3, is used to facilitate layout, such as vertical center
Flex properties areflex-grow,flex-shrink 和 flex-basisThe shorthand

Refer to the link

www.ruanyifeng.com/blog/2015/0…

Q: How does CSS draw a square half the width of the parent element?

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        background: red;
      }

      .inner {
        width: 50%;
        padding-bottom: 50%;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Copy the code

The CSS implements adaptive square and rectangular with equal aspect ratio

Double nesting, outer relative, inner absolute

Padding hold high

Vw and Vh can also be used if you just want to be relative to the body

Pseudo element settingmargin-top: 100%Hold high

Double nesting, outer relative, inner absolute

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        padding-top: 50%;
        height: 0;
        background: #ccc;
        width: 50%;
        position: relative;
      }

      .inner {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">hello</div>
    </div>
  </body>
</html>

Copy the code

Padding Draws a square

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        background: blue;
      }

      .inner {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Copy the code

Relative to the viewport VW, VH

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .inner {
        width: 1vw;
        height: 1vw;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Copy the code

Set margin-top

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .inner {
        width: 100px;
        overflow: hidden;
        background: blue;
      }

      .inner::after {
        content: "";
        margin-top: 100%;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Copy the code

Refer to the link

www.fly63.com/article/det…

(2) Q: How to implement the two-column layout:

Left float, right margin-left (right adaptive)

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      div {
        height: 500px;
      }

      .aside {
        width: 300px;
        float: left;
        background: yellow;
      }

      .main {
        background: aqua;
        margin-left: 300px;
      }
    </style>
  </head>
  <body>
    <div class="aside"></div>
    <div class="main"></div>
  </body>
</html>

Copy the code

Right float, margin – right

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      div {
        height: 500px;
      }

      .aside {
        width: 300px;
        float: right;
        background: yellow;
      }

      .main {
        background: aqua;
        margin-right: 300px;
      }
    </style>
  </head>
  <body>
    <div class="aside"></div>
    <div class="main"></div>
  </body>
</html>

Copy the code

BFC + float

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      div {
        height: 500px;
      }

      .aside {
        width: 300px;
        float: left;
        background: yellow;
      }

      .main {
        overflow: hidden;
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div class="aside"></div>
    <div class="main"></div>
  </body>
</html>

Copy the code

Float + negative margin

<head>
  <style>
    .left {
      width: 100%;
      float: left;
      background: #f00;
      margin-right: -200px;
    }

    .right {
      float: left;
      width: 200px;
      background: #0f0;
    }
  </style>
</head>

<div class="left"><p>hello</p></div>
<div class="right"><p>world</p></div>
Copy the code

Grail layout implements a two-column layout

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      /* div { height: 500px; } * /

      /* .box { overflow: hidden; } * /

      /* .container { padding: 0 300px 0 200px; border: 1px solid black; } * /

      html.body {
        height: 100%;
      }

      div {
        height: 100%;
      }

      .container {
        display: flex;
      }

      .content {
        flex: 1 1;
        order: 2;
        background: #f00;
      }

      .left {
        float: left;
        width: 100%;
        background: #0f0;
      }

      .right {
        float: left;
        width: 300px;
        margin-left: -300px;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">hello</div>
      <div class="right">I am good</div>
    </div>
  </body>
</html>

Copy the code

Flex implements a two-column layout

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      /* div { height: 500px; } * /

      /* .box { overflow: hidden; } * /

      /* .container { padding: 0 300px 0 200px; border: 1px solid black; } * /

      html.body {
        height: 100%;
      }

      div {
        height: 100%;
      }

      .container {
        display: flex;
      }

      .content {
        flex: 1 1;
        order: 2;
        background: #f00;
      }

      .left {
        flex: 0 0 200px;
        background: #0f0;
      }

      .right {
        flex: 1 1;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">hello</div>
      <div class="right">I am good</div>
    </div>
  </body>
</html>

Copy the code

Reference link: juejin. Im /post/5e8d52…

position + margin

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      /* div { height: 500px; } * /

      /* .box { overflow: hidden; } * /

      /* .container { padding: 0 300px 0 200px; border: 1px solid black; } * /

      html.body {
        height: 100%;
      }

      div {
        height: 100%;
      }

      .container {
        display: flex;
        position: relative;
      }

      .content {
        flex: 1 1;
        order: 2;
        background: #f00;
      }

      .left {
        position: absolute;
        width: 300px;
        background: #0f0;
      }

      .right {
        width: 100%;
        margin-left: 300px;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">hello</div>
      <div class="right">I am good</div>
    </div>
  </body>
</html>

Copy the code

Implement a three-column layout

position + margin-left + margin-right

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      div {
        height: 500px;
      }

      .box {
        position: relative;
      }

      .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        background: green;
      }

      .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        background: red;
      }

      .middle {
        margin-left: 200px;
        margin-right: 200px;
        background: black;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

Copy the code

By float + margin

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      div {
        height: 500px;
      }

      .left {
        float: left;
        width: 200px;
        height: 200px;
        background: green;
      }

      .right {
        float: right;
        width: 200px;
        height: 200px;
        background: red;
      }

      .middle {
        margin-left: 210px;
        margin-right: 210px;
        background: black;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
  </body>
</html>

Copy the code

The holy grail layout

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .container {
        padding: 0 300px 0 200px;
        border: 1px solid black;
      }

      .content {
        float: left;
        width: 100%;
        background: #f00;
      }

      .left {
        width: 200px;
        background: #0f0;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
      }

      .right {
        width: 300px;
        background: #00f;
        float: left;
        margin-left: -300px;
        position: relative;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">In the middle of the content</div>
      <div class="left">On the left side of the area</div>
      <div class="right">The right area</div>
    </div>
  </body>
</html>

Copy the code

Double wing layout

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      html.body {
        height: 100%;
      }

      div {
        height: 100%;
      }

      .main {
        float: left;
        width: 100%;
        background: #f00;
      }

      .main .content {
        margin-left: 200px;
        margin-right: 300px;
      }

      .left {
        width: 200px;
        background: #0f0;
        float: left;
        margin-left: -100%;
      }

      .right {
        width: 300px;
        background: #00f;
        float: left;
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="content">hello world</div>
    </div>
    <div class="left">hello</div>
    <div class="right">Wang Penghao</div>
  </body>
</html>

Copy the code

Flex layout

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      html.body {
        height: 100%;
      }

      div {
        height: 100%;
      }

      .container {
        display: flex;
      }

      .content {
        flex: 1 1;
        order: 2;
        background: #f00;
      }

      .left {
        flex: 0 0 200px;
        order: 1;
        background: #0f0;
      }

      .right {
        flex: 0 0 300px;
        order: 3;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">hello world</div>
      <div class="left">hello</div>
      <div class="right">Wang Penghao</div>
    </div>
  </body>
</html>

Copy the code

Refer to the link

Segmentfault.com/a/119000000…
Blog.csdn.net/crystal6918…
Blog.csdn.net/zhoulei1995…

Q: What are CSS animations?

animation

The animation, Transition, transform, and translate properties need to be clear:

Animation: Used to set the animation properties. It is a short term property that contains 6 properties
Transition: Used to style elements. It has a similar effect to animation, but the details are quite different
Transform: Used to rotate, scale, move, or tilt an element without having to do with the style animation
Translate: Translate is just a property value of transform, that is, the move, in addition to scale and so on

The resources

Juejin. Im/post / 5 b137e…

(3) Q: Write vertical center and horizontal center with CSS2 and CSS3 respectively

CSS2

Horizontal center:

div + margin: auto;
span + text-align

Vertical center

Use position, then left/top and margin to center vertically (known and unknown width height)
Use position + margin
Using display: table – cell;

Given width and height, center horizontally and vertically

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        position: relative;
        width: 400px;
        height: 600px;
        background: blue;
      }

      .inner {
        position: absolute;
        width: 200px;
        height: 300px;
        background: red;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -100px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

Copy the code

Unknown width and height, such as inline elements, are centered horizontally and vertically

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        /* background: blue; * /
        border: 1px solid red;
        background-color: transparent;
        position: relative;
      }

      .inner {
        position: absolute;
        background: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <span class="inner">I want to center it</span>
    </div>
  </body>
</html>
Copy the code

Absolutely positioned divs are centered horizontally and vertically

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        /* background: blue; * /
        border: 1px solid red;
        background-color: transparent;
        position: relative;
      }

      .inner {
        position: absolute;
        background: red;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 200px;
        height: 300px;
        margin: auto;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">I want to center it</div>
    </div>
  </body>
</html>
Copy the code

Use display: table-cell for pictures and other elements; Proceed to the vertical center

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        /* background: blue; * /
        border: 1px solid red;
        background-color: transparent;
        display: table-cell;
        vertical-align: middle;
      }

      .inner {
        background: red;
        width: 200px;
        height: 300px;
        border: 1px solid blue;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">I want to center it</div>
    </div>
  </body>
</html>
Copy the code

CSS3

Vertical and horizontal center

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;

        display: flex;
        
        /* Vertical center */
        align-items: center;
        
        /* Level in the middle */
        justify-content: center;
        border: 1px solid red;
        background-color: transparent;
      }

      .inner {
        background: red;
        width: 200px;
        height: 300px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">I want to center it</div>
    </div>
  </body>
</html>

Copy the code

(2) Q: The difference between visibility and display (and opacity)

The visibility setting hidden will hide the element, but its location will still exist in the page document flow and will not be deleted, so it will trigger the browser rendering engine to redraw
The display attribute set to None will hide the element, and its position will not be preserved, triggering backflow and redraw in the browser rendering engine.
Opacity sets an element to transparent, but its location is also within the page’s document stream and cannot be deleted, triggering a redraw by the browser’s rendering engine

Q: Can there be a transition effect on opacity?

You can set the transition effect

Q: What is the difference between BFC and IFC

BFC is a block-level format context and IFC is an in-line format context:

The internal Box will be placed horizontally
The horizontal spacing is determined by margin, padding and border

Reference links:

Juejin. Im/entry / 5938 d…
zhuanlan.zhihu.com/p/74817089

Q: Does the BFC overwrite the float element? Why is that? For example

No, because the BFC is a separate container in the page, and the elements inside the BFC do not interact with the elements outside the page. For example, if the above div is set to float, then if the below element is not a BFC and has no float, it will wrap the contents of the above element. If the following element is set to overflow: hidden; Property to achieve a classic two-column layout, with the left side of the content fixed width and the right side adaptive because it is A BFC.

Refer to the link

zhuanlan.zhihu.com/p/25321647

Q: Do you know box-sizing?

The box-sizing property can be used to fine-tune these performances:

content-boxIs the default value. If you set the width of an element to 100px, the content area of that element will be 100px wide, and the width of any borders and inner margins will be increased to the width of the last drawn element.
border-boxTell the browser that the border and margin values you want to set are contained in width. That is, if you set the width of an element to 100px, then 100px will contain its border and padding, and the actual width of the content area is width minus (border + padding). In most cases, this makes it easier to set the width and height of an element.

(2) What is BFC

Block Formatting Context (BFC) is a CSS rendering model with box layout in Web pages. It refers to a separate rendering area or an isolated container.

Conditions for the formation of BFC

Five:

Float elements, float values other than None
Position element, position (Absolute, fixed)
Display is one of the following values: inline-block, table-cell, table-caption
Overflow values other than visible (hidden, auto, scroll)
HTML 就是一个 BFC

BFC features:

The internal boxes are placed vertically one after the other.
The vertical distance is determined by margin
The region of the BFC does not overlap with the element region of float.
When calculating the height of the BFC, the floating element also participates in the calculation
The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.

(2) Q: Do you know the box model?

The CSS box model is essentially a box that encapsulates the surrounding HTML elements. It includes four attributes: margin, border, padding, and content. CSS box model: standard model + IE model

Standard box model: Width = Content + border + padding

IE box model: width = content width (content+border+padding)

box-sizing: border-box;
Copy the code

Refer to the link

zhuanlan.zhihu.com/p/74817089

Q: What do you know about position attributes?

Static: There is no special positioning and the object follows the normal document flow. The top, right, bottom, left properties are not applied. Relative: Objects follow the normal document flow, but are offset within the normal document flow by the properties top, right, bottom, left, etc. The cascade is defined by the Z-index attribute. Absolute: The object is removed from the normal document flow, using the top, right, bottom, left properties for absolute location. The cascade is defined by the Z-index attribute. Fixed: The object is positioned outside the normal flow of the document using the properties top, right, bottom, left, etc., with the window as the reference point. The object does not scroll when the scroll bar appears. The cascade is defined by the Z-index attribute. Sticky: It is similar to relative and fixed, which applies relative before scrolling to the threshold of viewport and fixed layout after scrolling to the threshold, determined by top.

Q: What happens when two divs are aligned up and down, both of them are set margin?

Officially enroll large
One plus one minus

Q: Why does this happen? Can you explain

Is determined by the block-level format context. BFC, elements will be arranged up and down in BFC, and the vertical distance will be determined by margin, and overlap will occur. Specifically, the maximum value of both positive and negative is taken, and the maximum absolute value of both negative and positive is taken, and one plus one minus is added

The BFC is a separate, isolated container within the page, and internal child elements do not affect external elements.

Q: What are some ways to clear a float?

Unclear floating height collapse: Floating element parent element height adaptive (if the parent element does not write height, after the child element writes float, the parent element height collapse will occur)

Add an empty div below the floating element and write a CSS style to the element: {clear:both; height:0; overflow:hidden; }
Sets the height of the floating element parent
Parent floats at the same time (floats need to be added to parent sibling elements)
The parent is set to inline-block and its margin: 0 auto center mode is invalid
Clear float method by adding overflow:hidden to parent
Universal clearing method after pseudo-class clearing float (now the mainstream method, recommended to use)

.float_div:after{
  content:".";
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
.float_div{
  zoom:1
}
Copy the code

❤️ Thanks for your support

If you like it, don’t forget to share it, like it and watch it again.

Bytedance favorite test front: CSS basics

(2) write code: CSS div vertical horizontal center, and complete div height is always half of the width (width can not be specified)

Refer to the link

Please talk about CSS weights and priorities

The weight

priority

Refer to the link

Flex is short for what property:

Refer to the link

Q: How does CSS draw a square half the width of the parent element?

The CSS implements adaptive square and rectangular with equal aspect ratio

Double nesting, outer relative, inner absolute

Padding Draws a square

Relative to the viewport VW, VH

Set margin-top

Refer to the link

(2) Q: How to implement the two-column layout:

Left float, right margin-left (right adaptive)

Right float, margin – right

BFC + float

Float + negative margin

Grail layout implements a two-column layout

Flex implements a two-column layout

position + margin

Implement a three-column layout

position + margin-left + margin-right

By float + margin

The holy grail layout

Double wing layout

Flex layout

Refer to the link

Q: What are CSS animations?

The resources

(3) Q: Write vertical center and horizontal center with CSS2 and CSS3 respectively

CSS2

Given width and height, center horizontally and vertically

Unknown width and height, such as inline elements, are centered horizontally and vertically

Absolutely positioned divs are centered horizontally and vertically

Use display: table-cell for pictures and other elements; Proceed to the vertical center

CSS3

Vertical and horizontal center

(2) Q: The difference between visibility and display (and opacity)

Q: Can there be a transition effect on opacity?

Q: What is the difference between BFC and IFC

Reference links:

Q: Does the BFC overwrite the float element? Why is that? For example

Refer to the link

Q: Do you know box-sizing?

(2) What is BFC

Conditions for the formation of BFC

(2) Q: Do you know the box model?

Refer to the link

Q: What do you know about position attributes?

Q: What happens when two divs are aligned up and down, both of them are set margin?

Q: What are some ways to clear a float?

Refer to the link

❤️ Thanks for your support

Related Posts

React + Fly Ice (ICE) UI framework component example (10) Tencent map application

Use font ICONS in applets

Jekyll-rtd-theme, another document tool!