你的位置:首页 > 软件开发 > 网页设计 > margin赋值为负值的几种效果(负值像素,负值百分数)

margin赋值为负值的几种效果(负值像素,负值百分数)

发布时间:2017-06-28 00:01:26
1、margin-top为负值像素margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <m ...

margin赋值为负值的几种效果(负值像素,负值百分数)

1、margin-top为负值像素

margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码:

 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4   <meta charset="UTF-8" /> 5   <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6   <title>margin不同赋值情况(负值,百分数)</title> 7   <style type="text/css"> 8     *{ 9       margin: 0;10       padding: 0;11     }12     /*父元素样式*/13     .p{14       margin: 100px;15       width: 500px;16       height: 500px;17       border: 1px solid red;18     }19     .c1{20       width: 200px;21       height: 200px;22       border: 1px solid blue;23       /*margin-top为负值像素,偏移值相对于自身,其后元素受影响*/24       margin-top: -20px;25     }26     .c2{27       width: 200px;28       height: 200px;29       border: 1px solid blue;30     }31   </style>32 </head>33 <body>34   <div class="p">35     <div class="c1">36       子元素137     </div>38     <div class="c2">39       子元素2(元素2跟着上移了)40     </div>41   </div>42 </body>43 </html>

原标题:margin赋值为负值的几种效果(负值像素,负值百分数)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录