CSS display使用

時間 2019-11-09

標籤 css display 使用欄目 CSS 简体版

原文原文鏈接

今天咱們來分析一下display的一些用法，display樣式在咱們整個CSS設置中，很是重要，掌握好display，纔能有效的解決CSS佈局的問題，在理解display以前，咱們先了解兩個概念：塊元素和行內元素。css

一、基本概念 css3

塊級元素(block element)瀏覽器

其就是以塊狀呈現，具備塊的基本特徵，如高度、寬度等等，其主要有如下幾個特色：佈局

在新行上開始；因此它們都是獨佔一行度，行高以及外邊距和內邊距均可控制（使用float屬性除外）。
能夠設置 width, height屬性和margin,padding等屬性。
寬度缺省是它的容器的100%，除非設定一個寬度。
它能夠容納內聯元素和其餘塊元素

好比咱們經常使用的div,p, h1等，都是塊級元素。測試

內聯元素（inline element flex

其是以長條型呈現，能夠改變寬度，可是沒法改變高度,其主要有如下幾個特色：spa

和其餘元素都在一行上；因此它們都是一個挨着一個，除非一行排不下，則會換行
高，行高及外邊距和內邊距不可改變；只能改變寬度,Margin和padding只能改變左右，上下無效
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其餘內聯元素

好比咱們經常使用的span、a、input都是內聯元素。code

二、display樣式 對象

定義和用法 blog

display 屬性規定元素應該生成的框的類型。

說明

這個屬性用於定義創建佈局時元素生成的顯示框類型。對於 HTML 等文檔類型，若是使用 display 不謹慎會很危險，由於可能違反 HTML 中已經定義的顯示層次結構。對於 XML，因爲 XML 沒有內置的這種層次結構，全部 display 是絕對必要的。

默認值：inline

其餘值：

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
table	此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table	此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group	此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group	此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group	此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row	此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group	此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column	此元素會做爲一個單元格列顯示（相似 <col>）
table-cell	此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption	此元素會做爲一個表格標題顯示（相似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

三、分別介紹

none：

none這個值表示此元素將不被顯示,設置爲none的元素，即不顯示在界面上，關鍵是設置爲none，它將讓出本身佔有的空間，這個是和visibility的主要區別，visibility只是隱藏對象，對象在文檔流中並無被移除，display:none則元素會被從文檔流中移除。咱們看看以下案例：

普通div

<div style="height:100px;background-color:#ffd800"></div>
<div style="height:100px;background-color:#ccd800"></div>

顯示效果以下：

如設置上面div的display:none，代碼以下：

<div style="height:100px;background-color:#ffd800;display:none"></div>
<div style="height:100px;background-color:#ccd800"></div>

其效果以下：

發現上面的div不顯示，且佔有的區域讓了出來。直接從文檔流中剔除了，好像不存在同樣。

同時，咱們設置visibility看一下，代碼以下：

<div style="height:100px;background-color:#ffd800;visibility:hidden"></div>
<div style="height:100px;background-color:#ccd800"></div>

其顯示效果以下圖所示：

雖然上面的div隱藏不可見，但div所佔的區域，仍是被佔用，並無從文檔流中剔除。

block：

使用了display:block以後，此元素將顯示爲塊級元素，此元素先後會帶有換行符。設置爲block後，那麼內聯元素就具備了塊級元素的特徵，具備高度和margin-top和padding-top等信息，咱們以案例說明，a標籤本來爲內聯元素，咱們進行以下的對比：

<div>
     <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">1</a>
    </div>
    <style>
        #b a {
            display: block;
            height: 20px;
        }
    </style>
 <div id="b">
     <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">1</a>
    </div>

將下面的div中的a標籤設置爲display: block;且指定了高度，其結果以下：

下面div中的a元素，出現了塊級元素的特徵，換行，且對指定的高度有效。

inline

使用了display:inline以後，此元素將顯示爲內聯元素,此元素會之內聯元素的特徵呈現，咱們編寫示例以下：

    <style>
        div {
            display: inline;
        }
    </style>
    <div style="height:100px;background-color:#ffd800">111</div>
    <div style="height:100px;background-color:#ccd800">222</div>

原本div是塊級元素，可是咱們設置爲內聯元素之後，其顯示效果以下：

其不只沒有換行，且設置的高度也無效。

inline-block

inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。總結來講，就是能夠設置高度和內聯元素，內容是塊級元素，但沒有換行符。

咱們編寫案例說明，其代碼以下：

  <style>
        div {
            width: 100%;
            height: 100%;
        }

        a {
            display: inline-block;
            height: 60px;
            width: 100px;
            color: #ffffff;
            background-color: #000000;
            border-left: 1px solid #ffffff;
        }
    </style>
    <div><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a></div>

以上的代碼，呈現的效果以下：

咱們能夠看到，元素呈現了塊級元素的特徵，除了沒有換行，其最終呈現的是沒有換行符的塊級元素。

list-item

list-item爲元素內容生成一個塊級元素，隨後再生成一個列表型的行內盒。其效果就和ul中出現項目列表符號同樣。通俗地說就是會在內容前面自動加上黑點，而display:block則不會出現黑點。

    <style>
        a {
            display: list-item;
        }
    </style>
    <div><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a></div>

這個比較簡單，就是按照列表的方式顯示，這個用得不是不少，能夠經過UL實現，其效果以下：

run-in

有些瀏覽器已經不支持了，因此這個屬性如今也不多有人使用，我使用IE進行的測試。run-in也是一個有意思的行內塊級元素，不過它與inline-block的表現是徹底不一樣的。它的表現與它的後一個直接元素直接掛鉤。若是它的後一個直接元素是塊級元素的話，它會表現爲行內元素插入到該塊級元素中；若是它的後一個元素是行內元素的話，它就會表現爲塊級元素，坦白的講就是跟後一個元素的表現是徹底相反的,最後，它跟前一個元素的表現形式是無關的。

咱們看第一種狀況：它後面的元素是塊級元素，代碼以下：

  <style>
        div {
            height: 100px;
            background-color: #f6cfcf;
        }
        a {
            display:run-in;
            height:100px;
        }
    </style>

        <a href="#">1</a>
        <div></div>

咱們設置a的display爲run-in,則其表現爲：

能夠看到，其下一個元素是塊狀元素，則他會變成內聯元素，而且插入到下一個元素中。咱們能夠把a改爲p試試，也會出現相同的結果。

狀況2：其後面元素是內聯元素，代碼以下：

    <style>
        div {
            height: 100px;
            background-color: #f6cfcf;
        }
        a {
            display:run-in;
            height:100px;
        }
    </style>

        <a href="#">1</a>
        <span></span>

其顯示效果以下：

a表現了塊級元素的特徵，因此說run-in的對象，其受下一個元素影響，下一個是塊，他就是內聯，下一個是內聯，它表現爲塊。

table

table元素和後面全部和table相關的元素，都是讓元素按照表格方式顯示，設置爲table的元素，其具備<table>標籤默認的特性。咱們能夠經過table樣式，把不一樣的元素定義爲表格，知足表格化的需求。

table 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
table-row-group 此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group 此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group 此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row 此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column 此元素會做爲一個單元格列顯示（相似 <col>）
table-cell 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption 此元素會做爲一個表格標題顯示（相似 <caption>）

下面以示例說明，以樣式的方式定義了一個表格：

    <style type="text/css">
        .table, .table * {
            margin: 0 auto;
            padding: 0;
        }

        .table {
            display: table;
            width: 80%;
            border-collapse: collapse;
        }
        .table-tr {
            display: table-row;
        }
        .table-th {
            display: table-cell;
            border: 1px solid #808080;
        }
        .table-td {
            display: table-cell;
            border:1px solid #808080;
        }
    </style>
        <div class="table">
            <div class="table-tr">
                <div class="table-th">編號</div>
                <div class="table-th">名字</div>
                <div class="table-th">10</div>
            </div>
            <div class="table-tr">
                <div class="table-td">1</div>
                <div class="table-td">張三</div>
                <div class="table-td">20</div>
            </div>
            <div class="table-tr">
                <div class="table-td">2</div>
                <div class="table-td">李四</div>
                <div class="table-td">30</div>
            </div>
            <div class="table-tr">
                <div class="table-td">3</div>
                <div class="table-td">王五</div>
                <div class="table-td">40</div>
            </div>
        </div>