2014-01-08 126 views
0

标记:浏览器设置了多少高度?

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <table width="500" border="0"> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;"> 
        <h1>Main Title of Web Page</h1> 

       </td> 
      </tr> 
      <tr> 
       <td style="background-color:#FFD700;width:100px;"> <b>Menu</b> 
        <br>HTML 
        <br>CSS 
        <br>JavaScript</td> 
       <td style="background-color:#eeeeee;height:200px;width:400px;">Content goes here</td> 
      </tr> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright ? W3Schools.com</td> 
      </tr> 
     </table> 
    </body> 
</html> 

在HTML中,有没有关于顶线和底线的高度定义。浏览器设置了多少高度?因为每个浏览器将用自己的方式表

enter image description here

+0

不要使用表格进行布局。 – bjb568

+0

按'F12'打开开发人员工具,然后选择'计算'选项卡。选择任何元素,它会显示计算出来的尺寸。 – Abhitalks

+0

如果HTML是在Firefox中,我怎么能看到这样的事情在铬? –

回答

0

使用表格会造成很多问题。您必须重置浏览器的默认样式并手动设置样式。反而使用它没有表。现在

<!DOCTYPE html> 
<html> 
    <body> 
    <div id='header'><h1>Main Title of Web Page</h1></div> 
    <div id='sideBar'> 
     <ul> 
     <li>Menu</li> 
     <li>HTML</li> 
     <li>CSS</li> 
     <li>Other</li> 
     </ul> 
    <div id='pageContainer'> 
     <h2>Content goes here</h2> 
    </div> 
    <div id='footer'>Copyright ? W3Schools.com</div> 
    </body> 
</html> 

您可以在CSS样式它根据自己的需要。

+1

不同浏览器如何设置表格的样式并不是真正的问题。此外,列表,标题,表单元素......的风格也不尽相同。这就是各种各样的css_reset_文件存在的原因,这些文件包含在自己的css之前,以便拥有共同的外观。但是你不应该为非表格数据使用表格。 –

0

要回答最简单的方式你的问题...浏览器根据页面的内容将视口的尺寸,如果没有被明确定义... see this

<div>This is atext</div> 

CSS

html, body { 
    /* height:100%; 
    width:100%; */ 
    margin:0; 
    padding:0; 
} 
div { 
    border:1px solid #000; 
} 

一旦产品尺寸已经html,body设置...它占用的宽度提到see again here

html, body { 
    height:100%; /*defined*/ 
    width:100%; /*defined*/ 
    margin:0; 
    padding:0; 
} 
div { 
    border:1px solid #000; 
} 
相关问题