Bagaimana untuk menetapkan lebar dan ketinggian dalam css

Dalam pembangunan web, menetapkan lebar dan ketinggian elemen adalah tugas yang sangat penting. Terdapat banyak cara untuk menetapkan lebar dan ketinggian dalam CSS. Artikel ini akan membincangkan dan memperkenalkan teknologi penetapan lebar dan ketinggian dalam CSS.

1. Kaedah asas: gunakan atribut lebar dan tinggi

Kaedah paling asas ialah menggunakan atribut lebar dan tinggi dalam CSS. Gunakan atribut ini untuk hanya menentukan lebar dan ketinggian elemen, contohnya:

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

Dalam contoh ini, kami menentukan elemen div dengan lebar 200 piksel dan ketinggian 100 piksel. Perlu diingat bahawa walaupun unit lalai bagi atribut lebar dan ketinggian ialah piksel (px), unit lain seperti em, rem dan peratusan juga boleh digunakan.

2. Gunakan atribut lebar maks dan ketinggian maks

Kadangkala, kita mahu saiz elemen tidak melebihi nilai tertentu. Dalam kes ini, kita boleh menggunakan ciri lebar maksimum dan ketinggian maksimum untuk mencapai ini. Contohnya:

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

Dalam contoh ini, kami menetapkan lebar maksimum dan ketinggian maksimum imej kepada 100%. Ini bermakna apabila nisbah imej melebihi 1:1 (iaitu nisbah bidang bukan 1), ketinggian imej akan dikurangkan secara adaptif untuk mengekalkan nisbah bidang.

3. Gunakan atribut min-width dan min-height

Kadangkala, kita mahu saiz elemen tidak lebih kecil daripada nilai tertentu. Dalam kes ini, kita boleh menggunakan ciri lebar min dan ketinggian min untuk mencapai ini. Contohnya:

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

Dalam contoh ini, kami menentukan elemen div dengan lebar minimum 500 piksel dan ketinggian minimum 200 piksel. Jika kandungan elemen terlalu kecil, ia akan berkembang secara automatik untuk memenuhi keperluan saiz minimum.

4. Gunakan unit vh dan vw

Apabila mereka bentuk halaman web, kadangkala kita ingin menetapkan berdasarkan saiz viewport (iaitu saiz kawasan yang boleh dilihat oleh penyemak imbas) Saiz elemen. Dalam kes ini, kita boleh menentukan ketinggian dan lebar elemen menggunakan unit port pandang vh dan vw.

div {
    width: 50vw;
    height: 50vh;
}

Dalam contoh ini, kami menentukan bahawa lebar elemen div ialah 50% daripada lebar viewport dan ketinggian ialah 50% daripada ketinggian viewport. Perlu diingatkan bahawa unit port pandangan tidak menyokong pelayar IE8 dan ke bawah, jadi gunakannya dengan berhati-hati.

5. Susun atur kotak fleksibel CSS3

CSS3 memperkenalkan ciri baharu yang dipanggil susun atur kotak fleksibel (Flexbox), yang boleh melaksanakan reka letak halaman web dan Kawalan saiz elemen dengan lebih mudah. Apabila menggunakan reka letak Flexbox, kami boleh menentukan nisbah penskalaan elemen melalui atribut flex-grow untuk melaksanakan reka letak penyesuaian dengan mudah.

.container {
    display: flex;
    flex-direction: row;
    height: 200px;
}

.div1 {
    flex-grow: 1;
}

.div2 {
    flex-grow: 2;
}

Dalam contoh ini, kami mula-mula menetapkan elemen bekas .container dan menetapkan atribut paparannya kepada flex. Kemudian, kami menentukan ketinggian elemen kontena menjadi 200 piksel dan mengatur elemen anak dalam arah baris (iaitu susun atur mendatar). Dalam elemen bekas, kami menggunakan dua sub-elemen .div1 dan .div2 dan menentukan sifat flex-grow masing-masing sebagai 1 dan 2. Ini bermakna apabila ruang mendatar tidak mencukupi, .div1 akan secara automatik meregangkan dua kali lebih panjang untuk mengisi jurang.

Kesimpulan

Di atas ialah beberapa teknik CSS biasa untuk menetapkan lebar dan tinggi. Anda perlu memilih berdasarkan keperluan sebenar Penggunaan yang munasabah bagi teknologi ini boleh meningkatkan kecekapan dan kualiti pembangunan web dengan berkesan. Khususnya, adalah penting untuk ambil perhatian bahawa apabila meletakkan halaman web, adalah sangat penting untuk memilih kaedah susun atur dan tetapan saiz yang sesuai, yang secara langsung boleh menjejaskan kebolehbacaan dan kemudahan penggunaan halaman web, sekali gus menjejaskan pengalaman pengguna. .

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar dan ketinggian dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!