margin-left 和 margin-right 同時設為負值的新認知
阿新 • • 發佈:2018-11-14
方向 right ack 認知 har :hover mar 圖片 lin
之前對margin的理解,都是用來改變容器位置的,今天發現在特定情況下 ,margin也可以改變容器的大小。
當不指定容器的寬度(這裏指的是具體值和百分比),即容器的寬度為width: auto時,同時給該容器的margin-left和margin-right設置一個負值,可以增大容器的寬度。(垂直方向上不是同理的)
案例代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" /> <style> .wrap { width: 500px; height: 500px; background: #ccc; margin: 0 auto; } .test { height: 50px; border: 1px solid #0000FF; } .test:hover { margin-left: -20px; margin-right: -20px; } .icon-color { color: blue; } </style> </head> <body class="icon-color"> <div class="wrap"> <div class="test">子級</div> 父級 </div> </body> </html>
效果圖:
具體原理還不懂,學無止境,繼續加油......
參考文章:https://www.jianshu.com/p/549aaa5fabaa
margin-left 和 margin-right 同時設為負值的新認知