css menetapkan tetapan saiz div

Dengan pembangunan berterusan teknologi Web, CSS, sebagai bahagian penting dalam pembangunan bahagian hadapan, telah menjadi alat penting untuk reka bentuk dan pembinaan halaman Web. Antaranya, CSS menetapkan saiz div, yang merupakan operasi penting untuk membina halaman Web. Artikel ini akan memperkenalkan kaedah dan teknik untuk menetapkan saiz div dengan CSS.

1 Gunakan atribut lebar dan ketinggian CSS

Cara paling asas untuk menetapkan saiz div ialah menggunakan atribut lebar dan ketinggian CSS. Melalui kedua-dua atribut ini, anda boleh menetapkan lebar dan ketinggian div, yang boleh ditetapkan menggunakan px, em, % dan unit lain.

Kod sampel adalah seperti berikut:

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

2 Gunakan sifat lebar min dan ketinggian min bagi CSS

Dalam sesetengah kes, anda mungkin perlu memaparkan div secara dinamik dan bukannya muncul pada saiz tetap. CSS menyediakan ciri lebar min dan ketinggian min untuk menetapkan lebar minimum dan ketinggian minimum div secara dinamik. Dengan cara ini, apabila terdapat terlalu banyak kandungan, div akan mengubah saiz secara automatik agar sesuai dengan kandungan.

Kod sampel adalah seperti berikut:

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

3 Gunakan sifat lebar maksimum dan ketinggian maksimum CSS

Berbeza dengan lebar min dan ketinggian min. , max-width dan Atribut max-height boleh menetapkan lebar maksimum dan ketinggian maksimum div. Dengan cara ini, apabila kandungan terlalu kecil, div tidak akan terus berkembang, tetapi akan dipaparkan mengikut lebar maksimum dan ketinggian maksimum yang ditetapkan untuk memastikan keindahan dan penyeragaman halaman.

Kod sampel adalah seperti berikut:

div {
  max-width: 500px;
  max-height: 300px;
}

4 Gunakan atribut saiz kotak CSS

Dalam CSS, model kotak lalai ialah model kotak kandungan, yang hanya mengira Lebar dan ketinggian kandungan elemen, tidak termasuk jidar dan pelapik. Jika anda perlu memasukkan sempadan dan pelapik, anda perlu menggunakan atribut saiz kotak dan tetapkan model kotak kepada model kotak sempadan.

Kod sampel adalah seperti berikut:

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
}

5 Gunakan fungsi calc() CSS

Kadangkala, anda perlu mengira perkadaran tertentu lebar dan tinggi. daripada sebuah div. Pada masa ini, anda boleh menggunakan fungsi calc() CSS, yang boleh melakukan operasi matematik mudah apabila menetapkan lebar dan ketinggian div.

Sebagai contoh, untuk menetapkan lebar div kepada 50% daripada lebar halaman tolak 20px, anda boleh menulis seperti ini:

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

6. Gunakan reka letak fleksibel CSS

Susun atur CSS Flex ialah kaedah reka letak yang sangat berkuasa. Melalui susun atur fleksibel, anda boleh menetapkan saiz dan kedudukan berbilang div dengan mudah untuk mencapai susun atur halaman yang kompleks.

Kod sampel adalah seperti berikut:

.container {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 100px;
  height: 100px;
}

7 Digabungkan dengan JavaScript untuk menetapkan saiz div secara dinamik

Selain CSS, JavaScript juga boleh digunakan untuk. tetapkan saiz div secara dinamik. Contohnya, selepas halaman dimuatkan, JavaScript boleh digunakan untuk menentukan saiz tetingkap semasa dan kemudian secara dinamik menetapkan saiz div.

Kod sampel adalah seperti berikut:

window.onload = function() {
  var div = document.getElementById('mydiv');
  div.style.width = window.innerWidth + 'px';
  div.style.height = window.innerHeight + 'px';
}

Ringkasan

Di atas adalah beberapa kaedah dan teknik biasa untuk menetapkan saiz div ini boleh dipilih dan digunakan mengikut kepada keperluan sebenar. Perlu diingat bahawa apabila menetapkan saiz div, perhatian harus diberikan untuk mengekalkan keindahan dan penyeragaman halaman untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci css menetapkan tetapan saiz div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!