这是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%。有人可以帮我解释一下吗?
浏览器会自动将<body>
元素的宽度设置为等于浏览器窗口的宽度。