Bagaimana untuk menukar saiz elemen dalam css

CSS ialah bahagian penting dalam reka bentuk web dan boleh digunakan untuk menambah gaya pada elemen HTML. Salah satu gaya biasa ialah menukar saiz elemen. Dalam artikel ini, kami akan membincangkan cara mengubah saiz elemen menggunakan CSS, serta beberapa petua dan perangkap biasa.

1. Gunakan atribut lebar dan ketinggian untuk menukar saiz elemen

Cara paling asas untuk menukar saiz elemen ialah menggunakan atribut lebar dan ketinggian CSS. Kedua-dua sifat ini digunakan untuk mengawal lebar dan ketinggian elemen masing-masing. Nilai mereka boleh menjadi nilai mutlak, seperti piksel (px), atau nilai relatif, seperti peratusan (%).

Sebagai contoh, gaya CSS berikut menetapkan lebar elemen div kepada 300 piksel dan ketinggian kepada 200 piksel:

div {
  width: 300px;
  height: 200px;
}

Ini akan menyebabkan elemen div ini muncul sebagai A kotak segi empat tepat 300 piksel lebar dan 200 piksel tinggi.

2 Gunakan atribut max-width dan max-height untuk mengehadkan saiz maksimum elemen

Kadang-kadang kami mahu elemen menyesuaikan dengan lebar atau ketinggian halaman, tetapi kami tidak mahu ia menjadi terlalu besar. Pada masa ini kita boleh menggunakan ciri lebar maksimum dan ketinggian maksimum CSS untuk mengehadkan lebar dan ketinggian maksimum elemen.

Sebagai contoh, gaya CSS berikut menetapkan lebar maksimum elemen img kepada 100% dan ketinggian maksimum kepada 200 piksel:

img {
  max-width: 100%;
  max-height: 200px;
}

Ini akan menjadikan elemen img menyesuaikan diri dengan Lebar halaman, tetapi hanya imej dengan ketinggian maksimum 200 piksel akan dipaparkan.

3 Gunakan atribut min-width dan min-height untuk mengehadkan saiz minimum elemen

Begitu juga, kadangkala kita mahu elemen mempunyai sekurang-kurangnya lebar atau ketinggian minimum, kemudian kita boleh menggunakan CSS min-width dan min-height properties mengehadkan lebar minimum dan ketinggian minimum sesuatu elemen.

Sebagai contoh, gaya CSS berikut menetapkan lebar minimum elemen div kepada 200 piksel dan ketinggian minimum kepada 100 piksel:

div {
  min-width: 200px;
  min-height: 100px;
}

Ini akan memastikan elemen div berada pada sekurang-kurangnya 200 piksel lebar dan ketinggian 100 piksel.

4 Gunakan atribut transform untuk menukar saiz elemen

Selain menggunakan atribut lebar dan ketinggian, kita juga boleh menggunakan atribut transformasi CSS untuk menukar saiz elemen. . Atribut transformasi boleh mencapai pelbagai kesan ubah bentuk, salah satu kesan biasa ialah penskalaan.

Sebagai contoh, gaya CSS berikut mengecilkan elemen div kepada separuh saiz asalnya:

div {
  transform: scale(0.5);
}

Ini akan mengecilkan elemen div kepada 50% daripada lebar dan ketinggian asalnya.

5. Gunakan fungsi calc untuk mengira saiz elemen

Dalam CSS, kita juga boleh menggunakan fungsi calc untuk mengira saiz elemen. Fungsi calc boleh menggunakan nilai mutlak dan relatif dalam ungkapan yang mengandungi operasi matematik.

Sebagai contoh, gaya CSS berikut akan menetapkan lebar elemen div kepada 50% daripada lebar halaman tolak 20 piksel:

div {
  width: calc(50% - 20px);
}

Ini akan menjadikan lebar elemen div ini lebar halaman separuh tolak 20 piksel.

6. Elakkan pengaruh model kotak

Apabila menggunakan CSS untuk menukar saiz elemen, kita perlu ambil perhatian bahawa model kotak CSS akan mempengaruhi saiz elemen. Model kotak sebenarnya menganggap elemen sebagai kotak segi empat tepat, termasuk kandungan elemen, padding, jidar dan jidar. Oleh itu, apabila kita menukar saiz elemen, pelbagai bahagian model kotak menukar saiz dengan sewajarnya.

Sebagai contoh, kita mungkin mendapati bahawa apabila kita menetapkan lebar elemen kepada 200 piksel, lebar sebenar elemen mungkin sebenarnya lebih lebar daripada 200 piksel kerana model kotak juga mengambil beberapa piksel.

Untuk mengelakkan kesan ini, kita boleh menggunakan sifat bersaiz kotak CSS. Atribut saiz kotak mengawal cara saiz model kotak dikira. Secara lalai, nilainya ialah kotak kandungan, yang bermaksud saiz hanya termasuk kandungan elemen. Walau bagaimanapun, kita juga boleh menetapkan nilainya kepada kotak sempadan, yang bermaksud saiznya termasuk kandungan elemen, padding dan sempadan.

Sebagai contoh, gaya CSS berikut menetapkan lebar elemen div kepada 200 piksel sambil menetapkan sifat saiz kotak kepada kotak sempadan:

div {
  width: 200px;
  box-sizing: border-box;
}

Ini akan menjadikan elemen div Lebar sebenar ialah 200 piksel, termasuk kandungan elemen, padding dan sempadan.

Ringkasan:

CSS boleh menukar saiz elemen HTML dalam pelbagai cara, termasuk menggunakan atribut lebar dan ketinggian, atribut lebar maksimum dan ketinggian maksimum, lebar min dan min. -atribut ketinggian , atribut transform, fungsi calc dan atribut saiz kotak. Apabila menggunakan atribut ini, kita perlu memberi perhatian kepada kesan model kotak pada saiz elemen, dan secara munasabah menggabungkan atribut yang berbeza untuk mencapai kesan terbaik.

Atas ialah kandungan terperinci Bagaimana untuk menukar saiz elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!