Rumah > hujung hadapan web > html tutorial > CSS中margin的认识_html/css_WEB-ITnose

CSS中margin的认识_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:54:52
asal
1167 orang telah melayarinya

  

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

{margin:top right buttom right}
Salin selepas log masuk

     等同于单独设置中的

{  margin-top: 20px;  margin-right: 30px;  margin-bottom: 30px;  margin-left: 20px;  }
Salin selepas log masuk
    省略的写法规则为:

        如果为外边距指定了 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;}
Salin selepas log masuk
    第二步:

 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        });
Salin selepas log masuk

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


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan