Bagaimana untuk menetapkan kedudukan dalam html

Dalam pembangunan web, HTML (Hypertext Markup Language) ialah bahasa yang paling asas. Ia menyediakan struktur dan kandungan ke halaman web dan membolehkan pembangun menambah pelbagai elemen seperti teks, imej dan pautan. Walau bagaimanapun, elemen ini perlu diletakkan di tempat yang betul untuk memberikan pengalaman pengguna dan estetika yang terbaik.

Seterusnya, kita akan membincangkan cara menetapkan kedudukan elemen dalam HTML, atribut mana yang boleh digunakan dan kesilapan biasa yang harus dielakkan.

1. Gunakan gaya CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mencantikkan HTML. Ia menyediakan pelbagai atribut gaya yang membantu pembangun menetapkan kedudukan elemen, seperti "kedudukan", "kiri", "kanan", "atas" dan "bawah".

1. atribut "kedudukan"

Kedudukan elemen boleh ditetapkan melalui atribut kedudukan. Ia mempunyai empat nilai yang tersedia: statik, relatif, mutlak dan tetap.

• statik ialah lalai dan elemen akan diletakkan di tempat ia berada dalam HTML. Jika tiada sifat lain mengubah lebar lalai elemen peringkat blok (seperti div), maka ia akan mengambil semua lebar bekas induknya yang tersedia.
• relative menetapkan kedudukan relatif kepada kedudukan elemen dalam HTML. Gunakan nilai kiri, kanan, atas dan bawah untuk mengalihkan elemen ke kiri, kanan, atas atau bawah berbanding kedudukan lalainya.
• meletakkan mutlak elemen relatif kepada induk kedudukan terdekatnya. Jika tiada unsur yang diposisikan dalam nenek moyangnya, elemen tersebut akan diposisikan secara relatif kepada koordinat awal HTML. Elemen boleh diletakkan di mana-mana pada halaman menggunakan nilai kiri, kanan, atas dan bawah.
• ditetapkan menyebabkan elemen kekal dalam kedudukan tetap apabila ditatal ke atas kedudukan tertentu dalam port pandangan. Ia boleh digunakan dengan sifat kiri, kanan, atas dan bawah untuk meletakkan elemen berbanding dengan port pandangan.

2. Atribut "kiri", "kanan", "atas" dan "bawah"

Atribut ini hampir selalu digunakan bersama dengan atribut kedudukan . Ia mewakili offset mendatar dan menegak bagi sesuatu elemen berbanding bekas induk atau port pandangannya. Nilai di sebelah kiri dan atas akan menggerakkan elemen ke kiri dan ke atas, manakala nilai di sebelah kanan dan bawah akan menggerakkan elemen ke kanan dan ke bawah.

2. Gunakan jadual

Anda juga boleh menetapkan kedudukan elemen menggunakan jadual HTML. Jadual terdiri daripada satu siri baris dan lajur, dan kandungan boleh dimasukkan ke dalam sel menggunakan elemen td dan th.

Dalam jadual, anda boleh menggunakan atribut penjajaran mendatar dan penjajaran menegak untuk meletakkan kandungan seperti berikut:

<table>
  <tr>
    <td align="center" valign="middle">居中</td>
    <td align="left" valign="bottom">左下角</td>
    <td align="right" valign="top">右上角</td>
  </tr>
</table>

3 Elakkan kesilapan biasa

• Jangan hanya menggunakan nilai piksel. Kerana saiz skrin, resolusi dan peranti yang berbeza mungkin menjejaskan paparan halaman web. Apabila menetapkan kedudukan elemen, anda harus menggunakan peratusan atau nilai em.
• Jangan gunakan jadual untuk menyusun keseluruhan halaman web. Jadual bertujuan untuk memaparkan data dengan baris dan lajur dan tidak mengendalikan isu reka letak dengan baik.
• Jangan gunakan lokasi berkod keras. Reka bentuk web harus dapat menyesuaikan diri dengan pelbagai saiz skrin. Untuk tujuan ini, sifat susun atur fleksibel CSS seperti flexbox dan susun atur grid harus digunakan.

HTML ialah bahasa paling asas semasa membangunkan halaman web. Mengetahui cara meletakkan elemen dan menggunakan kaedah reka letak yang betul akan memastikan halaman web anda menyesuaikan diri dengan pelbagai saiz skrin, dengan itu meningkatkan pengalaman pengguna dan trafik tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!