CSS Positioning和CSS Margin的区别

sxpgvts3 于 2023-05-02 发布在其他

关注(0)|答案(4)|浏览(111)

今天我学习了CSS中的两个概念，一个是CSS定位（静态，相对，绝对，固定），另一个是CSS边距，它定义了元素之间的空间。
假设我想移动一个元素，哪种方法最好？因为这两个概念似乎可以做同样的事情。一个示例可能如下所示：

代码（CSS定位）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS positioning
            h2{position:relative;top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

代码（CSS Margin）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS Margin
            h2{margin-top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

问题：

1.）正如你所看到的，上面的2个代码通过将第二个标题移动到第一个标题的顶部来做同样的事情。所以我想知道哪种方法才是排列元素的正确方法？

css

来源：https://stackoverflow.com/questions/20719109/difference-between-css-positioning-and-css-margin

4条答案

按热度按时间

hlswsv351#

不，它们不一样，使用position: relative;将元素保留在流中，它只是移动元素position，但在物理上它保留了流中的空间，而使用margin移动整个元素，这会影响使用margin移动的元素周围的元素，这在某些情况下也会导致折叠边距。..
Demo（position: relative;）
Demo（带margin）
CSS Positioning是如何工作的？我几分钟前刚解释过
另外，margin和定位是完全不同的两件事，定位是一个巨大的概念，因为margin是完全不同的，定位不会影响你的盒子模型，而margin，margins用于空间的元素，比如inline-block元素，或者说你需要一些空间在段落上方和下方，它们并不意味着position元素等。..
如果你看到这个

Margin占用元素周围的区域，即。如果一个元素是50px在width中，你使用10px的margin，它在所有的边都占用10px，所以它实际上会让你的元素总共占用70px，50px => width + 10px => left margin + 10px => right margin，其中使用position，它不会扩大或减少元素周围的面积，它只是改变了元素的position，这可能会或可能不会影响页面上的其他元素，这取决于position，而margin改变了盒子模型，因此，它也影响了其他元素的position，如static和relative。
此外，margin并不是垂直应用于inline元素，所以如果你将margin应用于span或任何其他inline元素，比如a，margin只会水平而不是垂直，为此，你必须使它们成为inline-block或block水平元素。
如需了解更多信息，请阅读我对另一个问题的回答**。你可以将position: relative;应用于任何元素，不管是block、inline还是inline-block，它都会以你想要的方式position元素。..

赞(0）回复(0）举报 2023-05-02

omhiaaxx2#

CSS定位和边距都可以用来移动网页上的元素。然而，它们以不同的方式工作，并用于不同的目的。CSS定位用于在网页上精确地放置元素，而边距用于定义元素周围的空间。
在您的示例中，使用CSS定位将第二个标头移动到第一个标头上方是更合适的方法。这是因为CSS定位是专门为定位元素而设计的，允许精确控制元素相对于其父元素或页面上其他元素的位置。
另一方面，Margin更适合于定义元素之间的空间，而不是将元素定位在另一个元素之上。虽然您可以使用负边距来移动元素，但这通常不被认为是最佳实践，因为它可能导致不可预测的结果，特别是在处理响应式网页设计时。
一般来说，使用CSS定位来精确地定位网页上的元素，并使用边距来定义元素之间的空间是一个好主意。但是，您选择的具体方法将取决于您的网页的特定要求和您试图实现的布局。
如果你想了解更多关于CSS定位的信息，我强烈推荐这个视频：https://youtu.be/arODwDNUUh8

赞(0）回复(0）举报 2023-05-02

nwsw7zdq3#

在CSS中，margin是边框外的空间。它把一个街区和其他人区分开来。但与填充的一个很大的区别是边缘不包括背景。换句话说，css positiong和css margin之间的区别是，它们不是相同的使用位置;relative ;将元素保留在流中，它只是移动元素的位置，但在物理上保留了流中的空间。

赞(0）回复(0）举报 2023-05-02

ujv3wf0j4#

有四种类型的CSS定位