CSS中margin的认识_html/css

来源：懂视网责编：小采时间：2020-11-27 15:57:33

CSS中margin的认识_html/css

CSS中margin的认识_html/css_WEB-ITnose:margin中设置边框的顺序为上右下左 {margin：top right buttom right} 等同于单独设置中的 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; } 省略的写法规则为：如果为外边距指定

推荐度：

点击下载本文 文档为doc格式

导读CSS中margin的认识_html/css_WEB-ITnose:margin中设置边框的顺序为上右下左 {margin：top right buttom right} 等同于单独设置中的 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; } 省略的写法规则为：如果为外边距指定

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会向指定的相反的方向移动，达到效果(个人观点)。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS中margin的认识_html/css

推荐度：

点击下载本文 文档为doc格式

标签：理解 html css

热门焦点

CSS中margin的认识_html/css

CSS中margin的认识_html/css

CSS中margin的认识_html/css

最新推荐

猜你喜欢

热门推荐