Question

这是添加样式之前的页面：

然后是这样：

我不确定是什么引起了错误。我唯一可以确定的是，当我应用背景色时，整个过程都会变得古怪。这样做的目的是获得一个带有白色背景的漂亮下载按钮，以使它在用户中脱颖而出。但是，似乎该元素已从其父级继承了height值。是否有任何简洁的解决方案？

:root {
    --default-width: 600px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: whitesmoke;
    margin: 0;
    font-family: Open Sans, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Comfortaa, sans-serif;
}

a {
    text-decoration: none;
    color: black;
}


header {
    position: relative;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background-color: white;
    height: 600px;
}

header h1 {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
    line-height: 540px;
}

header p {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
    line-height: 620px;
}

header a {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    margin: 0;
    line-height: 720px;
}

main {
    margin: 0 auto;
    width: var(--default-width);
}

.header-nav {
    text-align: right
}

.header-nav ul {
    list-style-type: none;
    margin: 0;
}

.header-nav li {
    display: inline-block;
    padding: 20px;
    transition: background-color 0.1s ease-in-out 0s, color 0.1s ease-in-out 0s;
}

.header-nav li:hover {
    background-color: darkgrey;
    color: white;
}

.important-button {
    color: blue;
    background-color: whitesmoke;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Comfortaa" rel="stylesheet">
    <link rel="stylesheet" href="index.css" />
    <title>Scriptura</title>
  </head>
  <body>
    <nav class="header-nav">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Support Us</a></li>
        <li><a href="#">GitHub</a></li>
      </ul>
    </nav>

    <header>
      <h1>Welcome To <em>Scriptura</em></h1>
      <p>The premier note-taking software on the web!</p>
      <a class="important-button" href="#">Download Now!</a>
    </header>

    <main>
      <section>
        <h2>What Is <em>Scriptura</em></h2>
        <p>
          <em>Scriptura</em> begins with the bare-bones features of text-editing when you download it initially; however, as your needs expand, you can add more and more to it, like:
        </p>
        <ol>
          <li>Custom Note Templates</li>
          <li>Customizable Themes</li>
          <li>Data Displays (Tables, Cells, Grouping Columns etc.)</li>
          <li>And more on the way!</li>
        </ol>
      </section>
    </main>


    <script src="index.js"></script>
  </body>
</html>

这可能与元素的位置有关，但是请注意，我使用绝对居中技巧来获得您在初始镜头中看到的所需效果。因此，请尽可能将标题中的内容垂直和水平居中放置。

Answer 1

对于锚标记，您给定了绝对位置，这意味着它将查找具有位置相对元素的父元素，并获取具有位置相对元素的父元素的with和height。

因此，如果您进行以下更改，则看起来像是要求

header a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 16px;
}

将样式应用于锚元素会导致内容意外扩展

1 个答案: