Panduan untuk sifat susun atur fleksibel CSS: letak melekit dan kotak fleksibel

Panduan Hartanah Reka Letak Fleksibel CSS: letak melekit dan flexbox

Dalam reka bentuk web moden, reka letak fleksibel telah menjadi teknologi yang sangat popular dan berguna. Ia boleh membantu kami membuat reka letak halaman web yang boleh suai supaya halaman web boleh memaparkan dan bertindak balas dengan baik pada peranti dan saiz skrin yang berbeza.

Artikel ini akan memfokuskan pada dua sifat susun atur yang fleksibel: kedudukan: melekit dan kotak fleksibel. Kami akan membincangkan penggunaannya secara terperinci dan menunjukkan aplikasinya melalui contoh kod konkrit.

1. kedudukan: melekit

kedudukan: melekit ialah sifat CSS berkuasa yang membolehkan elemen kekal dalam kedudukan tertentu semasa menatal. Penggunaannya sangat mudah. ​​Anda hanya perlu menetapkan kedudukan: melekat pada elemen dan tentukan nilai atas, bawah, kiri atau kanan untuk menetapkan elemen dalam kedudukan berbanding tetingkap paparan.

Berikut ialah contoh khusus:

Kod HTML:

<div class="container">
  <div class="header">我是头部</div>
  <div class="content">我是内容</div>
  <div class="footer">我是尾部</div>
</div>

Kod CSS:

.container {
  height: 400px;
  overflow-y: scroll;
}

.header {
  position: sticky;
  top: 0;
  background-color: red;
}

.content {
  height: 1000px;
  background-color: yellow;
}

.footer {
  height: 200px;
  background-color: green;
}

Dalam kod di atas, kami mencipta bekas dengan ketinggian 400px dan menetapkan penatalan menegak. Kemudian, kami menetapkan elemen pengepala kepada melekit, menambatnya ke bahagian atas bekas.

Apabila kita menatal halaman dalam penyemak imbas, elemen pengepala akan sentiasa kekal di bahagian atas bekas dan tidak akan hilang semasa halaman menatal. Ini membolehkan kami dengan mudah melaksanakan kesan seperti bar navigasi tetap dan bar tajuk.

2. Flexbox

Flexbox ialah reka letak model kotak fleksibel yang diperkenalkan oleh CSS3, yang boleh menjadikan reka letak halaman web lebih fleksibel dan menyesuaikan diri. Dengan flexbox, kami boleh mengawal kedudukan, saiz dan susunan elemen dalam bekas dengan mudah.

Berikut ialah contoh khusus:

Kod HTML:

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

Kod CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

Dalam kod di atas, kami mencipta bekas dan menetapkan sifat paparannya kepada flex, menunjukkan bahawa ini ialah bekas kotak flex . Kami juga menggunakan atribut justify-content untuk menetapkan penjajaran mendatar bagi tiga elemen kanak-kanak kepada ruang-antara, supaya ruang antara elemen kanak-kanak akan sama.

Setiap elemen kanak-kanak mempunyai set lebar dan ketinggiannya, warna latar belakangnya berwarna biru, dan jidarnya ditetapkan.

Dengan kod di atas, kami telah melaksanakan susun atur flexbox yang mudah Ketiga-tiga elemen kotak akan melaraskan saiz dan kedudukannya secara automatik untuk disesuaikan dengan saiz dan keperluan bekas.

Ringkasan:

Artikel ini memperkenalkan dua sifat susun atur fleksibel yang sangat berguna: kedudukan: melekit dan kotak fleksibel. kedudukan: melekit boleh membantu kami mencapai kesan tetap tatal bagi elemen, manakala flexbox boleh menjadikan reka letak halaman web lebih fleksibel dan menyesuaikan diri. Melalui contoh kod di atas, kita dapat memahami dengan jelas penggunaan dan kesan kedua-dua sifat ini.

Saya harap artikel ini dapat membantu semua orang lebih memahami dan menggunakan kedua-dua atribut reka letak anjal ini, dengan itu membawa lebih banyak kemudahan dan fleksibiliti kepada reka bentuk dan pembangunan web.

Atas ialah kandungan terperinci Panduan untuk sifat susun atur fleksibel CSS: letak melekit dan kotak fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!