编程知识 cdmana.com

[shocked] the percentage of padding top refers to the width of the parent element

introduction

Writing page styles and layouts is a front-end engineer Coding It's an essential part of , When defining the style of a page element ,padding Attributes are also frequently used .

padding Property is used to set the inner margin of an element , The value could be lengthinherit, It could be percentage .

Why are we talking about today padding-top What about the reference object when setting the percentage , It starts with a less serious interview question ~

A less serious css Arrange the interview questions

across , The serious interviewer said kindly : Let's have a simple interview question , Write the code . You said with a smile : Good da .

Notes to topics :

There is an element in the page A, Please implement the following requirements :

  1. Elements A Level within the page 、 Vertical center ;
  2. Elements A The distance from the left and right of the page is 10px, Elements A The width of the page increases with the width of the page ;
  3. Set the element A The height of is always half the width ;

As long as it's right CSS Some of my classmates know , Realization 1 and 2 It's very simple , And there are many ways . So how can I set the element A Its height is always half of its width ? Code up ~

The page layout : Want to consider DOM The structure and CSS The style of

<!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>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
      /*  Set child elements A Center vertically and horizontally  */ 
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .a {
      /*  Set up margin The distance between left and right is 10px */
      margin: 0 10px;
      background: #F00;
      /*  Set the width to 100vw, The actual width is affected by the elastic box  */
      width: 100vw;
      /* calc Methods dynamic calculation :height The value of is the width of 1/2, So it is  (100vw - 20px) / 2 */
      height: calc(50vw - 10px);
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

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

At this time, whether there is some joy in my heart , Another problem has been solved , Full of confidence ( Tsundere ) The eyes of the interviewer .
However , When you don't get To the interviewer G a.m. , The interviewer is kind again ( As cold as frost and ice ) And said “ Is there any other way ?”

What else can be done ? You stroked your hair helplessly .

La la la , Come and use it padding-top, Koongpn …

To explore the padding-top The secret of

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

Circle this sentence , It's the point , To test ~

<!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>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
      /*  Set child elements A Center vertically and horizontally  */ 
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .a {
      /*  Set up margin The distance between left and right is 10px */
      margin: 0 10px;
      background: #F00;
      /*  Set the width to 100%, The width of the parent container 100%, The actual width is affected by the elastic box  */
      width: 100%;
      height: 0;
      /* calc Methods dynamic calculation :padding-top Is the width of the parent container 1/2, So it is  (100vw - 20px) / 2 */
      padding-top: calc(50% - 10px);
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

You can also choose to use padding-bottom

Now when you look up again , Seeing the interviewer is full of satisfaction 、 The warm eyes that can be taught …

The last secret

When padding-toppadding-bottommargin-topmargin-bottom Property is set to a percentage , The reference object is the width of the parent element

Remember , Next time I'll have to test ~

Postscript

That's what brother Hu shared with you today , My favorite friends remember Collection forward , Focus on “ Brother Hu has something to say ”, Learning front end is not lost . Recommend it to more friends , Welcome to leave more messages …

Brother Hu has something to say , Focus on big front end technology , Share the front-end system architecture , Framework implementation principle , The latest and most efficient technology practice !

Click to see more

版权声明
本文为[osc_ i5oyb1xr]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225083918599U.html

Scroll to Top