今天我在CSS中学习了2个概念,一个是CSS定位(静态,相对,绝对,固定),另一个是CSS Margin,它定义了元素之间的空间.
假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎都可以做同样的事情.一个例子可能如下:
Haha hahahaha
hehehehe
Haha hahahaha
hehehehe
1.)正如你所看到的,通过将第二个标题移动到第一个标题的顶部,上面的2个代码做了同样的事情.所以我只是想知道哪种方法实际上是排列元素的正确方法?
不,它们不一样,使用position: relative;
保持元素在流中,它只是移动元素position
但物理上它在流中保留空间,而使用margin
它移动整个元素影响元素周围移动使用的元素margin
,这也导致在某些情况下,利润率会下降......
演示(position: relative;
)
演示(附margin
)
CSS定位如何工作?几分钟后我才在这里解释
此外,margin
定位完全是两个不同的东西,定位是一个巨大的概念,在margin
完全不同的情况下,定位不会影响您的盒子模型,在这里margin
,边距用于隔离元素,说inline-block
元素,或说你在段落的上方和下方需要一些空间,它们并不意味着position
要素......
如果你看到这个
保证金需要的元素周围区域,即如果一个元素是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
元素你想要的方式...