Pemahaman mendalam tentang lima rangka kerja susun atur CSS biasa-tutorial css-php.cn

Pemahaman mendalam tentang lima rangka kerja susun atur CSS biasa

WBOY

Lepaskan： 2024-01-16 08:41:06

asal

1010 orang telah melayarinya

Pemahaman mendalam tentang lima rangka kerja susun atur CSS biasa

Fahami rangka kerja reka letak CSS: analisis lima reka letak biasa

Dalam reka bentuk dan pembangunan web, reka letak CSS merupakan aspek yang sangat penting. Reka letak yang baik boleh menjadikan halaman web lebih cantik dan lebih berfungsi. Memahami rangka kerja reka letak CSS boleh membantu kami menguasai kemahiran reka letak halaman web dengan lebih baik. Artikel ini akan memperkenalkan lima susun atur CSS biasa dan memberikan contoh kod khusus.

1. Susun atur bendalir (kedudukan bendalir)

Susun atur bendalir ialah kaedah susun atur yang disesuaikan dengan saiz skrin. Gunakan peratusan terutamanya untuk menetapkan lebar atau ketinggian elemen untuk menampung pelbagai saiz skrin. Berikut ialah contoh susun atur aliran mudah:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
      }
      .left-panel {
        width: 25%;
        background-color: yellow;
        float: left;
      }
      .right-panel {
        width: 75%;
        background-color: lightblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-panel">
        <p>This is left panel.</p>
      </div>
      <div class="right-panel">
        <p>This is right panel.</p>
      </div>
    </div>
  </body>
</html>

Salin selepas log masuk

2. Susun atur grid (Grid)

Susun atur grid ialah kaedah susun atur dua dimensi yang boleh mencipta struktur grid kompleks dengan mudah. Menggunakan reka letak grid, anda membuat baris dan lajur dalam bekas dan kemudian meletakkan elemen ke lokasi yang ditentukan. Berikut ialah contoh susun atur grid mudah:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

Salin selepas log masuk

3. Reka letak fleksibel (Flexbox)

Flexbox ialah kaedah susun atur fleksibel yang boleh melaraskan saiz dan kedudukan elemen secara automatik dalam bekas. Menggunakan susun atur yang fleksibel, pelbagai keperluan susun atur boleh direalisasikan dengan mudah. Berikut ialah contoh susun atur mudah fleksibel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Salin selepas log masuk

4. Susun atur terapung (Float)

Susun atur terapung ialah teknologi yang digunakan untuk melaksanakan susun atur berbilang lajur. Dengan mengapungkan elemen ke kedudukan tertentu, anda boleh mencapai kesan berbilang lajur. Berikut ialah contoh susun atur terapung yang mudah:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .item {
        width: 30%;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Salin selepas log masuk

5. Susun atur kedudukan (Position)

Susun atur penentududukan ialah cara meletakkan elemen dengan menyatakan kedudukannya dalam aliran dokumen. Anda boleh meletakkan elemen relatif kepada elemen induknya atau tetingkap dokumen dengan menetapkan sifat kedudukannya. Berikut ialah contoh susun atur kedudukan mudah:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: lightblue;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

Salin selepas log masuk

Ringkasan:

Artikel ini memperkenalkan lima rangka kerja susun atur CSS biasa, iaitu susun atur bendalir, susun atur grid, susun atur elastik, susun atur terapung dan susun atur kedudukan. Dengan mempelajari rangka kerja susun atur ini, kita dapat menguasai kemahiran susun atur halaman web dengan lebih baik, dan dapat memilih kaedah susun atur yang sesuai mengikut keperluan sebenar. Semoga artikel ini bermanfaat kepada semua orang!

Atas ialah kandungan terperinci Pemahaman mendalam tentang lima rangka kerja susun atur CSS biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!