display屬性

時間 2020-07-06

標籤 display 屬性欄目 CSS 简体版

原文原文鏈接

在css中若是咱們想把塊級元素轉換成內聯元素怎麼辦，一般咱們都用css屬性中的display來解決；css

語法
display：屬性值；

display屬性
屬性值	說明
block	塊元素
inline	行內元素
inline-block	行內塊元素
table	以表格形式出現相似table
table-row	以表格行的形式出現相似tr
table-cell	以表格單元格形式出現相似td
none	隱藏元素

inline-blockhtml

這個屬性的特色是他結合了塊元素的特色和行內元素的特色css3

display:none瀏覽器

display:none咱們常常和JavaScript用來動態隱藏元素，常常隱藏的元素好比二級導航、tab選項卡等佈局

使用display:none須要注意的兩個地方：搜索引擎

一、"display:none"一般使用JavaScript動態隱藏元素，且不佔原來的位置spa

二、"display:none"隱藏一些對SEO關鍵的部分，由於搜索引擎會直接忽略隱藏的那一部分code

display:none和visibility:hidden的區別htm

在css中咱們隱藏元素一般使用這兩個方法，blog

這兩個的區別就是：

display:none隱藏元素後，元素不佔原來的位置，就是完全消失了

visibility:hidden 隱藏元素後，還佔原來的位置，也就是看不見可是摸的找

dispaly:table -cell

在css中咱們將元素轉換成table-cell類型，元素以表格單元格形式呈現，也就是說相似於表格的單元格td的特色

這個屬性在IE8+及其餘現代瀏覽器都支持，但IE六、7並不支持，因爲如今IE六、7逐漸退出瀏覽器這塊區域，咱們仍是果斷使用"display:table-cell"這一佈局神器

display:table-cell很是強大，其佈局功能主要分爲三種

（1）圖片垂直居中與元素

（2）等高佈局

（3）自動平均劃分元素，而且在一行顯示

圖片垂直居中於元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-cell應用</title>
    <style type="text/css">
        div{
            width: 150px;
            height: 150px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div><img src="images/q1.jpg"></div>
    <div><img src="images/q2.jpg"></div>
    <div><img src="images/q3.jpg"></div>
</body>
</html>

結果：

分析：圖片水平居中咱們用"text-align:center"，使圖片垂直居中咱們使用"display:table-cell"和"vetical-align:middle"配合使用

等高佈局

咱們知道，同一行的單元格td是同高的，所以table-cell也具備這個特性，咱們能夠就此實現等高的效果；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-cell應用</title>
    <style type="text/css">
        div{
            width: 150px;
            height: 150px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div><img src="images/q1.jpg"></div>
    <div><img src="images/q2.jpg"></div>
    <div><img src="images/q3.jpg"></div>
</body>
</html>

結果

分析：

咱們發現咱們並無定義它們的高度，但它們的高度一致，而且高度由最高的那個決定。這就是自適應高度佈局。

它的應用好比咱們發動態時候有好友評論，好友評論欄就是使用自適應等高佈局。這個佈局也是兩欄的，左欄是好友頭像，右欄是好友評論，由於咱們不知道好友評論內容的長度全部不能給它們固定高，只能讓它們自適應

。這個技巧很是使用，必定要掌握

自動平均劃分元素

若是咱們想用ul實現上面的圖片，咱們可能第一個想到就是用float來實現，可是這樣咱們就須要精確每個li的寬度，可是使用display:table-cell;就很快速

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動平均劃分元素</title>
    <style type="text/css">
        ul{
            display: table;
            width: 300px;
            list-style: none;
        }
        li{
            height: 60px;
            display: table-cell;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        ul li:nth-child(1){
            background-color: red;
        }
        ul li:nth-child(2){
            background-color: purple;
        }
        ul li:nth-child(3){
            background-color: yellow;
        }
        ul li:nth-child(4){
            background-color: blue;
        }
        ul li:nth-child(5){
            background-color: green;
        }
        ul li:nth-child(6){
            background-color: black;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

分析：

其中

:nth-child(n)是css3選擇器如今全部主流瀏覽器均支持 :nth-child() 選擇器，除了 IE8 及更早的版本。

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。

n 能夠是數字、關鍵詞或公式。

去除inline-bloc元素的間距

首先看一個例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除inline-block元素間距</title>
    <style type="text/css">
      *{padding:0;
         margin:0; 
       }
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: yellow;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

結果

在圖中，咱們看到inline-block是會產生間距的，這個間距是會影響咱們的佈局，大多數爲了避免影響佈局的狀況，咱們會去除掉這個間距。在css中咱們就使用"font-size:0"來去除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除inline-block元素間距</title>
    <style type="text/css">
        ul{
            list-style: none;
            font-size: 0;
        }
        li{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: yellow;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

結果

注意：這個font-size:0是放在父級的

1. CSS display屬性
2. display屬性
3. CSS display 屬性
4. display的屬性
5. Bootstrap display屬性
6. display 屬性
7. CSS屬性之display
8. display屬性（重點）
9. display屬性詳解
10. css display屬性值
更多相關文章...
• WebSecurity 屬性 - CurrentUserName - ASP.NET 教程
• WebSecurity 屬性 - HasUserId - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

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