Ciri susun atur CSS mengawal penyembunyian dan paparan elemen

Artikel ini membawa anda pengetahuan yang berkaitan tentang css terutamanya isu yang berkaitan dengan paparan dan penyembunyian elemen, termasuk paparan, keterlihatan, limpahan dan kelegapan Mari kita bincangkan bersama-sama di bawah. harap dapat membantu semua.

(Mempelajari perkongsian video: tutorial video css, tutorial video html)

disediakan dalam CSS Beberapa atribut yang boleh membuat elemen ditunjukkan dan disembunyikan ialah paparan, keterlihatan, limpahan dan kelegapan.

1.atribut paparan

Atribut paparan digunakan untuk menetapkan cara sesuatu elemen dipaparkan.

paparan: tiada; objek tersembunyi

paparan: blok;

Selepas paparan menyembunyikan elemen, ia tidak lagi menduduki kedudukan asal

Contohnya adalah seperti berikut:

Atribut paparan digunakan untuk menetapkan cara sesuatu elemen perlu dipaparkan.

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

Ciri: Selepas menyembunyikan elemen paparan, tidak lagi menduduki kedudukan asal . (Apabila orang hilang, wang itu hilang)

Yang terakhir ini digunakan secara meluas dan boleh digunakan untuk mencipta banyak kesan khas halaman web dengan JS.

Contoh:

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 keterlihatan

Ciri: keterlihatan sembunyi Selepas. elemen, terus menduduki kedudukan asal .

Jika elemen tersembunyi mahukan kedudukan asalnya, gunakan visibility:hidden

Jika elemen tersembunyi tidak mahu kedudukan asalnya, gunakan display:none

Atribut keterlihatan ialah digunakan untuk menentukan a Sekiranya elemen itu kelihatan atau tersembunyi.

• keterlihatan: kelihatan; unsur kelihatan

• keterlihatan: tersembunyi; unsur tersembunyi

keterlihatan terus menduduki kedudukan asal selepas menyembunyikan elemen

3.limpahan limpahan

atribut limpahan ditentukan Apakah yang berlaku jika kandungan melimpahi kotak sempadan elemen (melebihi ketinggian dan lebar yang ditentukan).

• limpahan: kelihatan; tidak memotong kandungan atau menambah bar skrol

• limpahan: tersembunyi; Jangan paparkan kandungan yang melebihi saiz objek, dan sembunyikan bahagian yang berlebihan.

• limpahan: tatal tanpa mengira sama ada kandungan melebihi atau tidak, bar tatal sentiasa dipaparkan.

• limpahan: auto; paparkan bar skrol melebihi had yang ditentukan dan jangan paparkan bar skrol melebihi yang ditentukan had.

Dalam keadaan biasa, kandungan yang melimpah tidak dibenarkan untuk dipaparkan, kerana bahagian yang keluar akan menjejaskan reka letak.

Jika terdapat kotak yang diletakkan, sila gunakan overflow:hidden dengan berhati-hati kerana ia akan menyembunyikan bahagian yang berlebihan.

Ringkasannya adalah seperti berikut:

Nilai atribut

Penerangan th>

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

kelihatan

Tidak memotong kandungan atau menambah bar skrol

tersembunyi

Jangan paparkan kandungan yang melebihi saiz objek dan sembunyikan bahagian yang berlebihan

skrol

Sentiasa paparkan bar skrol tanpa mengira sama ada kandungan melebihi atau tidak

auto

Paparkan tatal melebihi Bar had secara automatik, tiada bar tatal akan dipaparkan jika ia tidak melebihi

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用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视频教程）

Atas ialah kandungan terperinci Ciri susun atur CSS mengawal penyembunyian dan paparan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!