规避脱标流:
1、尽量使用标准流。
2、标准流解决不了的使用浮动。
3、浮动解决不了的使用定位。
问题解决:嵌套盒子在不使用定位的情况下定位到右上角
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box1 { 500px; height: 200px; background-color: aliceblue; } .box2 { 50px; height: 40px; background-color: red; margin-left:auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
注释:margin-left:auto的意思是盒子往右边冲,冲不动了就停下了。
图片和文字垂直居中:
vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline与基线对齐。