在 CSS 中频繁使用“位置”标签而不是使用“边距”和“填充”标签是不是有任何限制？

Posted 2023-03-06

【中文标题】在 CSS 中频繁使用“位置”标签而不是使用“边距”和“填充”标签是不是有任何限制？

【英文标题】：Are there any limitations of frequently using "position" tag in CSS instead of using "margin" and "padding" tags?在 CSS 中频繁使用“位置”标签而不是使用“边距”和“填充”标签是否有任何限制？

【发布时间】：2017-10-30 03:22:17

【问题描述】：

我使用 html 和 CSS 已经有一段时间了。 每次我在 CSS 中工作时，我都会感觉自己没有“做对”。

例如，在网页上定位不同的 div 和元素时，我经常使用“位置：绝对”和“位置：相对”。 这有时会非常乏味地找到“正确”的位置，并导致非常难看的数字，例如：

position: relative; 
width: 1300px; 
height: -720px;

除了上述之外，如果我改变对它们的外观或位置的想法，以后编辑上述 div 和元素也会变得非常困难。 我在 YouTube 上看过很多教程，人们使用“margin”和“padding”标签来定位他们网站上的元素。

我对此感到非常困惑，因为这些标签应该用于在元素周围创建空间，而不是实际改变它们的位置。 奇怪的是，稍后使用“margin”和“padding”标签编辑网站要容易得多，如果您改变了对这些元素的外观/位置的看法，因为它们不会四处移动并相互重叠.

对于冗长的查询，我深表歉意，但最近这一直困扰着我，我将不胜感激有关 CSS 中元素定位的任何建议。

谢谢

【问题讨论】：

使用 CSS 应用布局有很多不同的方法，不同的技术对不同的事物有用。 Flexbox 和 Grid 通常比边距、填充或定位更有用。您确实没有足够具体的问题来给出一个好的答案。

尝试花一些时间学习引导程序。

【参考方案1】：

position与margin或padding最大的区别在于，当你将position设置为absolute、relative或fixed时，该元素是从“正常流”中取出的" 并放置在其自己的图层中。这就是允许您使用z-index 属性并将元素堆叠在一起的原因。当相关元素将被动态调整大小或动画时，这具有显着优势，因为这样做不会导致文档中的所有其他元素必须“重新流动”，也不会导致整个文档“重新绘制” ”。事实上，在使用动态大小或动画时，强烈建议您以这种方式将元素从流中取出，否则性能会受到影响。

除此之外，understanding how absolute, relative and fixed positioning work 是必不可少的。

绝对定位 相对于其最近的祖先定位元素，该祖先本身已手动定位，如果没有定位祖先，则定位到 body 元素。元素从流中取出，元素在该流中占用的所有空间都将被删除。

相对定位将元素定位为其在正常流程中的原始位置的偏移量，但保留元素在文档中占用的原始空间，即使该元素现在位于其自己的层中.

Fixed Positioning 类似于绝对位置，只是位置不相对于任何东西。它固定在您指定的确切位置。

虽然所有这些都会将元素拉入自己的层，但层的堆叠方式（通过 "stacking contexts"）取决于您使用的定位类型以及正在定位的元素。

这些是使用position 的原因。如果您不需要新图层，则使用 CSS float、flexbox 是可以提供设计布局的替代方法的工具。

margin 和padding 真的不应该用于布局本身。它们用于布局中的小调整。

总而言之，浏览器布局页面内容的默认方式是 CSS Box Model，但使用 CSS position 是让某些内容使用该框模型的一种方式与主要内容不同的层次。 CSS 浮动提供了另一种独立的布局算法，而 Flexbox 提供了另一种。在不久的将来，CSS Grid specification 将被标准化，并且将提供另一种布局范式。

但margin 和padding 不是布局模型。它们只是在您碰巧使用的任何布局模型中使用的工具。