Panduan kepada sifat susun atur bendalir CSS: kedudukan tetap dan blok sebaris-tutorial css-php.cn

Panduan kepada sifat susun atur bendalir CSS: kedudukan tetap dan blok sebaris

王林

Lepaskan： 2023-10-21 09:56:03

asal

788 orang telah melayarinya

CSS 流式布局属性指南：position fixed 和 inline-block

Panduan sifat susun atur bendalir CSS: kedudukan tetap dan blok sebaris

Dalam reka bentuk web, adalah sangat penting untuk mencapai susun atur bendalir . Reka letak bendalir membolehkan antara muka web menyesuaikan diri dengan peranti yang berbeza di bawah saiz skrin yang berbeza, memberikan pengalaman pengguna yang lebih baik. Dalam CSS, terdapat banyak sifat yang boleh mencapai susun atur bendalir, antaranya kedudukan tetap dan blok sebaris adalah dua sifat yang biasa digunakan. Artikel ini menerangkan kedua-dua sifat ini bersama-sama dengan contoh kod tertentu.

1. kedudukan tetap

Atribut tetap kedudukan ialah atribut kedudukan dalam CSS Dengan menetapkan kaedah penentududukan elemen kepada kedudukan tetap, elemen boleh dipaparkan pada a kedudukan tetap pada halaman. Apabila halaman menatal, elemen tidak berubah kedudukan semasa halaman menatal.

Berikut ialah sintaks umum atribut tetap kedudukan:

.selector {
  position: fixed;
  top: 0;
  left: 0;
}

Salin selepas log masuk

Antaranya, .selector mewakili elemen yang atribut ini akan digunakan, dan atas dan kiri digunakan untuk menetapkan jarak antara bahagian atas dan kiri jarak. Dengan menetapkan nilai yang berbeza, anda boleh mengawal kedudukan tertentu elemen pada halaman.

Atribut tetap kedudukan mempunyai pelbagai senario aplikasi. Contohnya, menggunakan kedudukan tetap dalam bar navigasi kepala halaman web boleh mengekalkan bar navigasi dalam kedudukan tetap apabila halaman itu ditatal, menjadikannya lebih mudah untuk pengguna menavigasi dengan cepat.

Berikut ialah contoh kod khusus yang menunjukkan cara menggunakan kedudukan tetap untuk melaksanakan bar navigasi tetap:

<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.content {
  padding-top: 50px;
}
</style>
</head>
<body>

<div class="navbar">这是一个固定的导航栏</div>

<div class="content">
  <h1>内容区域</h1>
  <p>这是一个网页的内容部分。</p>
</div>

</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, dengan menetapkan kedudukan .navbar kepada tetap , menjadikan bar navigasi ditetapkan pada bahagian atas halaman. Dalam bahagian kandungan, bahagian atas pelapik ditetapkan kepada nilai yang sama dengan ketinggian bar navigasi untuk mengelakkan kandungan daripada diliputi oleh bar navigasi.

2. inline-block

Atribut inline-block ialah atribut paparan dalam CSS Dengan menetapkan atribut paparan elemen kepada inline-block, elemen tersebut boleh dibuat sebaris. Dipaparkan sebagai elemen peringkat blok.

Berikut ialah sintaks umum atribut blok sebaris:

.selector {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

Salin selepas log masuk

Antaranya, .selector mewakili elemen yang digunakan atribut ini, dan lebar dan tinggi adalah digunakan untuk menetapkan lebar dan ketinggian elemen , warna latar belakang digunakan untuk menetapkan warna latar belakang elemen, dan margin digunakan untuk menetapkan jarak antara elemen.

Atribut blok sebaris sering digunakan untuk melaksanakan reka letak berbilang lajur, terutamanya apabila menyusahkan untuk menggunakan atribut apungan. Dengan menetapkan elemen kepada sekatan sebaris, anda boleh memaparkan berbilang elemen dalam satu baris dan mengekalkan ciri peringkat bloknya.

Berikut ialah contoh kod khusus yang menunjukkan cara menggunakan blok sebaris untuk melaksanakan susun atur berbilang lajur yang mudah:

<!DOCTYPE html>
<html>
<head>
<style>
.column {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f00;
  margin: 10px;
}
</style>
</head>
<body>

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, dengan menukar . elemen lajur Atribut paparan ditetapkan kepada blok sebaris, yang membolehkan tiga elemen dipaparkan dalam satu baris dan mengekalkan ciri peringkat blok. Sifat lebar, tinggi, warna latar belakang dan jidar menetapkan saiz unsur, warna latar belakang dan jarak antara unsur.

Ringkasan:

Artikel ini memperkenalkan kedudukan tetap dan blok sebaris dalam sifat susun atur bendalir CSS dan menyediakan contoh kod khusus. Dengan memahami dan menggunakan kedua-dua atribut ini secara fleksibel, anda boleh mengawal reka letak halaman web dengan lebih baik dan memberikan pengalaman pengguna yang lebih baik. Saya berharap pembaca dapat menguasai kaedah menggunakan atribut tetap kedudukan dan blok sebaris untuk mencapai susun atur bendalir melalui mengkaji artikel ini.

Atas ialah kandungan terperinci Panduan kepada sifat susun atur bendalir CSS: kedudukan tetap dan blok sebaris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!