来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] margin中设置边框的顺序为上右下左{margin:top right buttom right} 等同于单独设置中的{ margin-top: 20px; margin-right: 30px; margin-bottom: 30px; m...
margin中设置边框的顺序为上右下左 {margin:top right buttom right} 等同于单独设置中的 { 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会向指定的相反的方向移动,达到效果(个人观点)。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com