Bagaimana untuk menetapkan saiz tetingkap dengan css

PHPz
Lepaskan: 2023-04-26 16:26:38
asal
1714 orang telah melayarinya

CSS ialah bahasa reka bentuk web yang berkuasa yang boleh digunakan untuk menentukan rupa dan reka letak halaman web. Antaranya, menetapkan saiz tetingkap juga merupakan salah satu fungsi penting CSS.

Dalam CSS, anda boleh menentukan saiz elemen dengan menetapkan atribut "lebar" dan "tinggi". Atribut ini boleh digunakan pada kebanyakan teg HTML, termasuk badan, div, iframe, dsb.

Untuk menetapkan dimensi keseluruhan halaman web, anda boleh menggunakan atribut ini pada elemen badan. Sebagai contoh, kod berikut akan menetapkan lebar halaman kepada 800 piksel dan ketinggian kepada 600 piksel:

body {
  width: 800px;
  height: 600px;
}
Salin selepas log masuk

Anda boleh menetapkan lebar dan tinggi menggunakan piksel (px) atau peratusan (%) unit.

Jika anda ingin memastikan halaman responsif dan menggunakan unit peratusan, anda harus menetapkan atribut "ketinggian" kepada kosong. Contohnya:

body {
  width: 80%;
  height: ;
}
Salin selepas log masuk

Kod di atas akan menjadikan lebar halaman menempati 80% daripada bekas induknya, manakala ketinggian akan dilaraskan secara adaptif mengikut kandungan.

Jika anda hanya perlu menetapkan saiz elemen tertentu, anda boleh melakukannya dengan menentukan kelas CSS atau ID untuk elemen tersebut. Sebagai contoh, kod berikut akan menetapkan lebar elemen div dengan "kandungan" kelas CSS kepada 700 piksel dan ketinggian kepada pelarasan penyesuaian:

.content {
  width: 700px;
  height: auto;
}
Salin selepas log masuk

Selain itu, CSS juga menyediakan parameter yang dipanggil "maks- width", yang juga boleh mengehadkan lebar maksimum elemen sambil mengekalkan kebolehsuaian halaman. Contohnya:

.content {
  max-width: 700px;
  width: 100%;
  height: auto;
}
Salin selepas log masuk

Kod di atas akan menjadikan elemen "kandungan" kelas sehingga 700 piksel lebar, tetapi ia masih akan menyesuaikan diri dengan saiz bekas induknya.

Ringkasnya, CSS ialah bahasa yang sangat fleksibel yang boleh menyediakan pelbagai tetapan susun atur dan penampilan untuk reka bentuk web dengan mudah, antaranya fungsi tetapan saiz tetingkap adalah sangat penting untuk memastikan konsistensi dan kebolehsuaian halaman.

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

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan