CSS佈局屬性控制元素的隱藏與顯示

這篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於元素顯示與隱藏相關屬性的問題，包括了display、visibility、overflow和opacity，下面一起來看一下，希望對大家有幫助。

（學習影片分享：css影片教學、html影片教學）

CSS中提供了一些可以讓元素顯示與隱藏的屬性，分別是display、visibility、overflow和opacity。

1.display屬性

display屬性用來設定一個元素如何顯示。

        display：none；隱藏物件

        display：block；除了轉換為區塊級元素之外，同時還有顯示元素的意思。

display隱藏元素後，不在佔有原來的位置

##範例如下：

display 屬性用於設定一個元素應如何顯示。

display: none 隐藏对象
 
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特點： display 隱藏元素後，

不再佔有原來的位置。 （人沒了，錢也沒了）

後面應用程式及其廣泛，搭配 JS 可以做很多的網頁特效。

範例：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa {
            /* display: none; */
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>


    <div>佩奇</div>
    <div>乔治</div>

2.visibility 可見性

特點：

visibility 隱藏元素後，繼續佔有原來的位置。

如果隱藏元素想要原來位置，就用visibility：hidden

如果隱藏元素不想要原來位置，就用display：none

visibility屬性用來指定一個元素應可見還是隱藏。

• visibility：visible；元素視覺

• #visibility：hidden；元素隱藏

visibility隱藏元素後，繼續佔有原來的位置

#3.overflow 溢出

overflow屬性指定了如果內容溢出一個元素的框框時（超過了其指定高度及寬度），會發生什麼。

• overflow：visible；不剪下內容也不添加滾動條

overflow：hidden

；不顯示超出物件尺寸的內容，超出的部分隱藏掉。

overflow：scroll；不管超出內容否，總是顯示捲軸。

overflow：auto；超出指定顯示捲軸，不超出不顯示捲軸。

一般情況下，不讓溢出的內容顯示，因為已出的部分會影響佈局。 如果有定位的盒子，請慎用overflow：hidden因為它會隱藏多餘的部分。 總結如下：屬性值描述visiblehidden#scroll

不剪切內容也不添加捲軸
不顯示超過物件尺寸的內容，超出的部分隱藏掉

###不管超出內容否，總是顯示捲軸###############auto#########超出自動顯示捲軸，不超出不顯示捲軸########### #

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。

示例：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa{
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条，不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto溢出的时候才显示滚动条，不溢出不显示滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>


    <div>
        《小猪佩奇》（Peppa Pig）是英国动画公司Astley Baker Davies与Entertainment One制作的原创欧洲儿童系列电视动画 [11]  [13]  ，由内维尔·阿斯特利、马克·贝克、菲尔·霍尔与乔里斯·范胡尔岑执导 [14]  ，于2004年5月31日在英国电视五台首播 [15]  ，2015年6月，《小猪佩奇》引进中国大陆，并在中央电视台少儿频道首播 [17]  
    </div>

4.opacity 元素整体透明度

opacity属性让其元素整体（包括内容）一起透明。

用法：opacity：属性值；

属性值取值：0~1之间的数字， 1表示完全不透明，0表示完全透明。

  

opacity会让元素整体透明（包括内容、文字、子元素）

5. 元素的显示与隐藏小结

属性	区别	用途
display 显示 （重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

（学习视频分享：css视频教程、html视频教程）

以上是CSS佈局屬性控制元素的隱藏與顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！