Rumah >hujung hadapan web >tutorial css >Panduan untuk sifat imej CSS: garis besar dan paparan

Panduan untuk sifat imej CSS: garis besar dan paparan

王林
王林asal
2023-10-25 08:57:201185semak imbas

CSS 图像属性指南:outline 和 display

Panduan atribut imej CSS: garis besar dan paparan

CSS ialah bahagian yang sangat diperlukan dalam pembangunan bahagian hadapan, antaranya atribut imej juga penting daripada. Dalam artikel ini, kami akan menumpukan pada dua konsep penting tentang sifat imej: garis besar dan paparan. Artikel ini akan memperincikan definisi, penggunaan dan contoh kod khusus mereka.

  1. atribut garis besar

Gambaran Keseluruhan: Atribut garis besar digunakan untuk membuat garis besar di sekeliling elemen yang tidak menempati ruang reka letak. Ia adalah cara yang mudah, cepat dan mudah digunakan untuk menyerlahkan elemen.

Sintaks:

outline: outline-style outline-width outline-color;
  • gaya garis besar: Nilai pilihan termasuk: tiada, pepejal, bertitik, putus-putus, dua kali ganda, alur, rabung, sisipan, permulaan .
  • outline-width: Nilai pilihan termasuk: nilai piksel nipis, sederhana, tebal atau khusus.
  • outline-color: Nilai pilihan termasuk kata kunci warna atau nilai warna tertentu.

Kod sampel:
Jika anda mahu menambah garis besar merah 2 piksel lebar pada butang:

button {
  outline: solid 2px red;
}

Jika anda ingin menambah garis besar daripada elemen Tetapkan garisan kepada putus-putus dan tetapkan warna kepada biru:

div {
  outline: dashed 1px blue;
}
  1. atribut paparan

Ikhtisar: Atribut paparan digunakan untuk mengawal paparan elemen Gelagat. Ia menentukan ciri reka letak elemen pada halaman, seperti sama ada ia dipaparkan sebagai elemen peringkat blok, sama ada ia menduduki ruang, dsb.

Syntax:

display: display-value;
  • display-value: Nilai pilihan termasuk: block, inline, inline-block, none, dsb.

Contoh kod:
Jika anda mahu memaparkan elemen div sebagai elemen peringkat blok:

div {
  display: block;
}

Jika anda mahu memaparkan span elemen sebagai elemen tahap blok sebaris Paparan elemen:

span {
  display: inline-block;
}

Jika anda ingin menyembunyikan elemen dan tidak menduduki ruang susun atur:

p {
  display: none;
}

Ringkasan:

# 🎜🎜#
    atribut garis besar Digunakan untuk mencipta garis besar elemen yang sangat mudah untuk menyerlahkan elemen.
  • Atribut paparan digunakan untuk mengawal gelagat paparan elemen Anda boleh memilih untuk memaparkannya sebagai elemen peringkat blok, elemen sebaris atau elemen peringkat blok sebaris.
  • Kedua-dua atribut ini boleh digunakan untuk menukar rupa dan reka letak imej, menjadikan pembangunan bahagian hadapan lebih fleksibel dan kreatif.
Dalam artikel ini, kami membincangkan takrifan dan penggunaan sifat garis besar dan paparan secara terperinci dan memberikan contoh kod khusus. Saya harap artikel ini dapat memberi anda bantuan dan panduan apabila menggunakan hartanah ini.

Atas ialah kandungan terperinci Panduan untuk sifat imej CSS: garis besar dan paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn