CSS中margin的认识

最新推荐文章于 2024-04-29 20:58:38 发布

i-neojos

最新推荐文章于 2024-04-29 20:58:38 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： margin 负数的margin值 div居中

本文链接：https://blog.youkuaiyun.com/whynottrythis/article/details/40717511

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了CSS margin属性的使用方法，包括边框设置顺序、负值应用及其带来的移动效果，并通过实例展示了如何利用负margin实现Div元素的居中布局。

margin中设置边框的顺序为上右下左

{margin：top right buttom left}

等同于单独设置中的

{
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

省略的写法规则为：

如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

设置margin为负值

(以下是网上拷贝的一幅图)

margin设置成负值的移动效果。

下面是一个DIV居中的例子

介绍设置Div的居中效果：首先将Div以绝对布局或者fixed的方式设置为“居中”，这里的居中只是代表height跟width设置了50%；其次计算DIV的宽和高的1/2; 最后设置margin-top和margin-left为第二步值的负数；

第一步：

.loginModal {
    display: none;
    background: #FDF3C1;
    color: #000000;
    padding: 20px;
    border: 20px solid #8F6031;
    font-size: 1.2em;
    float: left;
    position: fixed;
    height: 175px;
    width: 300px;
    top: 50%;
    left: 50%;
    z-index: 200;
}

第二步：

 var modalMarginTop = ($('#' + modalID).height() + 80) / 2;
        var modalMarginLeft = ($('#' + modalID).width() + 80) / 2;
        /* apply the margins to the modal window */
        $('#' + modalID).css({
            'margin-top' : -modalMarginTop,
            'margin-left' : -modalMarginLeft
        });

总结：1.设置成负数margin的元素，系统如何表现出负数的特征外边距。因为元素本身并不会发生变化，所以相当于元素的parent会向指定的相反的方向移动，达到效果(个人观点)。