margin賦值為負值的實例介紹-html教學-PHP中文網

首頁

web前端

html教學

margin賦值為負值的實例介紹

零下一度

Jun 28, 2017 am 09:44 AM

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

效果：

、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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

用户遭遇罕见故障三星 Watch 智能手表突现白屏问题Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告

九州风神阿萨辛 4S 散热器评测风冷“刺客大师”范儿Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系

春日里的精致光影艺术，哈趣 H2 性价比之选Apr 17, 2024 pm 05:07 PM

随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入

航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，

七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

真正的一镜走天下尼克尔 Z 28-400mm f/4-8 VR 镜头上手体验Mar 28, 2024 pm 02:54 PM

很多摄影爱好者喜欢使用镜头，他们的拍摄需求非常多变，因此在镜头的选择上更倾向于一支比较全能的产品，也就是我们俗称的"一镜走天下"镜头。刚好，现在尼康推出了一支新的产品，尼克尔Z28-400mmf/4-8VR镜头，一支真正的"一镜走天下"镜头。镜头从28mm广角端一直覆盖到400mm长焦端，配备其Z卡口相机，可以轻松拍摄十分丰富的摄影主题，并带来一场丰富的视角变化。今天，我们就通过近期的使用体验，跟大家一起聊聊这支尼克尔Z28-400mmf/4-8VR镜头。尼克尔Z28-400mmf/4-8VR是

CSS 边界属性详解：padding，margin 和 borderOct 21, 2023 am 11:07 AM

CSS边界属性详解：padding，margin和borderCSS是一种用于控制和布局网页元素的样式表语言。在网页设计中，边界属性是其中一项非常重要的部分。本文将详细介绍CSS中边界属性的使用方法，并提供具体的代码示例。padding（内边距）padding属性用于设置元素的内边距，即元素内容和元素边界之间的空间。我们可以用正数或百分比值来设置内边距

上代机皇能否再战？三星 Galaxy S23 Ultra 实际使用体验分享Mar 12, 2024 pm 01:58 PM

在智能手机市场，三星的Galaxy系列一直以其卓越的性能和创新的设计备受瞩目。而GalaxyS23Ultra作为上代机皇，自发布以来便受到了广大消费者的喜爱。随着时间的推移，新机型层出不穷，那么，这款昔日的机皇如今还能否再战呢？接下来，我将分享自己在使用三星GalaxyS23Ultra过程中的实际体验，带大家一同探讨这个问题。首先，从外观设计上来看，GalaxyS23Ultra依然保持着三星一贯的精致与高端。其独特的微曲屏设计不仅提升了手机的整体美感，更为用户带来了更加沉浸的视觉体验。在日常使用

See all articles