块元素、内敛元素

块元素转化为内敛元素方法?
display:inline;
display:inline-block;

内敛转化为块元素?

display:block;

内敛元素怎么样宽高生效?

display:block;
display:inline-block;
浮动float:left/right;

display:inline-block;有空隙，怎么解决？
(1)让html中的元素在一行显示
(2)css浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width:100px;
                height: 100px;
                background:red;
                display:inline;/*块元素转化为内敛元素*/
                display:inline-block;/*块元素转化为内敛元素,宽高生效*/
            }
            .inline{
                width:100px;
                height: 100px;
                background: pink;
                display:block;/*内敛元素转化为快元素*/
                display:inline-block;
                float: left;
                /*display:none;*//*隐藏*/
            }
        </style>
    </head>
    <body>
        <div>    
            <div class="box">第一块</div>
            <div class="box">第二块</div>
        </div>
        <div>
            <a class="inline"href="#">第1块</a>
            <a class="inline"href="#">第2块</a>
        </div>
    </body>
</html>

 

posted on 2018-07-19 20:21  阿衍小同学  阅读(108)  评论(0)  编辑  收藏  举报