CSS 初学者常见错误：过度使用 div 和绝对定位

在 Search-This 上有一篇文章指出了几个有趣的初学者错误。以下是其中的一些重点以及我们自己的一些见解

绝对定位。 - 学习 CSS 时，你获得的第一种能力之一就是可以使用类似于 X、Y 坐标和尺寸的东西来控制页面上任何元素的位置和大小。当然，绝对定位有其用途，但通常不适用于实际的页面内容。绝对定位的物体忽略所有其他物体，并限制了你对内容保持灵活性的能力。
设置高度（当你不需要时） - 这是对控制的渴望。强制设置物体的高度使其“看起来像你想要的那样”非常诱人，但这会真正搞乱物体内部的内容。一般来说，不要设置高度，让你的物体根据内部内容自动增长，并使用边距、填充和浮动来控制你的位置。看看下面框里的情况，你可以使用字体设置将高度调整到合适的大小，但是如果用户增加了该设置，内容就会超出框外，看起来很糟糕
[MISSING IMAGE, Sorry]
“Divitis” - Div 是通用的页面分隔符，用于将页面内容划分为有意义的部分。CSS 在很大程度上利用了这一点，初学者会注意到并紧紧抓住这一点。然后，一旦他们发现可以通过给 div 类和 id 来控制各种东西，他们就开始用 div 来做所有事情
```
<div id="header">
   <div class="bold">Heading</div>
</div>

<div id="subheader">
   <div class="bold">Sub Heading</div>
</div>

<div>This is the content</div>
```
这是不必要的，实际上还有害，因为搜索引擎会查看 HTML 来更好地理解你的页面内容。<h1> 标签指定一个“标题”，因此如果使用正确，搜索机器人会给予它更高的权重。
```
<h1>Heading</h1>
<h2>Sub Heading</h2>
<p>This is the content</p>
```
HTML 提供标签来描述你的内容。使用它们。这对每个人都有好处。
“Classitus” - 与 divitus 类似，classitus 指的是初学者将类应用于实际上不需要它的东西。将 class=”link” 应用于 <a> 标签是完全没有意义的，只需设置 <a> 标签的样式即可。如果你需要在页面上使用与其他链接不同的样式的链接，使用类可能合适，但请使用更具描述性的类名，例如 “footer_link” 或 “bold_link”。但请记住，如果你在页脚中包含五个链接，在你的 CSS 中设置 #footer a 的样式比在你的 HTML 中给每个链接一个类并使代码变得混乱要合理得多。

评论