CSS定位和CSS边距之间的区别

 猪宝宝的事 发布于 2023-02-08 18:07

今天我在CSS中学习了2个概念,一个是CSS定位(静态,相对,绝对,固定),另一个是CSS Margin,它定义了元素之间的空间.

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

代码(CSS定位):



    
        
        Haha

        
    

    
        

hahahaha

hehehehe

守则(CSS保证金):



    
        
        Haha

        
    

    
        

hahahaha

hehehehe

问题:

1.)正如你所看到的,通过将第二个标题移动到第一个标题的顶部,上面的2个代码做了同样的事情.所以我只是想知道哪种方法实际上是排列元素的正确方法?

1 个回答
  • 不,它们不一样,使用position: relative;保持元素在流中,它只是移动元素position但物理上它在流中保留空间,而使用margin它移动整个元素影响元素周围移动使用的元素margin,这也导致在某些情况下,利润率会下降......

    演示(position: relative;)

    演示(附margin)

    CSS定位如何工作?几分钟后我才在这里解释


    此外,margin定位完全是两个不同的东西,定位是一个巨大的概念,在margin完全不同的情况下,定位不会影响您的盒子模型,在这里margin,边距用于隔离元素,说inline-block元素,或说你在段落的上方和下方需要一些空间,它们并不意味着position要素......

    如果你看到这个

    在此输入图像描述

    保证金需要的元素周围区域,即如果一个元素是50pxwidth和你使用margin10px,它需要10px在各方面,所以它实际上使你的元素占70px总量,50px => width + 10px => left margin + 10px => right margin其中与使用position,它不会扩大或缩小区域该元件周围,它只是改变了position这可能会或可能不会影响取决于在网页上的其他元素的元素position,而margin改变了盒模型,并且因此,它也影响position其它元件,如staticrelative.


    此外,margin未垂直应用于inline元素,因此,如果您将marginspan或任何其他inline元素说a,margin将只水平和不采取垂直,对于这一点,你必须让他们要么inline-blockblock级别的元素.

    有关更多信息,您可以在另一个问题上阅读我的答案.而可以应用position: relative;到任何元素,不管block,inline或者inline-block它将position元素你想要的方式...

    2023-02-08 18:09 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有