css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換

發(fā)布時間：2020-05-21 09:30:38 來源：億速云閱讀：628 作者：Leah 欄目：web開發(fā)

今天小編就為大家?guī)硪黄嘘P(guān)css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換的文章。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

通過設(shè)置元素的display屬性實現(xiàn)轉(zhuǎn)換

display取值：inline（行內(nèi)）、block（塊級）、inline-block（行內(nèi)塊級）

下面這個實例就是將span的顯示模式轉(zhuǎn)換為塊級，將div的顯示屬性轉(zhuǎn)換為行內(nèi)塊級，將img的顯示模式轉(zhuǎn)換為塊級

<style>
        /*將span轉(zhuǎn)換為塊級元素--*/
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            background-color: red;
            width: 400px;
            height: 400px;
        }
        /*將div轉(zhuǎn)換為行內(nèi)塊級元素*/
        div{
            display: inline-block;
            background-color: green;
            width: 300px;
            height: 300px;
        }
        /*將img轉(zhuǎn)換為塊級元素*/
        img{
            display: block;
            width: 200px;
        }
    </style>

效果圖如下：

css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換

以上就是css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊！

向AI問一下細(xì)節(jié)

css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

css中行內(nèi)、塊級、行內(nèi)塊級元素之間的轉(zhuǎn)換