margin 负边距应用
生活随笔
收集整理的這篇文章主要介紹了
margin 负边距应用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
margin-right:負(fù)值，在沒(méi)有設(shè)置DOM元素寬度的前提下，DOM元素寬度變寬。
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .clearfix { 14 *zoom: 1; 15 } 16 17 .clearfix:after { 18 content: ""; 19 display: table; 20 clear: both; 21 } 22 /*最外層寬度 340=100+20+100+20+100*/ 23 24 .pp { 25 width: 340px; 26 border: 1px solid green; 27 } 28 /*次外層寬度 360*/ 29 30 .p { 31 margin-right: -20px; 32 overflow: hidden; 33 } 34 /*每個(gè)寬度100+20*/ 35 36 .c { 37 float: left; 38 height: 100px; 39 width: 100px; 40 margin-right: 20px; 41 background: #09F; 42 } 43 </style> 44 </head> 45 46 <body> 47 <div class="pp"> 48 <div class="p clearfix"> 49 <div class="c"> 50 寬度100px，margin-right: 20px; 51 </div> 52 <div class="c"> 53 寬度100px，margin-right: 20px; 54 </div> 55 <div class="c"> 56 寬度100px，margin-right: 20px; 57 </div> 58 </div> 59 </div> 60 61 </body> 62 63 </html>?
效果：
?
?具體原理請(qǐng)看代碼注釋。
注：padding不允許使用負(fù)值。
轉(zhuǎn)載于:https://www.cnblogs.com/mengfangui/p/6607386.html
總結(jié)
以上是生活随笔為你收集整理的margin 负边距应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Python--递归
- 下一篇： 将图片从AutoCAD导出到Word