CSS Tidak Sukar(Anda Hanya Hilang Asas Ini)- Menguasai Asas (Bahagian 2)-tutorial css-php.cn

Terima kasih semua atas komen pada artikel lepas, ia sangat bermakna. Saya harap anda belajar satu atau dua perkara daripada artikel ini.

Dalam artikel ini, kami akan meneroka dua konsep asas dalam CSS—kedudukan dan reka letak. Kedudukan dan reka letak adalah nadi dalam mencipta halaman web yang menarik dan berfungsi secara visual. Menguasai konsep ini membolehkan anda menghasilkan reka bentuk responsif yang meningkatkan pengalaman pengguna. Pada akhirnya, anda akan tahu cara menggunakan teknik ini untuk menstruktur halaman web anda seperti profesional.

- Kedudukan dan Susun Atur

Penedudukan CSS mengawal cara elemen diletakkan atau diletakkan pada halaman web. Kedudukan dipengaruhi oleh nilai offset Atas, Bawah, Kiri dan Kanan apabila berkenaan. Terdapat 5 nilai Kedudukan CSS utama;

1. Statik: Semua elemen HTML diletakkan statik secara lalai. Ini bermakna elemen tidak berubah dan tidak bergerak serta tidak dipengaruhi oleh nilai offset Atas, Bawah, Kiri dan Kanan.

2. Relatif: Elemen diletakkan relatif kepada kedudukan normalnya.

3. Mutlak: Elemen diletakkan secara relatif kepada nenek moyang terdekat (ibu bapa) atau port pandangan.

4. Dibetulkan: Elemen diposisikan relatif kepada port pandangan dan kekal tetap semasa menatal.

5. Melekit: Kedudukan melekit membolehkan elemen bertukar antara kedudukan relatif dan tetap berdasarkan kedudukan tatal dan mengimbangi nilai Atas, Bawah, Kiri dan Kanan.

Di bawah ialah ilustrasi yang menerangkan kedudukan CSS.

CSS Is Not Hard(You

Berikut ialah kod yang membantu menghidupkan ilustrasi itu. Jangan ragu untuk menyalin dan mengubah suai anda sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Salin selepas log masuk

— Jeda, Tarik nafas dalam-dalam, dan kemudian teruskan!!—
- Reka Letak CSS

1. Flexbox: Ini ialah kaedah susun atur satu dimensi yang digunakan untuk meletakkan item dalam satu paksi (mendatar dan menegak).

Ciri flexbox

paparan: flex - Ini mencipta kotak flex untuk bekas.
align-item: tengah - Ini mengawal penjajaran menegak bekas.
justify-content: space-between - Ini mengawal penjajaran mendatar bekas.
jurang: menambah jarak antara item fleksibel tanpa memerlukan jidar.

Berikut ialah sebelum dan selepas Bar Navigasi ringkas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

Salin selepas log masuk

Keputusan:

CSS Is Not Hard(You

2. Grid: Ini ialah kaedah reka letak 2 dimensi yang digunakan dalam mencipta baris dan lajur.

Ciri

paparan: grid - Ini mencipta Grid untuk bekas.
grid-template-columns/grid-template-rows - Ini mentakrifkan baris atau lajur untuk bekas.
repeat(2, 1fr) - Ini menghasilkan 2 lajur yang sama lebar.
jurang: 10px- Menambah jarak antara item grid.

Berikut ialah sebelum dan selepas beberapa foto kucing yang saya temui di Unsplash.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Salin selepas log masuk

Keputusan:

CSS Is Not Hard(You

Jadual Perbandingan

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

Kedudukan dan Reka Letak ialah asas CSS. Memahami masa dan cara menggunakannya bukan sahaja akan menjadikan pengalaman penggayaan anda lebih mudah tetapi juga lebih menyeronokkan dan cekap. Walaupun artikel ini membolehkan anda bermula dengan Flexbox dan Grid, saya akan menerbitkan panduan yang lebih mendalam yang meneroka ciri, petua dan helah lanjutan mereka tidak lama lagi. Nantikan untuk itu!

Dan itu adalah penutup Menguasai Asas CSS! Saya harap anda seronok membaca ini sama seperti saya seronok menulisnya. Tetapi sebelum kita berpisah, saya ingin mendengar daripada anda:

Kaedah susun atur CSS yang manakah anda lebih suka untuk projek anda—Flexbox atau Grid? Dan kenapa?

Jangan ragu untuk berkongsi pendapat anda dalam ulasan di bawah.

Selamat tinggal sekarang!!!!

Atas ialah kandungan terperinci CSS Tidak Sukar(Anda Hanya Hilang Asas Ini)- Menguasai Asas (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!