Bagaimana untuk menetapkan ketinggian dan lebar elemen agar sama dalam css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mencipta dan mereka bentuk halaman web. Dalam reka bentuk web, selalunya perlu menetapkan lebar dan ketinggian unsur-unsur ini sangat biasa dalam CSS. Walau bagaimanapun, kadangkala adalah perlu untuk menetapkan ketinggian dan lebar elemen menjadi sama, yang mungkin menyebabkan kekeliruan untuk pemula. Artikel ini akan memperkenalkan beberapa kaedah untuk menetapkan ketinggian elemen sama dengan lebarnya.

Kaedah pertama: gunakan teknik padding-top

Kaedah ini menggunakan atribut padding-top untuk menjadikan ketinggian kandungan elemen sama dengan lebar. Dalam teknik ini, sifat padding-top, yang mewakili nilai peratusan, ditetapkan sama dengan lebar elemen. Sebagai contoh, jika lebar elemen ialah 100px, nilai atribut padding-top hendaklah 100%.

Kelebihan menggunakan teknik ini ialah kandungan elemen boleh dilaraskan secara fleksibel kepada sebarang saiz, dan atribut saiz kotak juga boleh digunakan untuk menentukan jenis model kotak elemen. Had teknik ini ialah atribut padding-top meningkatkan padding di bahagian atas elemen, yang mungkin menjejaskan reka letak elemen lain.

Berikut ialah contoh:

<div class="square"></div>

.square {
    width: 100px;
    padding-top: 100%;
    background-color: red;
    box-sizing: border-box; /* 可选，根据需要来决定盒模型 */
}

Dalam contoh di atas, elemen div segi empat sama dengan lebar 100px ditetapkan, dengan atribut padding-top ditetapkan kepada 100% . Apabila lebar ialah 100px, nilai padding-top juga 100px, menjadikan ketinggian elemen div sama dengan lebar, mewujudkan segi empat sama.

Kaedah kedua: Gunakan elemen pseudo

Kaedah kedua menggunakan elemen pseudo dalam CSS untuk menukar elemen kosong kepada segi empat sama. Dalam teknik ini, anda mencipta elemen kosong berdasarkan atribut padding-top melalui ::before atau ::after pseudo-element, dan kemudian tetapkan lebar dan tinggi elemen kepada nilai yang sama.

Berikut ialah contoh:

<div class="square"></div>

.square {
    position: relative;
    width: 100px;
    height: 0;
    padding-top: 100%;
    background-color: red;
}

.square::before {
    content: "";
    display: block;
    padding-top: inherit;
}

Dalam contoh di atas, tetapkan elemen div dengan lebar 100px dan tetapkan atribut padding-top kepada 100%, supaya Ketinggian elemen div adalah sama dengan lebar. Elemen peringkat blok kosong dibuat menggunakan ::before pseudo-element, dan ketinggian elemen ini juga ditetapkan kepada 100%. Gunakan padding-top untuk mewarisi nilai elemen div di atas supaya ketinggian dan lebar elemen tahap blok kosong adalah sama.

Kaedah ketiga: Gunakan unit viewport

Kaedah ketiga boleh menggunakan unit viewport untuk mencipta elemen segi empat sama. Unit viewport ialah unit relatif kepada lebar atau tinggi viewport. Gunakan unit vw dan vh untuk menentukan nisbah tertentu lebar dan ketinggian skrin.

Berikut ialah contoh:

<div class="square"></div>

.square {
    width: 50vw;
    height: 50vw;
    background-color: red;
}

Dalam contoh di atas, elemen div dengan lebar 50vw (separuh lebar viewport) ditetapkan, dan ketinggian juga ditetapkan kepada 50vw, sekali gus mewujudkan elemen segi empat sama.

Ringkasan

Dalam reka bentuk web, selalunya perlu menetapkan ketinggian dan lebar elemen. Anda boleh melakukannya dengan mudah menggunakan CSS, dan anda juga boleh menggunakan mana-mana daripada tiga teknik di atas untuk menetapkan ketinggian elemen sama dengan lebarnya. Gunakan teknik padding-top untuk mengawal kandungan elemen secara fleksibel, gunakan elemen pseudo untuk mencipta elemen segi empat sama kosong dan gunakan unit port pandang untuk menentukan nisbah lebar dan ketinggian elemen. Anda boleh memilih kaedah yang sesuai mengikut situasi tertentu.

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