display 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>display</title>
        <style type="text/css">
        /* 
            display
                指定元素所产生的框的类型
                    可选值
                        inline行内元素
                        block块元素
                        inline-block行内块元素，既有行内元素特点，不独占一行，又有块元素特点，可以设置宽高
                        none元素不在页面中显示
         */
            .box{
                border: solid;
                width: 100px;
                height: 100px;
                display: inline;
            }
            
            .box1{
                border: solid red;
                width: 200px;
                height: 200px;
                display: inline-block;
            }
            
            span{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="box">
            我是第一个div
        </div>
        <div class="box1">
            我是第二个div
        </div>
        <span>
            我是一个span
        </span>
    </body>
</html>

 

posted @ 2022-05-09 15:35  氯丙嗪  阅读(45)  评论(0)    收藏  举报