代码之家 › 专栏 › 技术社区 › rene smith

当主体的宽度尚未设置时,如何使用标题的百分比

percentage width css html

0

rene smith · 技术社区 · 6 年前

这是html:

<body>
  <!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
  <header>
    <h2><a href="#">Mountain Travel</a></h2>
    <nav>
      <li class="new"><a href="#">Tours</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </nav>
  </header>

  <section class="hero">
    <div class="go_crazy"></div>
    <div class="background-image" style="background-image: url(assets/img/main.jpg);" >
    </div>
    <div class="hero-content-area">
      <h1>Mountain Travel</h1>
      <h3>Unmissable Adventure Tours Around The World</h3>
      <span class="old"><a href="#" class="btn">Contact Us Now</a></span>
    </div>
  </section>

</body>

这是CSS:

/*Header Styles*/

header {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 100px 0;
    animation: 1s fadein 0.5s forwards;
    opacity: 0;
    color: #fff;
}

在CSS文件中,没有设置主体的宽度,但是为什么开发人员可以使用100%作为标题?? 我认为这意味着100%的家长的宽度。有人能给我解释一下吗??

1 回复 | 直到 6 年前

1

0

Caleb Miller 6 年前

浏览器自动设置 <body> 元素等于浏览器窗口的宽度。

示例:如果您的浏览器窗口宽800px,您可以想象浏览器插入以下CSS:

body {
  width: 800px;
}

你不能在自己的代码中看到CSS,但它就在那里,隐藏在浏览器中。所以你认为 <header> 到100%的宽度意味着它应该是父级宽度的100%,这就是为什么在这种情况下可以工作的原因。