margin赋值为负值的实例介绍-html教程-PHP中文网

首页

web前端

html教程

margin赋值为负值的实例介绍

零下一度

Jun 28, 2017 am 09:44 AM

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>

效果：

2、margin-left为负值像素

margin-left为负值像素，偏移值相对于自身，其后元素不受影响，见如下代码：

 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-left为负值像素，偏移值相对于自身，其后元素不受影响*/24             margin-left: -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>

效果：

3、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: -20%;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>

效果：

4、margin-left为负值百分数

margin-left为负值百分数，偏移值相对于父元素，其后元素不受影响，见如下代码：

 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-left为负值百分数，偏移值相对于父元素，其后元素不受影响*/24             margin-left: -20%;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>

效果：

5、margin-right为负值像素且不设置宽度

margin-right为负值像素且不设置宽度，无偏移值，其后元素不受影响，自身宽度变大,见如下代码：

 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             /*关键点:不设置宽度*/21             /*width: 200px;*/22             height: 200px;23             border: 1px solid blue;24             /*margin-right为负值像素且不设置宽度，无偏移值，其后元素不受影响*/25             margin-right: -100px;26         }27         .c2{28             width: 200px;29             height: 200px;30             border: 1px solid blue;31         }32     </style>33 </head>34 <body>35     <div class="p">36         <div class="c1">37             子元素138         </div>39         <div class="c2">40             子元素2（子元素2不受影响）41         </div>42     </div>43 </body>44 </html>

效果：

6、margin-right为负值百分数且不设置宽度

margin-right为负值百分数且不设置宽度，无偏移值,自身宽度变宽(宽度值为父元素宽度值*百分比)，其后元素不受影响，见如下代码：

 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             /*关键点:不设置宽度*/21             /*width: 200px;*/22             height: 200px;23             border: 1px solid blue;24             /*margin-right为负值百分数且不设置宽度，无偏移值,自身宽度变宽(宽度值为父元素宽度值*百分比)，其后元素不受影响*/25             margin-right: -20%;26         }27         .c2{28             width: 200px;29             height: 200px;30             border: 1px solid blue;31         }32     </style>33 </head>34 <body>35     <div class="p">36         <div class="c1">37             子元素138         </div>39         <div class="c2">40             子元素2（子元素2不受影响）41         </div>42     </div>43 </body>44 </html>

效果：

7、margin-bottom:为负值像素

margin-bottom:为负值像素，自身无偏移值,，其后元素受影响(上移了)，见如下代码：

 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-bottom:为负值像素，自身无偏移值,，其后元素受影响(上移了)*/24             margin-bottom: -100px;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>

效果：

8、margin-bottom:为负值百分数

margin-bottom:为负值百分数，自身无偏移值,，其后元素受影响(上移了,上移大小为父元素宽度值*20%)，见如下代码：

 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: 800px;16             height: 500px;17             border: 1px solid red;18         }19         .c1{20             width: 200px;21             height: 200px;22             border: 1px solid blue;23             /*margin-bottom:为负值百分数，自身无偏移值,，其后元素受影响(上移了,上移大小为父元素宽度值*20%)*/24             margin-bottom: -20%;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赋值为负值的情况，可使自身偏移（或不偏移），其后元素受影响（或不受影响），自身宽度增大（或不增大），会有多种不同的应用场景，请合理选择。

以上是margin赋值为负值的实例介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser