margin賦值為負值的實例介紹

1、margin-top為負值像素

margin-top為負值像素，偏移值相對於自身，其後元素受影響，見以下程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（元素2跟着上移了）40         </div>41     </div>42 43 

效果：

 

#2、margin-left為負值像素

margin-left為負值像素，偏移值相對於自身，其後元素不受影響，見以下程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（子元素2不受影响）40         </div>41     </div>42 43 

#效果：

3、margin-top為負值百分數

margin-top為負值百分數，偏移值相對於父元素，其後元素受影響，請參閱下列程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（子元素2受影响）40         </div>41     </div>42 43 

效果：

 4、margin-left為負值百分數

margin-left為負值百分數，偏移值相對於父元素，其後元素不受影響，見以下程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（子元素2不受影响）40         </div>41     </div>42 43 

#效果：

5 、margin-right為負值像素且不設定寬度

margin-right為負值像素且不設定寬度，無偏移值，其後元素不受影響，自身寬度變大,見以下程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 34 35     <div>36         <div>37             子元素138         </div>39         <div>40             子元素2（子元素2不受影响）41         </div>42     </div>43 44 

效果：

## 

## 6 、margin-right為負值百分數且不設定寬度

margin-right為負值百分數且不設定寬度，無偏移值,自身寬度變寬(寬度值為父元素寬度值*百分比) ，其後元素不受影響，見以下程式碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 34 35     <div>36         <div>37             子元素138         </div>39         <div>40             子元素2（子元素2不受影响）41         </div>42     </div>43 44 

 

效果：

##7、 margin-bottom:為負值像素

margin-bottom:為負值像素，自身無偏移值,，其後元素受影響(上移了)，見如下碼：

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（子元素2受影响,上移了）40         </div>41     </div>42 43 

 

 效果：

# 

 8

、margin-bottom:為負值百分數

margin-bottom:為負值百分數，本身無偏移值,，其後元素受影響(上移了,上移大小為父元素寬度值*20%) ，請參閱下列程式碼：

 

 1 nbsp;html> 2  3  4     <meta> 5     <meta> 6     <title>margin不同赋值情况（负值，百分数）</title> 7     <style> 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 33 34     <div>35         <div>36             子元素137         </div>38         <div>39             子元素2（子元素2受影响,上移了）40         </div>41     </div>42 43 

# 

效果：

總結：以上是margin賦值為負值的情況，可使自身偏移（或不偏移），其後元素受影響（或不受影響） ，自身寬度增大（或不增大），會有多種不同的應用場景，請合理選擇。

以上是margin賦值為負值的實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！