Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Lengkap CSS
• Pengantar CSS
• Basis Bahasa Pemrograman CSS
• Basis Bahasa Pemrograman Tingkat Lanjut CSS
• Pemilihan Pemilihan Turunan CSS
• Pemilihan Pemilihan id CSS
• Pemilihan Pemilihan Klas CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Kotak CSS

• Gambaran Model Bokor CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Pertumpahan Margin Luar CSS

Penempatan CSS

• Gambaran Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelombang CSS

Pemilih CSS

• Pemilihan Elemen CSS
• Pemilikan Pemilihan Grup CSS
• Pemilikan Pemilihan Klas Detaill CSS
• Pemilikan Pemilihan ID Detaill CSS
• Pemilikan Pemilihan Pemilihan Atribut Detaill CSS
• Pemilikan Pemilihan Anak Elemen CSS
• Pemilikan Pemilihan Elemen Sibling Berikutnya CSS
• Buku Kecil CodeW3C.com

Kursus Pilihan

Rekomendasi Kursus:

• Atribut display CSS

Atribut Penempatan CSS (Positioning) memungkinkan Anda menempatkan elemen.

CSS Penempatan dan Penempatan

CSS menyediakan beberapa atribut untuk penempatan dan penempatan, dengan menggunakan atribut ini, Anda dapat membangun tata letak kolom,重叠 bagian tata letak satu dengan yang lain, dan dapat menyelesaikan tugas yang selama ini biasanya memerlukan beberapa tabel untuk diselesaikan.

Ide dasar penempatan sangat sederhana, ia memungkinkan Anda menentukan posisi kotak elemen yang seharusnya muncul berdasarkan posisi normalnya, atau berdasarkan parent elemen, elemen lain, bahkan jendela browser sendiri. Tidak diragukan lagi, fitur ini sangat kuat dan sangat mengejutkan. Untuk mengetahui, peran pengguna untuk dukungan CSS2 untuk penempatan jauh lebih baik daripada dukungan lain, hal ini tidak heran.

Dari sisi lain, CSS1 untuk pertama kali mengusulkan penempatan, yang berdasarkan fungsi yang ditambahkan Netscape di awal perkembangan Web. Penempatan bukanlah sepenuhnya penempatan, namun, tentu saja itu bukan juga tata letak arus normal. Kita akan menjelaskan arti penempatan lebih lanjut di bab selanjutnya.

Semua hal adalah kotak

Elemen seperti div, h1, atau p sering disebut elemen blok. Ini berarti elemen ini ditampilkan sebagaiSebuah konten blokyang disebutkan sebagai 'kotak blok'. Sebaliknya, elemen seperti span dan strong disebut 'elemen teks baris', karena kontennya ditampilkan di dalam baris, yaitu 'kotak teks baris'.

Anda dapat menggunakan Properti displayMengubah tipe kotak yang dihasilkan. Ini berarti, dengan mengatur properti display menjadi block, elemen teks (seperti elemen <a>) dapat berperan seperti elemen blok. Juga, dengan mengatur display menjadi none, elemen yang dihasilkan tidak akan memiliki kotak sama sekali. Hal ini berarti kotak dan semua kontennya tidak akan ditampilkan dan tidak mengambil ruang di dalam dokumen.

Namun, dalam beberapa situasi, elemen blok akan dibuat walaupun belum disebutkan secara eksplisit. Situasi ini terjadi saat menambah beberapa teks ke awal elemen blok (seperti div). Meskipun teks ini belum ditentukan sebagai paragraf, ia akan dianggap seperti paragraf:

<div>
teks
<p>Beberapa teks tambahan.</p>
</div>

Dalam hal ini, kotak disebut kotak tak bernama kotak, karena tidak berhubungan dengan elemen yang ditentukan secara khusus.

Baris teks elemen blok juga akan mengalami hal yang sama. Dengan asumsi ada paragraf yang mengandung tiga baris teks. Setiap baris teks membentuk kotak yang tak bernama. Tidak dapat diterapkan gaya ke kotak yang tak bernama atau kotak baris, karena tidak ada tempat yang dapat diterapkan gaya (perhatikan bahwa kotak baris dan kotak teks baris adalah konsep yang berbeda). Namun, ini membantu memahami bahwa semua hal yang dilihat di layar membentuk beberapa kotak.

Mekanisme penempatan CSS

CSS memiliki tiga mekanisme penempatan dasar: alur biasa, floating, dan penempatan absolut.

Kecepatan semua kotak berada di alur biasa kecuali disebutkan dengan khusus. Ini berarti posisi elemen di alur biasa ditentukan oleh posisi elemen dalam (X)HTML.

Kotak blok diatur secara rapi dari atas ke bawah, jarak vertikal antar kotak ditentukan oleh margin vertikal kotak.

Kotak teks baris diatur secara horizontal di dalam baris. Dapat digunakan margin internal horizontal, garis dan margin eksternal untuk mengatur jarak antar mereka. Namun, margin internal vertical, garis dan margin eksternal tidak mempengaruhi tinggi kotak teks baris. Kotak horizontal yang dibentuk oleh baris disebutKotak baris (Line Box)Ketinggian kotak baris selalu cukup untuk menampung semua kotak teks baris yang disertakan. Namun, pengaturan tinggi baris dapat menambah tinggi kotak ini.

Dalam bab berikutnya, kami akan menjelaskan secara detil penempatan relatif, absolut, dan floating.

Tentang CodeW3C.com

Dengan menggunakan Properti positionKami dapat memilih 4 jenis penempatan yang berbeda, yang akan mempengaruhi cara penghasilan kotak elemen.

Arti dari nilai properti position:

static

Kotak elemen dihasilkan secara normal. Elemen blok menghasilkan kotak persegi, sebagai bagian dari alur dokumen, sedangkan elemen teks menghasilkan satu atau beberapa kotak baris, yang ditempatkan di dalam elemen orangtua.

PemRelatif

Kotak elemen digeser sejauh beberapa jarak. Elemen tetap mempertahankan bentuknya sebelum ditempatkan, dan ruangnya tetap disimpan.

PemAbsolut

Kotak elemen dihapus dari alur dokumen sepenuhnya dan ditempatkan berdasarkan blok yang memuatnya. Blok yang memuatnya mungkin elemen lain di dalam dokumen atau blok memuat awal. Ruang yang diambil elemen sebelumnya di tutup, seperti jika elemen itu tidak ada. Setelah elemen ditempatkan, ia menghasilkan kotak blok, tidak peduli tipe kotak yang dihasilkannya di alur normal.

PemTetap

PemPemperan kotak elemen mirip dengan mengatur position menjadi absolute, tetapi blok yang memuatnya adalah jendela sendiri.

PemPanduan:Pem定位 relatif sebenarnya dianggap sebagai bagian dari model pem定位 alami, karena posisi elemen berdasarkan posisinya di alur normal.

Elemen dalam contoh di atas telah diubah Z-index.

Atribut Lokasi CSS

Hal Berikutnya

Alat Tangkap

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS