首頁 > web前端 > css教學 > 主體

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

WBOY
發布: 2022-08-09 11:12:49
轉載
2260 人瀏覽過

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

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

(學習影片分享:css影片教學html影片教學

CSS中提供了一些可以讓元素顯示與隱藏的屬性,分別是displayvisibilityoverflowopacity

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>

登入後複製

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

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>

登入後複製

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

4.opacity 元素整体透明度

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

用法:opacity:属性值;

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

  

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

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

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

(学习视频分享:css视频教程html视频教程

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

相關標籤:
css
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!