html - "phone"的格式不工作

Question

我目前正在开发我的第一个使用 html/css/javascript 的 chrome 扩展。我有一个问题，到目前为止，stackoverflow 中的所有问题似乎都无法回答我的问题。

我有一个看起来像手机的布局，就像 iPhone 一样。基本上，我在 homepage-bottom ID div 内的按钮无法正常工作。我想要 homepage-bottom-inside ID div(它的颜色是黑色)圆形。

目前看起来像这样。

请解释我的错误，并修复代码。

#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 50px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

<div id="homepage-bottom">
  <div id="homepage-bottom-content">
    <div id="homepage-bottom-content-inside"></div>
  </div>
</div>

额外

这就是“手机”的整体外观。

#homepage {
  margin: auto;
  height: 620px;
  width: 330px;
  background-color: lightblue;
  border-radius: 40px;
  border: black 7px solid;
}
#homepage-content {
  margin: auto;
  height: 470px;
  cursor: cell;
  width: 270px;
  background-color: white;
  border-radius: 7.5px;
  border: 3px black solid;
}
#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 50px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

<div id="homepage">
  <div id="homepage-top">
    <div id="homepage-top-content">
      <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
      <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
    </div>
  </div>
  <div id="homepage-content">
  </div>
  <div id="homepage-bottom">
    <div id="homepage-bottom-content">
      <div id="homepage-bottom-content-inside"></div>
    </div>
  </div>
</div>

Answer 1

padding-top 是总高度的一部分，所以 height:40px + padding-top:10px 为 主页底部内容。

请注意，边框 厚度也是总高度的一部分。

#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

<div id="homepage-bottom">
  <div id="homepage-bottom-content">
    <div id="homepage-bottom-content-inside"></div>
  </div>
</div>

额外

你的手机修好了:

#homepage {
  margin: auto;
  height: 620px;
  width: 330px;
  background-color: lightblue;
  border-radius: 40px;
  border: black 7px solid;
}
#homepage-content {
  margin: auto;
  height: 470px;
  cursor: cell;
  width: 270px;
  background-color: white;
  border-radius: 7.5px;
  border: 3px black solid;
}
#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}

<div id="homepage">
  <div id="homepage-top">
    <div id="homepage-top-content">
      <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
      <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
    </div>
  </div>
  <div id="homepage-content">
  </div>
  <div id="homepage-bottom">
    <div id="homepage-bottom-content">
      <div id="homepage-bottom-content-inside"></div>
    </div>
  </div>
</div>