Question

我正在尝试以下所示链接中的代码以进行响应式布局设计。

1）照原样，如果html代码中包含CSS代码，则可以按预期完美显示

2）但是，如果我将确切的CSS代码移到另一个文件中并从html代码链接到它，则从视觉上看，盒子的布局效果不佳。在不同的浏览器中，结果似乎相似。

有人知道原因吗？我原本希望得到更多相似的视觉结果

一般来说，网站html代码像（1）中那样将css包含在html代码中，或者像（2）中那样作为其他文件也可以

https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog

这是我用来链接到CSS文件的代码

<!DOCTYPE html>
<html lang="en-US">

<body>
<head>
  <title>My page</title>
  <link rel="stylesheet" href="styles.css">
</head>

这是CSS工作表的顶部代码

<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

这是结果的屏幕截图

enter image description here

编辑

在Lunex回答后查看CSS表单代码（顶部）

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

Answer 1

创建一个CSS文件。假设您将其命名为“ style.css”。

在此文件中，您将所有位于

如果将此CSS代码作为其他文件包含在内，为什么在视觉上会得到不同的结果

1 个答案: