標籤：技術 body 通過 bsp 變化 orange idt nbsp png
一.負邊距原理
正邊距以相鄰模組的位置為參考點進行移動，並對周圍模組進行合理地排擠。
負邊距即margin的四個邊界值為負值。
在html中使用負邊距margin-left和margin-top相當於是元素左移、上移，同時文檔流的位置會發生變化。
使用負邊距margin-right和margin-bottom，元素本身沒有變化，其後面的元素會相應的左移，上移。
歸納為文檔流通過負邊距自身只能上移或右移。
二.說明
1margin-left,margin-top
1 <style type="text/css"> 2 .wrap div{float:left;height:200px;} 3 .wrap {overflow:hidden;_zoom:1;} 4 .content{width:10%;background:gray;} 5 .nav{width:5%;background:orange;;} 6 .infor{width:5%;background:green;} 7 </style> 8 <body> 9 <div class="wrap">10 <div class="content">a</div>11 <div class="nav">b</div>12 <div class="infor">c</div>13 </div>14 </body>
給nav加入margin-left:-3%;nav向前移動3%。
2.margin-right,margin-bottom
<style type="text/css">.wrap div{float:left;height:20px;}.wrap {overflow:hidden;_zoom:1;}.content{width:10%;background:gray; }.nav{clear:both;width:5%;background:orange;}.infor{clear:both;width:5%;background:green;}</style><body><div class="wrap"><div class="content">a</div><div class="nav">b</div><div class="infor">c</div></div></body>
給content加入margin-bottom:-1%;nav向上移動1%。
CSS-負邊距原理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
