hujung hadapan web
tutorial css
Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen yang lancar
Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen yang lancar
Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen cecair
Dalam pembangunan web, melaksanakan susun atur elemen bendalir ialah kemahiran penting. Reka letak CSS Positions ialah kaedah yang biasa digunakan yang boleh membantu kami mencapai kebolehsuaian dan kecairan elemen. Artikel ini akan memperkenalkan cara menggunakan susun atur Kedudukan CSS untuk mencapai reka letak bendalir elemen, serta contoh kod khusus.
Susun atur Kedudukan CSS mengawal susun atur dan kedudukan elemen dengan menetapkan atribut kedudukan (kedudukan) elemen. Beberapa atribut penentududukan yang biasa digunakan ialah:
- statik: Kaedah penentududukan lalai bagi elemen, yang dibentangkan mengikut aliran biasa dalam dokumen HTML. Kedudukan elemen tidak boleh dikawal melalui atribut atas, bawah, kiri dan kanan.
- relatif: kedudukan relatif, elemen diimbangi berdasarkan kedudukannya dalam aliran biasa. Kedudukan elemen boleh dikawal dengan menetapkan atribut atas, bawah, kiri dan kanan.
- mutlak: Kedudukan mutlak, elemen diasingkan daripada aliran dokumen dan diposisikan relatif kepada elemen induk kedudukan terdekatnya. Jika tiada elemen induk yang diposisikan, ia diposisikan secara relatif kepada elemen badan. Kedudukan elemen boleh dikawal dengan menetapkan atribut atas, bawah, kiri dan kanan.
- dibetulkan: Kedudukan tetap, elemen diletakkan relatif kepada tetingkap penyemak imbas dan tidak akan bergerak dengan menatal. Kedudukan elemen boleh dikawal dengan menetapkan atribut atas, bawah, kiri dan kanan.
Berikut ialah contoh susun atur bendalir mudah:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 500px;
width: 800px;
border: 1px solid #000;
}
.box {
position: absolute;
height: 100px;
width: 100px;
background-color: blue;
}
.box1 {
top: 50px;
left: 50px;
}
.box2 {
top: 150px;
left: 150px;
}
.box3 {
top: 250px;
left: 250px;
}
.box4 {
top: 350px;
left: 350px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>Dalam kod di atas, kami mencipta bekas (.container), tetapkan ketinggiannya kepada 500px, lebar kepada 800px dan tambah sempadan padanya. Kemudian, kami mencipta empat elemen kanak-kanak (.box) dan menetapkan kedudukannya masing-masing (dengan melaraskan nilai atribut atas dan kiri) untuk mencapai kesan susun atur bendalir.
Melalui contoh kod di atas, kita dapat melihat bahawa empat sub-elemen disusun mengikut kedudukan yang kita tetapkan. Memandangkan mod kedudukan mereka ditetapkan kepada mutlak, ia dipisahkan daripada aliran dokumen biasa dan boleh diletakkan mengikut keperluan kami.
Dengan melaraskan saiz bekas (.bekas), kita dapat melihat bahawa kedudukan elemen kanak-kanak juga berubah dengan sewajarnya, sekali gus mencapai kesan susun atur bendalir.
Ringkasnya, susun atur Kedudukan CSS ialah kaedah yang biasa digunakan untuk mencapai susun atur elemen yang cair. Dengan menetapkan atribut kedudukan sesuatu elemen dan melaraskan nilai atribut kedudukannya, kita boleh mencapai pelbagai kesan susun atur penyesuaian dan bendalir. Saya berharap kaedah yang diperkenalkan dalam artikel ini akan membantu anda dalam melaksanakan susun atur cecair elemen dalam pembangunan web.
Atas ialah kandungan terperinci Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen yang lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
Cara membuat susun atur karusel responsif menggunakan HTML dan CSS
Oct 20, 2023 pm 04:24 PM
Cara membuat reka letak karusel responsif menggunakan HTML dan CSS Karusel ialah elemen biasa dalam reka bentuk web moden. Ia boleh menarik perhatian pengguna, memaparkan berbilang kandungan atau imej, dan bertukar secara automatik. Dalam artikel ini, kami akan memperkenalkan cara membuat reka letak karusel responsif menggunakan HTML dan CSS. Pertama, kita perlu mencipta struktur HTML asas dan menambah gaya CSS yang diperlukan. Berikut ialah struktur HTML ringkas: <!DOCTYPEhtml&g
Kemahiran aplikasi fleksibel atribut kedudukan dalam H5
Dec 27, 2023 pm 01:05 PM
Bagaimana untuk menggunakan atribut kedudukan secara fleksibel dalam H5 Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5.
Memperkenalkan kaedah susunan tingkap dalam win7
Dec 26, 2023 pm 04:37 PM
Apabila kami membuka berbilang tetingkap pada masa yang sama, win7 mempunyai fungsi mengatur berbilang tetingkap dengan cara yang berbeza dan kemudian memaparkannya pada masa yang sama, yang membolehkan kami melihat kandungan setiap tetingkap dengan lebih jelas. Jadi berapa banyak susunan tetingkap yang ada dalam win7? Mari kita lihat dengan editor. Terdapat beberapa cara untuk menyusun tetingkap Windows 7: tiga, iaitu tingkap berlatarkan, tingkap paparan bertindan dan tingkap paparan bersebelahan. Apabila kita membuka berbilang tetingkap, kita boleh klik kanan pada ruang kosong pada bar tugas. Anda boleh melihat tiga susunan tingkap. 1. Tingkap bertindan: 2. Tingkap paparan bertindan: 3. Tetingkap paparan bersebelahan:
Senario penggunaan sintaks mengandungi dalam CSS
Feb 21, 2024 pm 02:00 PM
Senario penggunaan sintaks mengandungi dalam CSS Dalam CSS, mengandungi ialah atribut berguna yang menentukan sama ada kandungan elemen adalah bebas daripada gaya dan reka letak luarannya. Ia membantu pembangun mengawal reka letak halaman dengan lebih baik dan mengoptimumkan prestasi. Artikel ini akan memperkenalkan senario penggunaan sintaks atribut contain dan memberikan contoh kod khusus. Sintaks atribut contain adalah seperti berikut: contain:layout|paint|size|style|'noe'|'stric
Kesan peralihan CSS: bagaimana untuk mencapai kesan gelongsor elemen
Nov 21, 2023 pm 01:16 PM
Kesan peralihan CSS: Bagaimana untuk mencapai kesan gelongsor elemen Pengenalan: Dalam reka bentuk web, kesan dinamik elemen boleh meningkatkan pengalaman pengguna, antaranya kesan gelongsor adalah kesan peralihan yang biasa dan popular. Melalui sifat peralihan CSS, kita boleh mencapai kesan animasi gelongsor elemen dengan mudah. Artikel ini akan memperkenalkan cara menggunakan sifat peralihan CSS untuk mencapai kesan gelongsor elemen dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan dengan lebih baik. 1. Pengenalan kepada peralihan atribut CSS peralihan atribut peralihan CSS tra
Transformasi CSS: bagaimana untuk mencapai kesan putaran elemen
Nov 21, 2023 pm 06:36 PM
Transformasi CSS: Cara untuk mencapai kesan putaran elemen memerlukan contoh kod khusus Dalam reka bentuk web, kesan animasi adalah salah satu cara penting untuk meningkatkan pengalaman pengguna dan menarik perhatian pengguna, dan animasi putaran adalah salah satu yang lebih klasik. Dalam CSS, anda boleh menggunakan atribut "transform" untuk mencapai pelbagai kesan ubah bentuk elemen, termasuk putaran. Artikel ini akan memperkenalkan secara terperinci cara menggunakan "transform" CSS untuk mencapai kesan putaran elemen, dan memberikan contoh kod khusus. 1. Cara menggunakan "transf" CSS
Windows 11 terus menambah susun atur papan kekunci: 4 penyelesaian yang diuji
Dec 14, 2023 pm 05:49 PM
Bagi sesetengah pengguna, Windows 11 terus menambah reka letak papan kekunci baharu walaupun mereka tidak menerima atau mengesahkan perubahan itu. Pasukan perisian WindowsReport telah mereplikasi isu ini dan mengetahui cara menghalang Windows 11 daripada menambah susun atur papan kekunci baharu pada PC anda. Mengapa Windows 11 menambah susun atur papan kekuncinya sendiri? Ini biasanya berlaku apabila menggunakan bahasa bukan asli dan gabungan papan kekunci. Contohnya, jika anda menggunakan bahasa paparan AS dan susun atur papan kekunci Perancis, Windows 11 juga boleh menambah papan kekunci bahasa Inggeris. Perkara yang perlu dilakukan jika Windows 11 menambah susun atur papan kekunci baharu yang anda tidak mahu. Bagaimana untuk menghalang Windows 11 daripada menambah susun atur papan kekunci? 1. Padamkan susun atur papan kekunci yang tidak perlu dan klik "Buka"
