как можно использовать процент для заголовка, если ширина тела не была установлена - PullRequest
Новая
       42

как можно использовать процент для заголовка, если ширина тела не была установлена

0 голосов
/ 14 января 2020

Это 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 Ответ

0 голосов
/ 14 января 2020

Браузер автоматически устанавливает ширину элемента <body>, равную ширине окна браузера.

Пример. Если окно вашего браузера имеет ширину 800px, вы можете представить, что браузер вставляет следующее CSS: 

body {
  width: 800px;
}

Вы не можете увидеть это CSS в своем собственном коде, но оно там, спрятано в браузере. Таким образом, вы правы, полагая, что установка ширины <header> на 100% означает, что она должна составлять 100% ширины родительского элемента, и именно поэтому это работает в этом случае.

...