Rumah > Artikel > hujung hadapan web > Apakah kod tersembunyi dalam css3
Apakah kod tersembunyi dalam css3
- WBOYasal
- 2021-12-16 11:44:592360semak imbas
Kod: 1. "display:none", yang boleh menyembunyikan elemen tanpa menduduki kedudukan asal; 2. "visibility:hidden", yang boleh menyembunyikan elemen dengan menduduki kedudukan asal; :hidden", yang melebihi Elemen disembunyikan apabila elemen dibingkaikan; 4. "opacity:0" boleh menjadikan elemen tersembunyi secara telus.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Apakah kod kesan tunjuk sembunyi css3?
Dalam css, terdapat empat kaedah untuk menetapkan kesan penyembunyian elemen.
1. Atribut paparan boleh ditetapkan untuk menyembunyikan elemen tanpa menduduki kedudukan asalnya
Atribut paparan menentukan jenis kotak yang perlu dijana oleh elemen. Elemen ini tidak akan dipaparkan apabila nilai atribut tiada.
Contohnya adalah seperti berikut:
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>Hasil keluaran:
2. Atribut keterlihatan boleh ditetapkan kepada sembunyikan elemen dalam kedudukan asalnya
Atribut keterlihatan menentukan sama ada elemen itu boleh dilihat. Sifat ini menentukan sama ada untuk memaparkan kotak elemen yang dijana oleh elemen. Ini bermakna elemen itu masih menduduki ruang asalnya, tetapi boleh menjadi tidak kelihatan sepenuhnya. Keruntuhan nilai digunakan dalam jadual untuk mengalih keluar lajur atau baris daripada reka letak jadual.
Contohnya adalah seperti berikut:
<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>
</html>Hasil keluaran:
3 Atribut limpahan boleh ditetapkan kepada sembunyi di sebalik kotak elemen
Atribut limpahan menentukan perkara yang berlaku apabila kandungan melimpahi kotak elemen. Apabila nilai atribut disembunyikan, kandungan dipangkas dan kandungan selebihnya tidak dapat dilihat.
Contohnya adalah seperti berikut:
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>Hasil keluaran:
4 elemen
Atribut kelegapan menetapkan tahap kelegapan unsur.
Contoh adalah seperti berikut:
<html>
<head>
<style>
.div1{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
.div2{
opacity:0;
}
</style>
</head>
<body>
<div class="div1">本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
<div class="div2">本元素的不透明度是 0。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Apakah kod tersembunyi dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!