CSS Positioning 和 CSS Margin 的区别

问题描述 投票：0回答：4

今天学习了CSS中的两个概念，一个是CSS定位（static, relative, absolute, fixed），另一个是CSS Margin，它定义了元素之间的空间。

假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎都能做同样的事情。一个例子可能如下：

代码（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边距）：

<!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.)正如你所看到的，上面的两个代码通过将第二个标题移动到第一个标题的顶部来做同样的事情。所以我只是想知道哪种方法实际上是排列元素的正确方法？

css css-position margin
4个回答
8
投票

不，它们不一样，使用 

position: relative;
保持元素在流中，它只是移动元素 
position
但物理上它在流中保留空间，而使用 
margin
它移动整个元素，影响周围的元素使用
margin
移动的一个，在某些情况下也会导致边距崩溃......

演示 (

position: relative;
)

演示（带

margin
）

CSS 定位如何工作？我刚刚在here几分钟前解释过

此外，

margin
和定位是完全不同的两个东西，定位是一个巨大的概念，而
margin
完全不同，定位不会影响你的盒子模型，而
margin
会，边距用于空间向上元素，说
inline-block
元素，或者说你需要在段落上方和下方留出一些空间，它们并不意味着
position
元素等......

如果你看到这个

enter image description here

边距占据元素周围的区域，即如果一个元素是

50px
中的
width
并且你使用
margin
的
10px
，它在所有方面都需要
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
投票

CSS 定位和边距都可以用来移动元素，但它们的用途不同。 CSS 定位用于相对于其包含元素或文档本身定位元素，而边距用于在元素周围创建空间。在这种情况下，使用 margin 来移动元素并不是正确的方法。定位元素推荐使用CSS定位。如果您想了解有关 HTML 和 CSS 的更多信息，请查看我的 YouTube 播放列表：https://youtube.com/playlist?list=PLC1X2GFQWgkKt3ornjCexNhAdDknT0CaU.

-1
投票

css margin 是边框外的空间。它将一个块与其他块分开。但是与填充的一个很大的区别是边距不包括背景。换句话说，css positiong 和 css margin 之间的区别是，不，它们在使用 position ;relative ; 时不一样。保持元素在流中它只是移动元素位置但物理上它在流中保留空间。

-1
投票

CSS定位有四种类型

  1. static：这是每个页面元素的默认设置。不同的元素没有不同的定位结果。
  2. 相对：这种定位可能是最令人困惑和误用的。
  3. absolute：这是一种非常强大的定位类型，可让您准确地将任何页面元素放置在您想要的位置。
  4. fixed：这是一种相当少见但肯定有用的定位类型。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.