Atribut display adalah salah satu atribut terpenting dalam CSS. Atribut ini terutama digunakan untuk mengontrol tata letak elemen. Melalui atribut display, Anda dapat mengatur apakah dan bagaimana elemen ditampilkan.
1. Peran atribut tampilan
1. Atribut tampilan dapat mengatur jenis tampilan internal dan eksternal elemen.
(1) Jenis tampilan eksternal:
a.Jenis elemen tampilan eksternal termasuk blok, inline, dll.
b.Jenis tampilan eksternal akan menentukan kinerja elemen dalam tata letak fluida.
(2) Jenis tampilan internal:
Jenis tampilan internal mencakup tata letak fleksibel, tata letak kisi, tata letak lancar, dll.
Tipe tampilan internal suatu elemen mengontrol bagaimana anak-anaknya ditata.
2. Tata letak yang lancar (aliran dokumen atau aliran reguler):
"Aliran dokumen" atau "tata letak yang dapat disesuaikan" adalah cara elemen "blok" dan "sebaris" ditampilkan pada halaman sebelum perubahan apa pun dilakukan pada tata letak (secara default).
Sederhananya dan terus terang, ini adalah metode penyusunan huruf yang menentukan bagaimana elemen tingkat blok dan sebaris diketik dan ditampilkan pada halaman.
(1) Tata letak aliran - metode tata letak elemen tingkat blok:
Kotak tingkat blok disusun secara vertikal, dimulai dari bagian atas blok yang memuatnya.
Jarak vertikal antar kotak pada level yang sama akan ditentukan oleh atribut "margin".
Jarak vertikal antara dua kotak tingkat blok yang berdekatan akan diciutkan sesuai dengan prinsip pelipatan margin.
(2) Dalam tata letak fluida - metode tata letak elemen sebaris:
Kotak-kotak tersebut akan disusun secara horizontal secara berurutan dimulai dari bagian atas balok penampung.
Hanya margin horizontal, batas, dan padding yang dipertahankan.
Kotak dapat disejajarkan secara vertikal dengan berbagai cara: rata bawah atau atas, atau rata bawah teks
2. Elemen tipe tampilan eksternal
1. splay menentukan tipe tampilan elemen melalui nilai atribut berikut
(1) tingkat blok blok
(2) blok sebaris blok sebaris
(3) sebaris
2. Jenis tampilan elemen dibagi menjadi: level blok dan inline, dll.
3. Elemen sebaris (inline) dibagi menjadi: elemen inline inline dan elemen blok inline inline
(1) diblock elemen tingkat blok
1. Elemen tingkat blok yang umum adalah:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl>, dll.
2. Karakteristik elemen tingkat blok:
(1) Jalur eksklusif
(2) Anda dapat mengatur atribut lebar dan tinggi.
(3) Jika lebar tidak disetel, lebar defaultnya adalah lebar area konten elemen induk.
(4) Semua jenis elemen dapat ditempatkan di elemen tingkat blok, tetapi elemen blok lainnya tidak dapat ditempatkan di tag elemen teks.
(5) Tag p dan div tidak dapat ditempatkan di tag p.
(6) Tag p dan div tidak dapat ditempatkan di tag h1-h6.
(2) elemen blok sebaris blok sebaris
1. Elemen berikut memiliki karakteristik elemen blok sebaris:
<img>, elemen bentuk, <video>, <audio>, dll. Elemen-elemen ini pada dasarnya disebut elemen yang dapat diganti (diklasifikasikan sebagai elemen sebaris)
2. Karakteristik elemen blok sebaris:
(1) Elemen blok sebaris (atau sebaris) yang berdekatan akan ditampilkan pada satu baris. Jika tidak dapat ditempatkan, elemen tersebut akan digabungkan ke baris lain.
(2) Akan ada celah kosong antara elemen blok sejajar yang berdekatan.
(3) Atribut lebar dan tinggi dapat diatur. Lebar default suatu elemen adalah lebar kontennya sendiri.
(3) elemen sebaris sebaris (sebaris).
1. Elemen sebaris yang umum meliputi:
<a>, <strong>, <span>, <i>, <del>, dll.
2. Karakteristik elemen sebaris:
Elemen sebaris yang berdekatan akan ditampilkan dalam satu baris. Jika tidak muat, elemen tersebut akan ditampilkan di baris baru.
Menyetel properti lebar dan tinggi tidak valid. Lebar dan tingginya membesar sesuai dengan ukuran isinya.
Hanya teks atau elemen sebaris lainnya yang dapat ditempatkan di dalam elemen sebaris.
3. Catatan:
Tag <a> tidak dapat ditempatkan di dalam tag <a>, tetapi elemen tingkat blok dapat ditempatkan di dalam tag <a>.
Dalam pengembangan sebenarnya, tag <a> akan diubah menjadi elemen tingkat blok dalam beberapa kasus.
Perbandingan tiga jenis elemen
3. Konversi antara elemen sebaris dan elemen tingkat blok
Kita hanya perlu menambahkan nilai atribut tampilan yang sesuai ke elemen yang sesuai untuk mengonversi elemen ke tipe elemen yang sesuai.
(1) Gunakan display: block; untuk mengubah elemen menjadi elemen tingkat blok.
Contoh:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: none;}</style></head><body><ahref=>tautan pemrograman dotcpp</a></body></html>Hasil berjalan:
(2) Gunakan display: inline; untuk mengubah elemen menjadi elemen inline. Namun, ada sedikit aplikasi untuk mengubah elemen menjadi elemen sebaris.
(3) Gunakan display: inline-block; untuk mengubah elemen menjadi elemen blok inline
4. Metode elemen tersembunyi
Mengisi kembali:
(1) Nilai tampilan selain tidak ada adalah elemen tampilan.
(2) visibilitas: terlihat; adalah elemen tampilan
Contoh:
Nilai atribut none dari display dapat digunakan untuk menyembunyikan elemen. Ia memiliki fungsi yang mirip dengan visibilitas: tersembunyi;. Perbedaannya adalah display: none; sambil menyembunyikan elemen, ia juga akan menyembunyikan posisi yang ditempati oleh elemen tersebut. display: none; biasanya digunakan bersama dengan JavaScript untuk menyembunyikan atau menampilkan elemen.
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>Sembunyikan</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>Hasil berjalan:
5. Perbedaan kedua metode persembunyian tersebut
6. Hapus spasi default elemen blok sebaris
Kesenjangan dibuat secara default antara elemen blok sebaris.
Alasan kesenjangan:
(1) Ketika elemen diformat sebagai elemen sebaris, karakter spasi putih (spasi, gerbong kembali, pengumpan baris, dll.) antar elemen akan diproses oleh browser.
(2) Menurut metode pemrosesan spasi putih (defaultnya adalah normal, yang menggabungkan spasi berlebih), gerbong kembali dan pengumpan baris dalam kode HTML asli diubah menjadi karakter spasi putih, sehingga muncul celah antar elemen.
(3) Jarak antar elemen ini akan berubah seiring dengan ukuran font
Larutan:
(1) Tambahkan elemen induk dan tulis ulang ukuran font elemen anak secara bersamaan
Atribut font-size memiliki warisan, sehingga elemen induk font-size:0; akan diwarisi ke rentang elemen anak, dan elemen anak perlu mengatur ulang ukuran font-size.
(2) Tambahkan float ke elemen
Setelah menambahkan float ke sebuah elemen, elemen tersebut akan melepaskan diri dari aliran dokumen. Ketika ketinggian elemen induk tidak ditambahkan, akan ada masalah keruntuhan ketinggian, dan masalah yang disebabkan oleh float perlu diselesaikan.
(3) Di celah antar gambar, tambahkan display:block;
Setelah menambahkan display:block, gambar menjadi elemen tingkat blok dan menempati garis eksklusif.