内联元素与块元素的转换

<style>
    #s1{
        width: 200px;
        height: 200px;
        background: red;
        margin: auto;
        padding: 50px;
/*将块元素转换成内联元素*/
        display: inline;
    }
    #d2{
        width: 200px;
        height: 200px;
        background: yellow;
/*将元素隐藏起来*/
        display: none;
    }
    #s2{
        width: 100px;
        height: 100px;
        background: blue;
/*内联元素无法设置maring与padding竖直方向，可以设置左右*/
        margin: 50px 20px;
        padding: 10px 30px;
/*将内联元素转换成块元素*/
        display: block;
    }
</style>
</head>

<body>
    <div id="s1">起于凡而非凡</div>
    <div id="d2">
        <span id="s2">起于凡而非凡</span>
    </div>
</body>

posted on 2019-05-06 12:26  默示う梦璃  阅读(125)  评论(0)    收藏  举报