The introduction

Writing page style and layout is an essential work of front-end engineer Coding, and the padding attribute is often used in defining the style of page elements.

The padding property is used to set the inner margin of the element. The value can be Length, inherit, or of course, percentage.

When it comes to the padding-top percentage, it’s a good idea to set the percentage

A not so serious CSS layout interview questions

In the opposite, the poker-faced interviewer amiably said: We come to a simple interview question, write code. You smile and say, yes.

Subject notes:

There is one element A in the page, please implement the following requirements:

  1. Element A is centered horizontally and vertically within the page;
  2. Element A is 10px to the left and right of the page, and the width of element A increases as the page width increases.
  3. Set the height of element A to always be half the width;

For those of you who are familiar with CSS, implementing 1 and 2 is very simple and can be done in a variety of ways. So how do you set the height of element A to always be half the width? The code ~

Page layout: Consider DOM structure and CSS styling

<! 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%;
      /* Sets the child element A vertically and horizontally centered */ 
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .a {
      /* Set margin to 10px */
      margin: 0 10px;
      background: #F00;
      /* Set the width to 100vw, the actual width is affected by the elastic box */
      width: 100vw;
      /* Calc (100vw-20px) /2 */
      height: calc(50vw - 10px);
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>
Copy the code

In the above code we use the calc method to set the height of the element to 1/2 of the width

Whether there is some secretly happy heart at this time, and solved a question, full of confidence (proud jiao) eyes to the interviewer. However, when you don’t get the interviewer’s G-spot, the interviewer is gracious (and frosty) and says, “What else?”

What else is there to do? You run helplessly through your little hair.

Now use the padding-top.

Explore the secrets of padding-top

When the padding-top value is a percentage, the reference object is the width of the parent element

This sentence circle, it is the key, want to take an examination of ~

<! 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%;
      /* Sets the child element A vertically and horizontally centered */ 
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .a {
      /* Set margin to 10px */
      margin: 0 10px;
      background: #F00;
      /* Set the width to 100%, 100% of the parent container width, the actual width will be affected by the elastic box */
      width: 100%;
      height: 0;
      /* The padding-top value is 1/2 the width of the parent container, so (100vw-20px) /2 */
      padding-top: calc(50% - 10px);
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>
Copy the code

You can also use padding-bottom here

Now, when you look up again, you see the interviewer’s eyes glowing with satisfaction and educability…

The final secret

When the padding-top, padding-bottom, margin-top, and margin-bottom properties are set to percentages, the reference object is the width of the parent element

Want to remember ah, next time still have to test ~

Afterword.

The above is brother Hu to share the content today, like partners remember to like, collect ah, pay attention to Brother Hu has words, learning front end don’t get lost, welcome a lot of messages exchange…

Hu Ge has words, focus on the field of front-end technology, share front-end system architecture, framework implementation principle, the latest and most efficient technology practice!