Menganalisis kesan atribut limpahan pada paparan halaman web-html tutorial-php.cn

Menganalisis kesan atribut limpahan pada paparan halaman web

王林

Lepaskan： 2024-01-27 10:24:06

asal

507 orang telah melayarinya

Menganalisis kesan atribut limpahan pada paparan halaman web

Untuk menganalisis kesan atribut limpahan pada paparan halaman web, contoh kod khusus diperlukan

Dalam reka bentuk dan pembangunan web, selalunya ditemui kandungan elemen melebihi lebar atau tinggi bekas. Pada masa ini, kita boleh menggunakan sifat limpahan CSS untuk mengawal cara kandungan limpahan dipaparkan. Atribut limpahan mempunyai empat nilai yang mungkin: kelihatan, tersembunyi, tatal dan auto, yang masing-masing mewakili kandungan limpahan tidak memotong, menyembunyikan kandungan limpahan, memaparkan bar skrol dan memaparkan bar skrol mengikut keperluan.

Yang berikut menggunakan contoh kod khusus untuk menganalisis kesan atribut limpahan pada paparan halaman web.

Mula-mula, kami mencipta bekas ringkas yang mengandungi kandungan limpahan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat vestibulum augue, ac eleifend lorem dapibus eu. Donec consequat arcu nec venenatis iaculis. Sed rhoncus consectetur sem, nec viverra massa viverra sed.
  </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menetapkan lebar dan tinggi bekas kepada 200px dan menggunakan sifat limpahan untuk menetapkan nilainya kepada kelihatan. Hasilnya ialah bekas secara automatik mengembang ketinggian berdasarkan kandungan, tanpa memotong atau menyembunyikan limpahan. Ini ialah nilai lalai bagi sifat limpahan.

Seterusnya, kami menukar nilai atribut limpahan kepada tersembunyi Kodnya adalah seperti berikut:

<style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      overflow: hidden;
    }
</style>

Salin selepas log masuk

Apabila nilai limpahan disembunyikan, bekas akan memangkas kandungan limpahan dan tidak memaparkannya. Dalam contoh kami, lebihan teks akan disembunyikan.

Kini, kita tukar nilai limpahan kepada tatal, kodnya adalah seperti berikut:

<style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      overflow: scroll;
    }
</style>

Salin selepas log masuk

Apabila nilai limpahan tatal, bekas akan memaparkan kandungan limpahan dan memaparkan bar skrol. Jika kandungan tidak melimpah, bar skrol akan dilumpuhkan. Dalam kes kami, teks yang melimpah akan dipaparkan dan bar skrol akan muncul untuk melihat kandungan tersembunyi.

Akhir sekali, kami menukar nilai limpahan kepada auto, kodnya adalah seperti berikut:

<style>
    .container {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      overflow: auto;
    }
</style>

Salin selepas log masuk

Apabila nilai limpahan adalah automatik, bekas akan memutuskan sama ada untuk memaparkan bar skrol berdasarkan sama ada kandungan melimpah. Dalam kes kami, apabila kandungan melimpah, bar skrol akan dipaparkan, dan apabila kandungan tidak melimpah, bar skrol tidak akan dipaparkan.

Di atas ialah analisis kesan atribut limpahan pada paparan halaman web Melalui contoh kod tertentu, kami menunjukkan cara nilai atribut limpahan berbeza mengendalikan kandungan limpahan kontena. Mengikut keperluan khusus, kami boleh menggunakan atribut limpahan secara fleksibel untuk mengawal kesan paparan kandungan web.

Atas ialah kandungan terperinci Menganalisis kesan atribut limpahan pada paparan halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!