display样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 200px;
                height: 200px;
                background-color: red;
                display: inline-block;
            }
            span{
                width: 100px;
                height: 100px;
                background-color: yellow;
                display: inline-block;
                /*vertical-align: top;*/
            }
        </style>
    </head>
    <body>
        <!--
            display样式,用来设置元素的类型
            1.inline  将元素设置成行元素
            2.inline-block   将元素设置成行内块元素(本质上还是行元素,但是会拥有块元素的特性,如可以设置宽高)
            3.block 将元素设置成块元素
            4.none  将元素隐藏
            ...
        -->
        <div class="div1">
            的机会不大
        </div>
        <a href="###">dvdv</a>
        <span>巨大v就</span>
    </body>
</html>

 

posted @ 2021-01-21 17:44  明坤  阅读(161)  评论(0)    收藏  举报