Question

我目前正在更新我的网站。但是，当我添加！DOCTYPE时，左侧菜单的布局不一样了）

我知道我不是第一个在这个论坛上提出这个问题的人，但是我找不到问题的答案。

我的理解是我的CSS是问题，所以这里是我使用的代码。

.gh {background:#C81919; text-align:right; vertical-align:top; padding-top: 20px;}
.gauche {background:#C81919; WIDTH:180; padding: 0 5px 0 5px; font-size:11pt;         font-weight:bold; color:EADBC6; text-align:right; vertical-align:top;}
.dh {WIDTH:640; padding: 20px 0px 15px 1px; vertical-align:top; font-size:13pt;}
.droit {WIDTH:600; padding-left:41px; font-size:13pt; color:black; line-height:28px; text-align:justify; vertical-align:top;}
sup {line-height: 0;}
ul {margin: 0; padding: 0; list-style-type: none;}
li {margin: 0px 0px 6px 0px;}
#liste a:hover {background:url("marble1.gif"); color: C81919;}
#liste a {background-color: 000000; display: block; width: 180; padding: 6px 6px; color: EADBC6; text-decoration: none;}
#liste2 a {display: block; width: 180; padding: 2px 6px; color: EADBC6; text-decoration: none;}
#liste2 a:hover {background:url("marble1.gif"); color: C81919;}

Answer 1

Doctypes控制浏览器如何理解您的HTML，CSS和JavaScript。它可能会关闭浏览器的某些功能，或者打开其他功能。因此，您需要确保编写干净且格式良好的代码。这不仅可以确保浏览器对您的代码更加困惑，还可以让您更轻松地管理您的期望。

虽然您的上述代码不使用任何边缘功能，但它确实有几个问题：

WIDTH:180你需要在这里放一个单位。不要认为会为您提供px。
background-color: 000000，color:EADBC6十六进制值需要以#开头。

这些只是可能影响您的布局和演示的几个例子。

另一个重要主题是box-model，它是浏览器通过添加内容宽度，填充，边框和边距来计算元素总宽度的方式。历史上的浏览器过去曾有过不同的看法，但今天我们可以将他们的理解与CSS中的box-sizing结合起来：

* { box-sizing: border-box; }

这指示所有现代浏览器根据框本身的边框设置其框模型（针对所有元素）。但是，此功能是一个较新的功能，需要标准文档类型。因此，为了确保在大多数浏览器中正常运行，请使用以下doctype：

<!DOCTYPE html>

最后，请确保这是代码中的第一件事。在此之前没有任何内容，或者某些浏览器可能会导致文档类型无效。

添加doctype会修改布局

1 个答案: