正文标签是否具有控制其他元素的样式规则

这是我的HTML结构

<html>
   <head>
      <style></style>
      <title></title>
   </head>
   <header></header>
   <nav></nav>
   <body></body>
   <footer></footer>
</html>

这就是风格

html{
    height:99%;
    width: 99%;
    position:absolute;} 
header{
    position:absolute;
    top:0%;     left:0%;
    width:100%; height:7%;}
nav{
    position:absolute;
    top:7%;    left:0%;
    width:10%; height:85%;}
body{
    position:absolute;
    top:0%;    left:0%;
    width:90%; height:90%;}
footer{
    position:absolute;
    top:100%;  left:0%;
    height:5%; width:100%;}

我确实有边框和背景颜色来识别页面上的元素，但为了简洁起见，省略了。

我希望它看起来像下面，每个元素都相对于 html 标签进行设置（定位）。但是当我定位身体时，所有其他东西都会随之移动。即使他们不是标签的子项。

 ------------------------------
|           Header            |
|¯¯¯¯|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|    |                        |
|Nav |                        |
|    |       Body             |
|    |                        |
|____|________________________|
|            Footer           |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

<html> 元素只能包含<head>和<body>元素*：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

用于表示的所有元素都属于<body>元素：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <header>
      <h1>Example</h1>
    </header>
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <footer>
      <address>
        Some location
      </address>
    </footer>
  </body>
</html>

一切都相对于<body>元素移动的原因是，在<head>元素之后立即创建一个隐式<body>元素以包含结构元素。

_{* 假设 HTML5}

相关内容

最新更新

热门标签：