11-[CSS]-margin塌陷，
阿新 • • 發佈：2018-06-02
In 分享 meta spa color 水平居中 itl auto ctype
1、margin塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; } span{ background-color: red; } span.a{ margin-right: 20px; } span.b{ margin-left: 20px; } </style> </head> <body> <div class="father"> <!-- 當給兩個兄弟盒子 設置垂直方向上的margin 那麽以較大的為準， 那麽我們稱這種現象叫塌陷--> <div class="box1"></div> <div class="box2"></div> </div> <span class="a">內容</span> <span class="b">內容</span> </body> </html>
2、margin:0 auto; 標準流盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*margin-left: auto; margin-right: auto;*/ text-align: center; float: left; } </style> </head> <body> <div> 文字 </div> </body> </html>
3
4
5
11-[CSS]-margin塌陷，