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

转载于 2017-11-07 17:19:00 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuqiuxue/p/7799976.html

本文介绍了如何使用CSS标准流、浮动及定位来实现特定的布局效果，如嵌套盒子定位到右上角，以及如何使图片和文字垂直居中等实用技巧。

规避脱标流：

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>