CSS 小結筆記之元素的隱藏與顯示

Assist發表於2018-09-10
CSS筆記

在網站上經常會有一些需要一定操作才會顯示或隱藏的元素，這時會用到元素的隱藏與顯示。主要通過以下三種屬性實現。

1、display ：none|block |inline |inline-block

display常用以上四個屬性值，none 是元素隱藏，且不佔有位置。block  除了轉換為塊級元素之外，同時還有顯示元素的意思。inline 和inline-block 分別是顯示為行內元素和行內塊元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0;
        }
        
        div:first-child {
            background-color: aqua;
        }
        
        div:nth-child(2) {
            background-color: red;
            display: none;
        }
        
        div:last-child {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>
View Code

可以發現紅色的div 消失且不佔有位置，粉色的自動補上去。

2、visibility: hidden|visible 

visibility 隱藏時原有的位置還會佔有，不會消失

將1中的display：none ； 改為 visibility: none;結果如下圖所示

可以發現紅色額的div 雖然消失了，但是原有的位置還是佔有的。

3、overflow: visible | auto | hidden | scroll   

 overflow只要是用來對超出盒子指定大小的內容做處理。

visible 是預設值，及不剪下內容也不新增滾動條。

auto 是有超出部分就新增滾動條，沒有超出的部分就不新增滾動條。

hidden 是超出的部分被剪下，不顯示。

scroll 是不管內容有沒有超出大小，都新增滾動條。

 

相關文章