元素類型轉換(display)

時間 2019-12-06

標籤元素類型轉換 display 欄目 CSS 简体版

原文原文鏈接

display經常使用的幾個屬性值：

none : 隱藏元素

block : 塊元素，獨佔一行，在沒有設置高度的狀況下，高度由內容撐開

inline : 行內元素，對width,height,margint-top,margin-bottom,padding-top,padding-bottom不起做用

inline-block : 行內塊元素，其寬度和高度由內容決定

list-item : 元素會做爲列表顯示

table : 此元素會做爲塊級表格來顯示

inline-table : 做爲內聯表格來顯示

table-row-group : 做爲一個或多個行的分組來顯示

table-header-group : 做爲一個或多個行的分組來顯示

table-footer-group : 做爲一個或多個行的分組來顯示

table-row : 做爲一個表格行來顯示

table-column-group : 做爲一個或多個列的分組來顯示

table-column : 做爲一個單元格列顯示

table-cell : 做爲一個表格的單元格顯示

table-caption : 做爲一個表格標題顯示

1. inline元素，咱們共處一行吧

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    div{
        display:inline;
        background-color:red;
    }
</style>
<body>
    <div>item1</div>
    <div>item2</div>
</body>
複製代碼

運行結果以下：css

從運行結果，咱們發現，兩個inline元素，中間有個間距，其實，這個間距與display無關，是因爲換行或者回車致使的，那麼，咱們怎麼去掉這個間距吶？

<body>
    <div>item1</div><div>item2</div>
</body>
複製代碼

還有一種方法是，將父元素的font-size：0px，而後，再分別設置各個子元素的font-size屬性，也能夠去掉這個間距。

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .box{
        font-size:0;
    }
    .box div{
        display:inline;
        font-size:16px;
        background-color:red;
    }
</style>
<body>
    <div class="box">
        <div>item1</div>
        <div>item2</div>
    </div>
</body>
複製代碼

運行結果以下所示：bash

2. list-item元素做爲列表顯示

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .box .item{
        display:list-item;
        list-style-position: inside;
    }
</style>
<body>
    <div class="box">
        <div class="item">item-1</div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
    </div>
</body>
複製代碼

運行結果以下：ide

3. 實現表格的效果

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .table{
        display:table;
        width:100%;
        box-sizing:border-box;
        border-collapse:collapse;
    }
    .table .row{
        display:table-row;
    }
    .table .cell{
        display: table-cell;
        height:35px;
        line-height:35px;
        border:1px solid #dedede;
        text-align:center;
    }
    .table .caption{
        display: table-caption;
        height:35px;
        line-height: 35px;
        text-align:center;
    }
</style>
<body>
    <div class="table">
        <div class="caption">這是一個表格</div>
        <div class="row">
            <div class="cell">item1</div>
            <div class="cell">item1</div>
            <div class="cell">item1</div>
        </div>
        <div class="row">
            <div class="cell">item2</div>
            <div class="cell">item2</div>
            <div class="cell">item2</div>
        </div>
    </div>
</body>
複製代碼

運行效果以下：ui

4. 製做垂直水平居中

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .box{
        width:300px;
        height:300px;
        display:table;
        border:1px solid #dedede;
        margin:20px auto;
    }
    .box div{
        display: table-cell;
        vertical-align: middle;
    }
    .box div p{
        width:100px;
        height:100px;
        line-height:100px;
        margin:0 auto;
        text-align: center;
        background-color:pink;
    }
</style>
<body>
    <div class="box">
        <div>
            <p>table</p>
        </div>
    </div>
</body>
複製代碼

運行效果以下：spa

其原理是，使用display:table-cell的元素能夠像表格同樣使用vertical-align屬性，先讓它垂直居中，而後再給子元素設置margin:0 auto;就能夠了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。