CSS——规避脱标流和vertical-align

规避脱标流：

1、尽量使用标准流。

2、标准流解决不了的使用浮动。

3、浮动解决不了的使用定位。

问题解决：嵌套盒子在不使用定位的情况下定位到右上角

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box1 {
            width: 500px;
            height: 200px;
            background-color: aliceblue;
        }

        .box2 {
            width: 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与基线对齐。

posted @ 2017-11-07 17:19  var_obj  阅读(332)  评论(0)  编辑  收藏  举报