Fatal编程技术网
  • css/
  • CSS定位和CSS边距之间的差异

CSS定位和CSS边距之间的差异

css

CSS定位和CSS边距之间的差异,css,css-position,margin,Css,Css Position,Margin,今天我学习了CSS中的两个概念，一个是CSS定位（静态、相对、绝对、固定），另一个是CSS边距，它定义元素之间的空间 假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎能够做相同的事情。例如： 代码（CSS定位）： 哈哈 //使用CSS定位 h2{位置：相对；顶部：-80px} 哈哈哈 呵呵呵呵 代码（CSS边距）： 哈哈 //使用CSS边距 h2{页边距顶部：-80px} 哈哈哈 呵呵呵呵 问题是： 1.）如您所见，上述两个代码通过将第二个收割台移动到第一个收割台的顶部完成了相

今天我学习了CSS中的两个概念，一个是CSS定位（静态、相对、绝对、固定），另一个是CSS边距，它定义元素之间的空间

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

代码（CSS定位）： 

哈哈
//使用CSS定位
h2{位置：相对；顶部：-80px}
哈哈哈
呵呵呵呵
代码（CSS边距）： 

哈哈
//使用CSS边距
h2{页边距顶部：-80px}
哈哈哈
呵呵呵呵
问题是：
1.）如您所见，上述两个代码通过将第二个收割台移动到第一个收割台的顶部完成了相同的操作。所以我只是想知道哪种方法是排列元素的正确方法？

不，它们不一样，使用
位置：相对
将元素保留在流中，它只移动元素
位置
，但实际上它在流中保留了空间，而使用
边距
它将影响元素的整个元素移动到使用
边距
移动的元素周围，在某些情况下还会导致边距塌陷

（
位置：相对；
）

（带
边距
）

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

另外，
margin
和定位是完全不同的两件事，定位是一个巨大的概念，其中as
margin
是完全不同的，定位不会影响您的盒子模型，而as
margin
是这样做的，margin用于分隔元素，比如说
内联块
元素，或者说你需要在段落上方和下方留出一些空间，它们不是用来定位元素等的

如果你看到这个

边距取元素周围的面积，即如果元素在
width
中为
50px
，并且使用
10px
的
Margin
，它在所有边上取
10px
，因此它实际上会使元素总共占据
70px
，宽度+10px=>left-Margin+10px=>left-Margin+10px=>right-Margin，如果使用
位置
，它不会扩展或减少元素周围的区域，它只会更改元素的
位置
，这可能会或可能不会影响页面上的其他元素，具体取决于
位置
，而
边距
会更改框模型，因此，它还影响其他元素的
位置
，如
静态
和
相对

另外，
margin
不垂直应用于
inline
元素，因此如果将
margin
应用于
span
或任何其他
inline
元素，比如
a
，
margin
将仅水平而非垂直地获取，您必须使它们成为
内联块
或
块
级别元素

有关详细信息。而您可以应用
位置：相对
到任何元素，无论
块
，
内联块
或
内联块
它都将
按您希望的方式定位该元素…
css边距是边框外的空间。它把一个街区和其他家伙分开。但是填充的一个很大的区别是边距不包括背景。换句话说，css positiong和css边距的区别是，不，它们在使用position时不一样；亲属；将元素保持在流中它只是移动元素位置，但在物理上它在流中保留空间


       different types of css position


有四种类型的css定位
1.静止的
2.相对的
3.绝对的
4.固定的
静态：-这是每个页面元素的默认值。
对于位置G，不同的元素没有不同的结果。
相对：-这种类型的假设可能是最令人困惑和误用的。
绝对：-这是一种非常强大的定位类型，允许您将任何页面元素直接放置在您想要的位置。

修正：-这是positiong的类型非常罕见，但肯定有用处。
如果你认为这有点混淆，请看一下CSS3的转换属性：）那么如果我使用position:absolute怎么办？它将具有与margin正确使用时相同的效果？@caramel1995 no，
position:absolute与页边空白无关，请阅读我链接到的其他答案，仔细阅读，并确信您将理解所有位置：）

<!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>



       different types of css position