Question

这是我的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           |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Answer 1

<html> element may only contain <head> and <body> elements *：

<!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>元素移动的原因是implicit <body> element is being created immediately after your <head> element包含结构元素。

_*假设HTML5

body标签是否有一些控制其他元素的样式规则？

1 个答案: