html - 为什么我的 Child Div 忽略它的父级？

Question

我使用一系列 div 创建了一个技能部分。基本上当我将子 div 设置为 100% 宽度时，它应该是父元素的 100% 宽度，对吗？但由于某种原因，它超过了它。我不明白为什么。

这是我的 HTML 和 CSS，因此您可以全面了解正在发生的事情:

aside {
  background-color: #5abbd8;
  padding: 50px 0px;
}

.wrapper {
  margin: 0px 5%;
}

.skills-title {
  margin-bottom: 50px;
}

.skill-points {
  margin: 50px 0;
}

.point-container {
  background-color: #f2f2f2;
  width: 100%;
  height: 20px;
  margin: 25px;
  border-radius: 10px;
}

.points {
  background-color: #FED36E;
  height: 20px;
  border-radius: 10px;
  position: relative;
}

.html {
  width: 70%;
}

.css {
  width: 60%;
}

.js {
  width: 30%;
}

.skill-level-indicator {
  width: 45px;
  position: absolute;
  right: -10px;
  top: -23px
}

.skill-percent {
  position: absolute;
  color: #FAFAFA;
  top: -34px;
  right: 0px;
  font-weight: 400;
  font-size: 0.75em;
}

<aside>
  <div class="wrapper">
    <h2 class="skills-title">Skills</h2>
    <div class="skill-info">
      <p>I am currently studying a Tech-degree in Front-End Web Development with Team Treehouse. The degree covers HTML CSS and JavaScript. I am now in the process of completing my second project out of 12.</p>
      <p>Below is a list of my skill levels within the coding languages I am learning.</p>
    </div>
    <!-- SKILL LEVEL INDICATORS -->
    <div class="skill-points">
    
      <p>HTML</p>
      <div class="point-container">
        <div class="points html">
          <img src="images/Skill-Level-Percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator" />
          <p class="skill-percent">70%</p>
        </div>
      </div>

      <p>CSS</p>
      <div class="point-container">
        <div class="points css">
          <img src="images/Skill-Level-Percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator" />
          <p class="skill-percent">60%</p>
        </div>
      </div>

      <p>JavaScript</p>
      <div class="point-container">
        <div class="points js">
          <img src="images/Skill-Level-percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator diy" />
          <p class="skill-percent">30%</p>
        </div>
      </div>

    </div>
  </div>
</aside>

谢谢!!

Answer 1

它是 100% 宽并且有 25 像素的边距。

所以如果容器是 200px 宽，那么它将从 25px 点运行到 225px 点。

如果您希望宽度填充考虑边距、边框和填充后剩余的任何空间，请将宽度保留为 auto。