CSS 边距未按预期工作

Question

Angular 项目

我有一个可在特定条件下工作的可调整大小的按钮。我的问题是我觉得我的代码应该可以工作，我会解释我有什么以及期望什么。

app.component.ts

<button class="button button5"> </button>

app.component.css

.button {
    background-color: #0066ff;
    border: 1px solid #0066ff;
    color: white;
    height: 60%;
    width: 60%;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 20%;
    padding: 0;
}

.button5 {
border-radius: 50%;
}

index.html

<body>
  <app-root>

  </app-root>
</body>

index.html css

<style>

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

app-root {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
}

</style>

我的目标是创建一个按钮，它始终是页面高度的 60%，距离顶部的 20%。此外，宽度为 60%，而距左侧为 20%。

这在某些条件下非常有效，例如。Here is my goal, unresized but when I resize it a little bit This happens。

如您所见，它不是 20%。我不知道为什么，我从来没有 hard code values 而我一直都是 strictly using percentages 所以我认为这是万无一失的。为什么上面看起来是5%，下面是35%

Answer 1

我认为你应该使用 vh 和 vw 单位（称为 viewport units）。如果你总是想要屏幕的 20% 作为边距，那么它就是 20vh，其他属性也一样。 % 总是指宽度，所以如果你调整屏幕的大小，你会得到更小的宽度，从而减少边距。但是使用 20vh 意味着屏幕高度的 20%，所以它不受屏幕宽度的影响：

.button {
  background-color: #0066ff;
  border: 1px solid #0066ff;
  color: white;
  height: 60vh;
  width: 60vw; /*You can also keep 60% as % depend on width and here width of parent is equal to 100vw so you will have the same result*/
  margin-left: 20vw; /* You can also keep 20%*/
  margin-right: auto;
  margin-top: 20vh;
  padding: 0;
}

.button5 {
  border-radius: 50%;
}

<button class="button button5"> </button>

但你似乎想居中屏幕中间的按钮，所以你可以依靠 flex 并避免指定边距:

body {
  height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.button {
  background-color: #0066ff;
  border: 1px solid #0066ff;
  color: white;
  height: 60vh;
  width: 60vw;
  padding: 0;
}

.button5 {
  border-radius: 50%;
}

<button class="button button5"> </button>

CSS 边距未按预期工作

CSS margins not working as expected

html

css

margins

button