为什么我的 div 在显示网格中展开以覆盖所有可用区域？

Question

我正在尝试在 2 div 秒内插入 2 个按钮。我的 CSS 中的所有 div 都有分配的显示网格。

我的问题是，为什么带有 class 左按钮和右按钮的 div 会展开以占用所有可用的 space，即使我没有告诉他们这样做宽度为 100% 还是宽度为 100vw？

致所有其他 div 我确实指定为 100vw 但不是最后一个，所以他们为什么继续扩大。

如果我把 display: block 放在它们里面它会起作用，但我不明白为什么我必须首先指定它？

这是我的代码：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  display: grid;
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}

<!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" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

Answer 1

Specificity 似乎有问题。

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

你基本上回答了你自己的问题。 display: block; 有效，因为这是 div 的默认值 display。您有 div { display: grid;} 更改了 div's.

的 all 上的默认值 display: block;

display: grid; 将尝试使用所有可用的 space。因此，为什么你的按钮被拉长了。我要么将 grid 放在仅适用的 div 上。或者，您可以像这样使用 :not pseudo-class：

div:not(.div-button-right, .div-button-left) {
  display: grid;
  border: dotted 1px #ff0;
}

这将排除 :not pseudo-class 中定义的 div 样式。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  display: grid;
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  display: grid;
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  display: grid;
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}

<!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" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

为什么我的 div 在显示网格中展开以覆盖所有可用区域？

Why my div in display grid expand to cover all is available area?

html

css

css-grid