), senarai (

) dan unsur-unsur lain.

Dan sekarang kira-kira

Oh.

Seperti yang dinyatakan di atas, anda boleh menetapkan lokasi mana-mana elemen HTML. Tidak perlu sentiasa menggunakan tag untuk ini

. Selain itu, penggunaan teg ini tidak mewajibkan anda untuk memberikannya sebarang kedudukan pada halaman web.
Maksud menggunakan blok yang ditentukan oleh tag
turun kepada penyatuan. Lagipun, anda boleh meletakkan elemen lain di dalamnya (perenggan, gambar, dll.). Ini mencipta blok besar dengan kandungan yang berbeza-beza, yang lebih mudah untuk diletakkan pada halaman web daripada setiap elemen secara berasingan.
Kedudukan elemen.
Terdapat empat jenis penentududukan utama:
1. Statik
2. Mutlak
3. Tetap
4. Kerabat)
Statik
Digunakan sebagai lokasi lalai. Dalam kes ini, penyemak imbas melihat kod HTML, membahagikannya kepada elemen dan mengarang halaman daripadanya. Hasilnya ialah urutan beberapa elemen. Ia dipaparkan dalam susunan di mana ia ditunjukkan dalam kod html.
Menggunakan parameter kiri, atas, kanan dan bawah tidak membawa apa-apa hasil.
Kedudukan statik mesti diingat apabila kedudukan relatif digunakan.
mutlak
Menggunakan kedudukan mutlak, koordinat sudut kiri atas blok ditentukan. Dalam kes ini, koordinat dikira relatif kepada lokasi elemen induk. Jika elemen induk ialah tetingkap penyemak imbas, maka blok itu sejajar dengannya. Jika terdapat elemen lain di mana blok itu terletak, maka penjajaran berlaku secara relatif kepada elemen ini.
tetap
Sudah dari namanya menjadi jelas bahawa dalam kes ini elemen itu tetap. Ia terletak di tempat tertentu pada halaman web dan tidak bergerak ke mana-mana. Penjajaran ini selalunya digunakan untuk tetingkap timbul, di mana ia dipusatkan dan tidak bergerak semasa anda menatal halaman.
relatif
Kedudukan jenis ini boleh menjadi sukar. Namanya tidak sesuai sepenuhnya. Ramai orang mengelirukan kedudukan relatif dan mutlak elemen. Nampaknya penjajaran adalah relatif kepada elemen induk. Dan dalam kes kedudukan mutlak - relatif kepada tetingkap penyemak imbas. Tetapi itu tidak benar.
Adalah perlu untuk memahami bahawa lokasi elemen dalam kes ini berlaku berbanding dengan tempatnya dalam kedudukan statik. Inilah yang disebutkan di atas.
Ringkasnya, anda memberitahu penyemak imbas untuk memindahkan elemen begitu banyak piksel berbanding tempat ia terletak secara lalai.
Terdapat satu lagi perkara yang sukar. Apakah yang berlaku jika elemen induk mempunyai kedudukan relatif, tetapi elemen bersarang mempunyai kedudukan mutlak? Dalam kes ini, koordinat elemen anak akan dikira relatif kepada elemen induk, dengan mengambil kira offsetnya, jika ada.
rumuskan.
Jadi, ada harta kedudukan. Harta ini boleh mengambil 4 nilai Statik, Mutlak, Tetap dan Relatif. Lalainya ialah Statik.
Apabila anda menentukan koordinat untuk elemen, anda juga mesti memberitahu penyemak imbas cara ia harus mengira koordinat tersebut. Kita perlu memberinya titik permulaan.
Jangan lupa kalau tiada harta kedudukan koordinat tidak akan diambil kira, blok akan kekal di tempat yang sama, dalam kedudukan statiknya.


Sekarang mari kita lihat bagaimana koordinat ditetapkan.
Untuk tujuan ini, empat jenis sifat digunakan:
1. Atas
2. Kiri
3. Betul
4. Bawah
Atas- nilai positif (contohnya, 20px) menggerakkan blok 20 piksel ke bawah. Nilai negatif (-20px) menggerakkan elemen 20 piksel ke atas. Semua ini berlaku berbanding sudut kiri atas.
Dibiarkan- beralih ke kiri atau kanan, bergantung pada tanda. Berbanding dengan sudut kiri atas.
Betul- beralih ke kanan dan kiri, bergantung pada tanda. Berbanding dengan penjuru kanan sebelah atas.
Bawah- beralih ke atas atau ke bawah, bergantung pada tanda. Berlaku relatif kepada sudut kiri bawah.
Berikut ialah kod HTML:







Dan ini adalah CSS:
#1 {
jawatan:saudara;
atas:100px;
kiri:100px;
lebar: 500px;
ketinggian:500px;
warna latar belakang:#CCCCCC;
}
#11 {
warna latar belakang:#003399;
kedudukan:mutlak;
bawah: -30px;
kanan: -50px;
lebar: 100px;
ketinggian:100px;
}
#2 {
warna latar belakang:#990066;
lebar: 200px;
ketinggian:300px
}
berlatih.
Semasa saya menulis, saya memikirkannya sendiri.
Dua alat utama sering digunakan untuk susun atur halaman - kedudukan Dan pergerakan bebas (terapung). Kedudukan CSS membolehkan anda menentukan tempat kotak elemen muncul, dan apungan bebas mengalihkan elemen ke tepi kiri atau kanan kotak bekas, membenarkan kandungan yang lain "mengalir" di sekelilingnya.
Kedudukan dan pergerakan bebas unsur
1. Jenis kedudukan
Sifat kedudukan membolehkan anda menentukan lokasi baharu blok dengan tepat berbanding tempat ia berada dalam aliran biasa dokumen. Secara lalai, semua elemen disusun secara berurutan satu demi satu dalam susunan di mana ia ditakrifkan dalam struktur dokumen HTML. Harta tersebut tidak diwarisi.
kedudukan
Maksud:
statik	Nilai lalai bermakna tiada kedudukan. Elemen dipaparkan secara berurutan satu demi satu dalam susunan di mana ia ditakrifkan dalam dokumen HTML. Digunakan untuk mengosongkan sebarang nilai kedudukan lain.
relatif	Elemen yang agak berkedudukan dialihkan dari kedudukan normalnya ke arah yang berbeza berbanding dengan sempadan bekas induknya, tetapi ruang yang didudukinya tidak hilang. Walau bagaimanapun, elemen sedemikian mungkin bertindih dengan kandungan lain pada halaman. Jika untuk elemen yang agak kedudukan anda menetapkan sifat atas dan bawah atau kiri dan kanan pada masa yang sama, maka dalam kes pertama hanya bahagian atas akan berfungsi, dalam kedua - kiri. Kedudukan relatif membolehkan anda menetapkan indeks-z untuk elemen, serta meletakkan elemen anak secara mutlak dalam blok.
mutlak	Elemen yang diposisikan secara mutlak dialih keluar sepenuhnya daripada aliran dokumen dan diletakkan relatif kepada sempadan blok kontenanya (elemen lain atau tetingkap penyemak imbas). Blok bekas untuk elemen berkedudukan mutlak ialah elemen nenek moyang terdekat yang nilai sifat kedudukannya tidak statik . Lokasi tepi elemen ditentukan menggunakan sifat offset. Ruang yang diduduki elemen sedemikian runtuh seolah-olah elemen itu tidak wujud pada halaman. Elemen yang diposisikan secara mutlak boleh bertindih atau ditindih oleh elemen lain (disebabkan oleh sifat indeks-z). Mana-mana elemen yang diposisikan secara mutlak menjana blok, iaitu, ia mengambil paparan nilai: blok; .
tetap	Membetulkan elemen di lokasi tertentu pada halaman. Blok kontena bagi elemen tetap ialah viewport, iaitu, elemen sentiasa tetap relatif kepada tetingkap penyemak imbas dan tidak mengubah kedudukannya semasa menatal halaman. Elemen itu sendiri dialih keluar sepenuhnya daripada aliran dokumen utama dan dicipta dalam aliran dokumen baharu.
permulaan	Menetapkan nilai harta kepada nilai lalai.
mewarisi	Mewarisi nilai harta daripada elemen induk.

nasi. 1. Perbezaan antara kedudukan statik, relatif dan mutlak
2. Mengimbangi sifat
Sifat menghuraikan offset relatif kepada sisi terdekat blok kontena. Tetapkan untuk elemen yang nilai sifat kedudukannya tidak statik. Mereka boleh mengambil nilai positif dan negatif. Tidak diwarisi.
Untuk sifat teratas, nilai positif menggerakkan tepi atas elemen yang diletakkan di bawah, dan nilai negatif menggerakkan tepi atas blok bekasnya. Untuk harta kiri, nilai positif menggerakkan tepi elemen kedudukan ke kanan, dan nilai negatif menggerakkan tepi elemen kedudukan ke kiri. Iaitu, nilai positif memindahkan elemen di dalam blok bekas, dan nilai negatif memindahkannya ke luarnya.
3. Kedudukan dalam elemen
Untuk blok kontena elemen yang diposisikan secara mutlak, kedudukan: sifat relatif ditetapkan tanpa ofset. Ini membolehkan elemen diletakkan dalam elemen bekas.
.balut ( padding: 10px; tinggi: 150px; kedudukan: relatif; latar belakang: #e7e6d4; text-align: right; jidar: 3px putus-putus #645a4e; ) .white ( kedudukan: mutlak; lebar: 200px; atas: 10px; kiri : 10px; padding: 10px; latar belakang: #ffffff; jidar: 3px putus-putus #312a22; )
nasi. 2. Kedudukan relatif mutlak
4. Masalah kedudukan
1. Jika lebar atau tinggi elemen yang diletakkan secara mutlak ditetapkan kepada auto , maka nilainya akan ditentukan oleh lebar atau ketinggian kandungan elemen. Jika lebar atau tinggi diisytiharkan secara eksplisit, maka ini ialah nilai yang akan diberikan.
2. Jika di dalam blok dengan kedudukan: mutlak terdapat unsur yang ditetapkan apungan, maka ketinggian elemen ini akan sama dengan ketinggian unsur yang paling tinggi ini.
3. Untuk elemen dengan kedudukan: mutlak atau kedudukan: tetap, anda tidak boleh menetapkan sifat apungan secara serentak, tetapi untuk elemen dengan kedudukan: relatif, anda boleh.
4. Jika nenek moyang unsur kedudukan adalah unsur blok, maka bekas blok dibentuk oleh kawasan kandungan yang dibatasi sempadan. Jika moyang ialah unsur sebaris, blok bekas dibentuk oleh sempadan luar kandungannya. Jika tiada moyang, bongkah bekas ialah unsur badan.
5. Pergerakan bebas unsur
Dalam susunan biasa, elemen blok dipaparkan bermula dari tepi atas tetingkap penyemak imbas dan berfungsi ke arah tepi bawah. Sifat apungan membolehkan anda mengalihkan sebarang elemen, menjajarkannya ke tepi kiri atau kanan halaman web atau elemen bekas yang mengandunginya. Dalam kes ini, elemen blok lain akan mengabaikannya, dan elemen sebaris akan bergerak ke kanan atau kiri, membebaskan ruang untuknya dan mengalir di sekelilingnya.
nasi. 3. Pergerakan bebas unsur
Blok terapung mengambil dimensi kandungannya, dengan mengambil kira padding dan sempadan. Jidar atas dan bawah unsur terapung tidak runtuh. Sifat apungan digunakan pada kedua-dua elemen blok dan elemen sebaris.
Pinggir luar kiri atau kanan elemen yang dialihkan, tidak seperti elemen yang diposisikan, tidak boleh terletak di sebelah kiri (atau kanan) pinggir dalam blok bekasnya, i.e. melampaui batasnya. Selain itu, jika padding dalaman ditentukan untuk blok kontena, maka blok terapung akan dijarakkan dari tepi blok kontena pada jarak yang ditentukan.
Harta ini secara automatik menukar nilai yang dikira (dipaparkan pelayar) bagi sifat paparan untuk dipaparkan: blok untuk nilai berikut: sebaris , blok sebaris , baris jadual , kumpulan baris jadual , lajur jadual , kumpulan lajur jadual , sel jadual . kapsyen jadual, kumpulan pengepala jadual, kumpulan pengaki jadual. Nilai jadual sebaris berubah kepada jadual .
Sifat ini tidak mempunyai kesan pada elemen dengan paparan: flex dan paparan: inline-flex .
Apabila menggunakan sifat apungan pada elemen blok, pastikan anda menentukan lebar. Ini akan mewujudkan ruang untuk kandungan lain dalam penyemak imbas. Tetapi jika lebar gabungan semua lajur lebih besar daripada ruang yang tersedia, maka elemen terakhir akan turun.
Pada masa yang sama, jidar menegak unsur terapung tidak runtuh dengan jidar unsur jiran, tidak seperti unsur blok biasa.
6. Batalkan aliran di sekeliling elemen
6.1. harta yang jelas
Sifat jelas menentukan bagaimana elemen yang mengikuti elemen terapung akan diletakkan. Harta tersebut membatalkan apungan pada satu atau kedua-dua belah elemen yang ditetapkan oleh harta apungan. Untuk mengelakkan latar belakang atau sempadan daripada dipaparkan di bawah unsur terapung, gunakan peraturan (limpahan: tersembunyi;).
6.2. Membersihkan strim dengan gaya menggunakan kelas clearfix dan kelas pseudo :selepas
Katakan anda mempunyai bekas blok yang lebar dan tingginya tidak dinyatakan. Blok terapung dengan dimensi tertentu diletakkan di dalamnya.
.bekas ( padding: 20px; latar belakang: #e7e6d4; jidar: 3px putus-putus #645a4e; ) .floatbox ( apungan: kiri; lebar: 300px; tinggi: 150px; jidar-kanan: 20px; padding: 0 20px; latar belakang: #ffffff ; sempadan: 3px putus-putus #666666; ) nasi. 4. "Kesan runtuh" ​​blok kontena
Penyelesaian kepada masalah:
Kami mencipta kelas .clearfix dan, dalam kombinasi dengan kelas pseudo :selepas, gunakannya pada blok bekas.
.bekas ( padding: 20px; latar belakang: #e7e6d4; jidar: 3px putus-putus #645a4e; ) .floatbox ( apungan: kiri; lebar: 300px; tinggi: 150px; jidar-kanan: 20px; padding: 0 20px; latar belakang: #ffffff ; sempadan: 3px putus-putus #666666; ) .clearfix:after ( kandungan: ""; paparan: blok; ketinggian: 0; jelas: kedua-duanya; keterlihatan: tersembunyi; )
Pilihan kedua untuk mengosongkan strim:
Clearfix:after ( kandungan: ""; paparan: jadual; jelas: kedua-duanya; )
nasi. 5. Menggunakan kaedah “pembersihan” pada blok bekas yang mengandungi unsur terapung
6.3. Cara mudah untuk membersihkan aliran
Terdapat satu lagi helah untuk mengosongkan aliran untuk elemen yang mengandungi unsur terapung, seperti senarai bertitik tumpu mendatar:
Ul ( margin: 0; gaya senarai: tiada; padding: 20px; latar belakang: #e7e6d4; limpahan: auto; ) li ( float: kiri; lebar: calc(100% / 3 - 20px); tinggi: 50px; margin- kanan: 20px; latar belakang: #ffffff; sempadan: 3px putus-putus #666666; ) li:anak-terakhir (margin-kanan: 0;) Rajah. 6. Membersihkan aliran senarai mendatar
Salah satu perkara terbaik tentang CSS ialah gaya memberi kita keupayaan untuk meletakkan kandungan dan elemen pada halaman dalam hampir semua cara yang boleh dibayangkan. Ini menambah struktur pada reka bentuk kami dan membantu menjadikan kandungan lebih visual.
Terdapat beberapa jenis kedudukan yang berbeza dalam CSS, setiap jenis ini mempunyai skop tersendiri. Dalam bab ini, kita akan melihat beberapa kes penggunaan yang berbeza—membuat reka letak boleh guna semula dan meletakkan elemen pakai buang secara unik—dan menerangkan beberapa kaedah untuk berbuat demikian.
Kedudukan melalui apungan
Satu cara untuk meletakkan elemen pada halaman adalah melalui sifat apungan. Harta ini agak serba boleh dan boleh digunakan dalam pelbagai cara.
Pada asasnya, sifat apungan mengambil elemen, mengeluarkannya daripada aliran biasa halaman dan meletakkannya di sebelah kiri atau kanan elemen induknya. Semua elemen lain pada halaman akan membungkus elemen sedemikian. Sebagai contoh, perenggan akan membungkus imej jika elemen harta apungan ditetapkan.
Apabila sifat apungan digunakan pada berbilang elemen serentak, ia memungkinkan untuk membuat reka letak dengan elemen terapung bersebelahan atau bertentangan antara satu sama lain, seperti yang ditunjukkan dalam reka letak berbilang lajur.
Sifat apungan mengambil beberapa nilai, dua nilai yang paling popular ialah kiri dan kanan, yang membenarkan elemen terapung ke kiri atau kanan induknya.
Img ( terapung: kiri; )
terapung dalam amalan
Mari buat reka letak halaman umum dengan pengepala di bahagian atas, dua lajur di tengah dan pengaki di bahagian bawah. Sebaik-baiknya, halaman ini harus ditandakan dengan elemen
,
,