hooyantsing's Blog

P84_14_环绕距离控制

字数统计: 158阅读时长: 1 min
2020/04/15

P84 14 环绕距离控制

shape-outside

环绕方式

控制浮动元素与文本内容之间的距离。

1
2
3
4
5
6
7
HTML:
<p>
    <span class="shape"></span>
    后盾人自2010年创立至今,免费发布了大量高质量视频
    教程,视频在优酷、土豆、酷六等视频网站均有收录,
    很多技术爱好者......
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
LESS:
p {
    border: solid 1px #ddd;
    padding: 10px;
    overflow: hidden;
    span.shape {
        width: 100px;
        height: 100px;
        float: left;
        padding: 30px;
        margin: 30px;
        border: solid 20px red;
        shape-outside: border-box;
    }
}

border-box

围绕着边框。

9b135e894eb18c8f91d2dbf71de1066d.png

padding-box

内边距的边框里面。

afc3887299b2e6ac76d062be159fd5cf.png

content-box

内容里面。

9cb833dcf02539096096cb880f423d05.png

margin-box

外边距。

d517cf31df3ba0113d398ee84d41c8b2.png

CATALOG