css的一些坑
阿新 • • 發佈：2018-05-30
box 標簽 父類 width padding src char 繼承 水平
1、margin垂直方向上塌陷現象。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color:red; margin-bottom: 10px; } .box2{ margin-top:30px ; width: 100px; height: 100px; background: green; } </style> </head> <body> <div class="box"> 1 </div><div class="box2"> 2 </div> </body> </html>
margin在水平方向上不存在此問題。
2、margin-top相對於父盒子問題
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ width: 100px; height: 100px; background-color: red; padding-top: 20px; } .son{ width: 30px; height: 30px; background-color: yellow; /*margin-top: 20px;*/ } </style> </head> <body> <div class="father"> <div class="son"> son </div> </div> </body> </html>
margin在水平方向上不存在此問題。
如果需要達到相對於父盒子，向下偏移，可以設置父盒子padding-top代替子盒子設置margin-top。
總結：margin垂直方向盡量不要用，善於用父盒子padding布局。
3、a標簽不繼承父類的color屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box ul li { color: red; } </style> </head> <body> <div class="box"> <ul> <li><a href="#">python</a></li> </ul> </div> </body> </html>
css的一些坑