Html 定位css的最佳实践

我已经开始从事网络开发，并为我的网站创建了初稿，但是我做的研究越多，我就越意识到我使用的定位方法并不好

使用边距定位是否优于使用相对/绝对 定位

当定位元素时，特别是对于响应性设计，什么是最佳实践

我应该避免使用哪些方法或哪些方法已经过时

对于响应性设计，边距和衬垫比定位使用%单位要好

您可以使用位置：相对；对于作为引导的响应性设计，也使用此定位，但当您在小型设备上查看时，使用绝对定位将移动您的内容

避免使用pt或px单位作为字体大小，使用'EM'

• 这取决于，

  相对

  位置是元素的位置 相对于HTML的实际流
• 而

  绝对

  定位在文档左上角的参考坐标中。（并非总是如此）
  响应式布局的最佳实践

没有什么是最好的，您必须知道何时使用

媒体查询

，并使用

%

而不是

px

作为列宽和

float

属性

您可以找到折旧财产和标签的列表

非常好的工作：）

---

您可以研究引导。我最近使用了它，通过这个framerowk，您可以创建令人惊叹的响应网站：）只需将指定的类和样式添加到

、

和其他HTML元素中。

CSS重置有助于建立一个基线，从中设置所有样式。重置可以有效地覆盖浏览器对某些元素的默认样式（可能会有很大的变化）。尽管CSS重置在过去几年中很流行，但许多网站仍然没有使用它们，而且这些网站的CSS可扩展性也因此受到很大影响

许多人建议使用normalize.CSS，而不是使用Eric Meyer非常流行的CSS重置（因为它影响太深远）或自行制作重置。css将代码“规范化”为公共基线，而不是在所有浏览器中重置元素的基本样式。参考Github上的normalize.css项目，与css重置相比，它有以下优势：

与许多CSS重置不同，保留有用的默认值 规范化各种HTML元素的样式 更正错误和常见的浏览器不一致 通过细微的改进提高可用性 解释使用详细注释时代码的作用 使用normalize.css代替标准重置将使您掌握正确的编码方法，并在不必重新建立基线样式的情况下节省大量时间

---

要依次回答您的每个问题：

这实际上取决于HTML中元素的上下文以及您试图在站点布局中实现的内容。很简单，一个问题通常有多种解决方案。有时使用利润率更合适，一些解决方案最好留给相对定位，而另一些时候，绝对定位是唯一的答案

请参见1，尽管我会避免以像素为单位的硬编码宽度和高度：

%

和

em

通常用于响应式设计。我最好的建议是遵循一些教程，看看CSS是如何协同工作的。CSS

媒体设计

通常用于响应性网页设计

对于过时的HTML和CSS，最好遵循W3C的建议。在我看来，您应该避免使用

标记来定义站点布局

---

有趣的阅读：

相对和绝对定位本身并不坏，有时有用，但很容易出错

您需要多个列。传统上，我们使用

float

属性，因为传统浏览器很好地支持它。有两个新属性也允许您创建列，但是传统浏览器不支持它们，所以现在我个人不鼓励使用，除非您绝对确定您的访问者运行现代浏览器，并且您不关心站点在传统浏览器上是否失败

捷径 无论如何，在CSS中浮动都很困难。我强烈推荐一个快速响应的网格系统。有许多CSS下载可用。您所要做的就是为列使用适当的类

• Bootstrap：（附带很多额外功能，因此请谨慎使用）
• 骨架：
• Pure.css：
• 响应网格系统：

还有很多

---

艰难的道路 到目前为止，浮动是最流行的选择。浮动元素导致块元素（如div）搁置一旁。对每列应用一个宽度，瞧，有多个列。使用排水沟和填充物进行尺寸调整有点烦人，因此我建议使用现有的样式表来为您完成这一切。基本上，在几个列之后，您必须附加一个具有

clear

属性的元素来修复布局流

或者，根据您的目标受众，您可以使用CSS或

---

为什么不使用绝对/相对？ 浏览器为您整理流程。生长的元素会把后面的任何东西都推倒。相对定位不会改变这种行为，但绝对定位会改变。它只是在你的东西上面打上了元素，你必须为你自己的满足腾出空间

我有时确实使用相对/绝对定位，但只是为了让事情重叠。例如，我有一个图像容器（相对），其中包含一个图像（绝对）和一个标题/标签（绝对）。通过绝对定位后两者，我可以在容器内随意移动。通过在容器上设置一个大小，我可以将其放在我想要的任何地方，而不会破坏流动。

1）使用边距定位是否会增加页面的宽度？也是为了一个愿望