Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen yang lancar-tutorial css-php.cn

Cara menggunakan susun atur Kedudukan CSS untuk mencapai susun atur elemen yang lancar

王林

Lepaskan： 2023-09-28 11:24:28

asal

1153 orang telah melayarinya

如何使用CSS Positions布局实现元素的流体布局

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>

Salin selepas log masuk

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!