我有3个网页。第一个是发明家,第二个是PythonTutorialHome,第三个是HTMLTutorialHome。第二个和第三个在浏览器中看起来相同。请注意,页面的代码完全相同。它们看起来应该完全相同。出于某种原因,发明家的div比PythonTutorialHome和HTMLTutorialHome中的div大。我使用的是谷歌Chrome浏览器,它们是我计算机上的文件。
以下是发明家的代码:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
以下是PythonTutorialHome的代码:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
与这些网页相关联的CSS是:
#header {
position:absolute;
left:0px;
top:0px;
background-color:#8AC007;
width:100px;
height:30px;
}
当我将宽度和高度更改为百分比时,它们在所有三个页面中都是相同的。当尺寸为像素时,会产生不同的结果。这是怎么回事?