【前端】CSS : display

介紹

元素的顯示方式

基本屬性

• none ： 隱藏，且不佔空間
• inline ： 設置元素爲行內元素
• block ： 設置元素爲塊狀元素
• list-item ：會把元素做爲列表顯示
• inline-block ： inline-block既具備block的寬高特性又具備inline的同行元素特性（CSS 2.1 新增）
• table ： 做爲塊級表格來顯示（相似table），表格先後帶有換行符。
• flex ： 彈性佈局屬性

用法

none

隱藏，且不佔空間

{display:none}
複製代碼

另外一種隱藏的方式 {visibility :hidden}

inline

設置元素爲行內元素

{display:inline}
複製代碼

設置了該屬性以後設置高度、寬度都無效，同時text-align屬性設置也無效，可是設置了line-height會讓inline元素居中

例：兩個塊元素div（div爲塊元素，默認display爲block）

.display1 {
    border: 1px solid;
    width: 50px;
    text-align: center;
}
複製代碼

<div class="display1">div 1</div>
<div class="display1">div 2</div>
複製代碼

效果：顯示在兩行

若是在樣式中添加屬性

{display: inline;}
複製代碼

效果：添加屬性inline後，兩個出如今同一行

注：發現div1和div2之間出現奇怪間隔。緣由：div換行產生的換行空白。解決方法：兩個div寫在一行

默認爲inline的元素：span、a、label、input、 img、 strong 和em就是典型的行內元素元素。

block

設置元素爲塊狀元素 若是不指定寬高，默認會繼承父元素的寬度，而且獨佔一行，即便寬度有剩餘也會獨佔一行，高度通常以子元素撐開的高度爲準，固然也能夠本身設置寬度和高度。

例：兩個行內元素span（div爲塊元素，默認display爲inline）

.display2 {
    border: 1px solid;
    text-align: center;
}
複製代碼

<span class="display2">span 1</span>
<span class="display2">span 2</span>
複製代碼

效果：顯示在同一行

添加屬性

{display: block;}
複製代碼

效果：顯示在同一行

list-item

會把元素做爲列表顯示

例：

.display3 {
    display: list-item;
}
複製代碼

<div>
    <span class="display3">span 1</span>
    <span class="display3">span 2</span>
    <span class="display3">span 3</span>
</div>
複製代碼

效果：

爲div添加padding-left: 30px，能夠看到前面的點。由於默認的列表以前的·在box外面 效果：

inline-block

inline-block既具備block的寬高特性又具備inline的同行元素特性 (CSS 2.1 新增)

例：

.display4 {
    display: inline-block;
    height: 100px;
    width: 100px;
    text-align: center;
    color: #FFFFFF;
    background-color: #27ad9a;
    line-height: 100px;
}
複製代碼

<div>
    <div class="display4">div 1</div>
    <div class="display4">div 2</div>
    <div class="display4">div 3</div>
</div>
複製代碼

效果：

table

做爲塊級表格來顯示（相似table），表格先後帶有換行符。 使用基於表格的CSS佈局，使咱們可以輕鬆定義一個單元格的邊界、背景等樣式， 而不會產生由於使用了table那樣的製表標籤所致使的語義化問題。

例：

.display5 {
    display: table;
    border-collapse: collapse;
}
.display5_tr {
    display: table-row;
}
.display5_td {
    padding: 5px;
    display: table-cell;
    border: 1px solid;
}
複製代碼

<div class="display5">
    <div class="display5_tr">
        <div class="display5_td">header 1</div>
        <div class="display5_td">header 2</div>
        <div class="display5_td">header 3</div>
    </div>
    <div class="display5_tr">
        <div class="display5_td">content 1-1</div>
        <div class="display5_td">content 1-2</div>
        <div class="display5_td">content 1-3</div>
    </div>
    <div class="display5_tr">
        <div class="display5_td">content 2-1</div>
        <div class="display5_td">content 2-2</div>
        <div class="display5_td">content 2-3</div>
    </div>
</div>
複製代碼

效果：

flex

彈性佈局 經常使用的佈局屬性，能夠解決大部分佈局。 主要屬性有兩大類：容器屬性和項目的屬性

容器屬性

• flex-direction: 屬性決定主軸的方向（即項目的排列方向）。
• flex-wrap: 默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。
• flex-flow: 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
• justify-content: 屬性定義了項目在主軸上的對齊方式。
• align-items: 屬性定義項目在交叉軸上如何對齊。
• align-content: 屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

項目屬性

• order: 定義項目的排列順序。數值越小，排列越靠前，默認爲0。
• flex-grow: 定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
• flex-shrink: 屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
• flex-basis: 屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。
• flex: 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
• align-self: 屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

（跟以前在RN中寫的flex-box類似，就不詳細描述了。詳細用法參考Flex 佈局教程：語法篇）

注：設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

結語

在熟悉display的使用以後，平常的佈局基本都能解決。 （多數佈局均可以經過flex解決）

參考

CSS display 屬性詳解

相關閱讀

CSS : 入門

CSS : position

CSS : float

CSS : 對齊、居中

有錯誤之處，感謝指出，接收批評