CSS 並不難（你只是缺少這些基礎知識）- 掌握基礎（第 2 部分）

感謝大家對上一篇文章的評論，這確實意義重大。我希望你能從這篇文章中學到一兩件事。

在本文中，我們將探討 CSS 中的兩個基本概念－定位與版面。定位和佈局是創建具有視覺吸引力和功能性的網頁的核心。掌握這些概念可以讓您製作出增強使用者體驗的響應式設計。最後，您將了解如何使用這些技術像專業人士一樣建立您的網頁。

- 定位與版面

CSS 定位控制元素在網頁上的定位或放置方式。如果適用，定位會受到頂部、底部、左側和右側偏移值的影響。有 5 個主要的 CSS Position 值；

1。靜態： 預設情況下，所有 HTML 元素都是靜態定位的。這僅僅意味著元素不變，不移動，不受上、下、左、右偏移值的影響。

2。相對： 元素相對於其正常位置定位。

3。絕對： 元素相對於其最近的祖先（父級）或視口定位。

4。已修正： 元素相對於視口定位並在滾動期間保持固定。

5。黏性： 黏性定位允許元素根據滾動位置和偏移值上、下、左、右在相對位置和固定位置之間切換。

以下是解釋 CSS 定位的插圖。

這是幫助使插圖栩栩如生的程式碼。歡迎自行複製修改。

    <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">


    <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;
}

— 暫停，深呼吸，然後繼續！ ！ —
- CSS 版面配置

1。 Flexbox：這是一種一維佈局方法，用於在單軸（水平和垂直）上佈局項目。

Flexbox 的特點

• display: flex - 這會為容器建立一個彈性框。
• align-items: center - 這控制容器的垂直對齊。
• justify-content: space- Between - 這控制容器的水平對齊方式。
• 間隙：在不需要邊距的情況下增加彈性項目之間的間距。

這是一個簡單導覽列的前後對比

    <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">


    <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;
}

結果：

2。網格：這是一種用於建立行和列的二維佈局方法。

特點

• display: grid - 這會為容器建立一個網格。
• grid-template-columns/grid-template-rows - 這定義了容器的行或列。
• Repeat(2, 1fr) - 這將建立 2 個等寬列。
• 間隙：10px-增加網格項目之間的間距。

這是我在 Unsplash 上找到的一些貓照片的前後對比。

    <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">


    <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;
}

結果：

比較表

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

定位和佈局是CSS的基礎。了解何時以及如何使用它們不僅會讓您的造型體驗變得更加輕鬆，而且更加愉快和高效。雖然本文將帶您開始使用 Flexbox 和 Grid，但我很快就會發布更深入的指南，探索它們的高級功能、提示和技巧。請繼續關注！

這就是掌握CSS基礎的總結！ 我希望你喜歡閱讀這篇文章，就像我喜歡寫它一樣。但在我們分別之前，我很想聽聽你的消息：

您的專案喜歡哪種 CSS 佈局方法 - Flexbox 還是 Grid？為什麼？

歡迎在下面的評論中分享您的想法。

再見了！ ！ ！ ！