Dua cara saiz elemen mutlak dalam css

Sesiapa yang telah menggunakan CSS untuk seketika akan mengetahui tentang merit kedudukan mutlak dan relatif. Untuk merakam: Kedudukan: Relatif membolehkan elemen dipindahkan dari kedudukan asalnya sama ada secara mendatar (menggunakan kiri atau kanan) atau secara menegak (menggunakan atas atau bawah). Kedudukan: Mutlak membolehkan elemen diposisikan dengan blok yang mengandungi menggunakan kiri, kanan, atas atau bawah (Blok yang mengandungi adalah nod nenek moyang yang terdekat dengan kedudukan relatif, mutlak atau tetap). Oleh itu, kedudukan nod adalah mudah, mis. Html: CSS:

<div >
	<div ></div>
</div>

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

(lebar dan ketinggian sebenar blok dalaman akan menjadi 100px kerana penambahan sempadan). Kotak berikut diberikan dalam setiap pelayar moden (termasuk IE6):   Kurang terkenal ialah anda boleh memohon semua kiri, kanan, atas dan bawah sifat pada masa yang sama. CSS berikut akan menjadikan elemen dalaman identik: Lebar dan ketinggian kotak dalaman akan kekal 100px, tetapi kita tidak perlu secara eksplisit menetapkan dimensi. Ini berguna apabila:

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

Jarak di sekitar elemen lebih kritikal daripada lebar atau ketinggian. Anda juga boleh menggunakan sifat negatif kiri, kanan, atas dan/atau bawah untuk menjadikan kotak dalaman lebih besar daripada ibu bapa luarnya.
Anda mempunyai pelbagai elemen dalaman dengan sempadan yang berbeza dan padding tetapi memerlukan jarak luar yang konsisten. Kaedah ini membolehkan anda membuat satu gaya untuk semua elemen tersebut.
Animasi JavaScript juga boleh mendapat manfaat kerana ia boleh menjadi lebih mudah dan lebih cepat untuk mengubah saiz elemen jika anda tidak perlu mengira lebar dan ketinggian yang terhasil, mis.

Nota mengenai keserasian penyemak imbas: Teknik ini berfungsi dalam semua pelayar utama,

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

kecuali IE6 yang hanya memahami lebar dan ketinggian yang jelas. Ada kejutan! Soalan Lazim (Soalan Lazim) Mengenai CSS Sizing dan Posisi Mutlak

Apakah perbezaan antara kedudukan mutlak dan relatif dalam CSS?

Dalam CSS, mutlak dan relatif adalah dua jenis kaedah kedudukan. Kedudukan mutlak membolehkan elemen diposisikan berbanding dengan nenek moyang yang terdekat. Ini bermakna elemen itu diambil dari aliran normal dokumen dan tiada ruang dibuat untuk elemen dalam susun atur halaman. Sebaliknya, kedudukan relatif membolehkan elemen diposisikan berbanding dengan kedudukan normalnya. Ini bermakna kedudukannya adalah relatif kepada kedudukan asal elemen dalam aliran dokumen, dan ruang masih dipelihara untuknya dalam susun atur halaman.

Bagaimanakah harta 'kedudukan: mutlak' berfungsi dalam CSS? Unsur yang diposisikan dapat dipindahkan menggunakan sifat 'atas', 'kanan', 'bawah', dan 'kiri'. Walau bagaimanapun, jika tiada unsur nenek moyang mempunyai kedudukan selain daripada 'statik', blok yang mengandungi awal digunakan. Ciri -ciri ini hanya mempunyai kesan ke atas unsur -unsur yang diposisikan. Mereka menentukan jarak antara elemen dan satu atau lebih sisi elemen yang mengandunginya. Sebagai contoh, 'atas: 20px' bermaksud pinggir atas elemen akan menjadi 20px dari pinggir atas elemen yang mengandungi. Pertama, tetapkan 'kiri: 50%' untuk menggerakkan pinggir kiri elemen ke pusat ibu bapanya. Kemudian, gunakan 'Transform: TranslateX (-50%)' untuk menarik elemen kembali ke kiri oleh separuh daripada lebarnya sendiri, dengan berkesan memusatkannya. 'Mutlak' meletakkan unsur relatif kepada nenek moyang yang terdekat atau blok yang mengandungi awal. 'Tetap', sebaliknya, meletakkan elemen relatif kepada tetingkap penyemak imbas. Ini bermakna elemen tetap tidak akan bergerak walaupun halaman ditatal.

Bagaimana CSS mengendalikan elemen bertindih? Harta ini menentukan susunan susunan elemen, yang merupakan kedudukannya pada paksi z. Unsur dengan 'z-indeks' yang lebih tinggi akan dipaparkan di hadapan elemen dengan 'z-indeks' yang lebih rendah. Ia biasanya merupakan pandangan dari tetingkap penyemak imbas, tetapi juga boleh menjadi kotak halaman jika sifat 'limpahan' unsur akar tidak 'kelihatan'. Ini akan menjadikan elemen seluas dan setinggi elemen yang mengandungi.

Apakah perbezaan antara 'lebar' dan 'max-lebar' dalam CSS? Sekiranya kandungannya lebih kecil daripada 'max-lebar', kandungannya akan kekal pada saiz semulajadi. Harta ini mentakrifkan nisbah aspek untuk kotak, yang merupakan nisbah lebar ke ketinggian. Sebagai contoh, 'aspek-nisbah: 16/9' akan mengekalkan nisbah aspek 16: 9.

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