css中的百分比

原创

wx6375cd1abf2fb 2022-11-18 00:05:33 博主文章分类：平凡而伟大的css ©著作权

文章标签 css3 css 前端 html 概念理解 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx6375cd1abf2fb的原创作品，请联系作者获取转载授权，否则将追究法律责任

今天发现：最初对百分比的概念理解是不对的，并不是对父元素相对而言的百分比，如果父元素有padding就不一样了

语言表达的不清不楚，上代码，看现象：
css中的百分比_前端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        background-color: blanchedalmond;
        padding: 20px 20px;
        box-sizing: border-box;
        display: flex;
      }
      .main {
        height: 100%;
        width: 50%;
        background-color: blue;
      }
      .maina {
        height: 100%;
        width: 50%;
        background-color: rgb(88, 88, 98);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main"></div>
      <div class="maina"></div>
    </div>
  </body>
</html>