CSS - 佈局

CSS 佈局對於定義網站的視覺結構、組織和響應性至關重要。在本教程中，我們將探索各種 CSS 技術來建立有效的網站佈局。

網頁佈局結構

網頁由各種部分組成，例如標題、選單、內容和頁尾，基於這些部分，開發人員可以使用許多不同的佈局設計。

要了解如何定義網頁結構，請檢視我們關於HTML 佈局的教程。在這裡，我們解釋了網頁佈局的每個元素。在本教程中，我們將瞭解如何使用 CSS 樣式化網頁佈局。

CSS 正常佈局流程

正常流是預設的佈局模式，其中元素按其在 HTML 文件中出現的順序進行定位。

塊級元素，如<div>、<p>、標題將垂直堆疊，如果沒有指定，則佔據完整寬度。
內聯元素，如<span>、<strong>水平堆疊。您無法更改這些元素的高度和寬度。
內聯塊級元素將同時具有內聯和塊級元素的特性。它們將從當前行開始，但您可以更改其大小。

讓我們看看 CSS 正常佈局流程的示例

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div, span{
            border: 2px solid;
            margin: 10px;
        }
        .inlineBlock{
            display: inline-block;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div> Block Element </div>
    <div> Block Element </div>
    <span> Inline element </span>
    <span> Inline element </span>
    <div> Block Element </div>
    <span> Inline element </span>
    <div class="inlineBlock">
        Inline Block Element
    </div>
</body>

</html>

CSS 浮動佈局

浮動佈局用於在文件流中將元素定位到左側或右側。此佈局系統的主要用途是建立兩列布局，以及在網頁中將文字環繞影像的兩側。

.sidebar {
    float: left;
    width: 25%;
}
.main-content {
    float: right;
    width: 75%;
}

此佈局在頁面左側建立了一個側邊欄，佔據可用寬度的 25%，並在右側建立了主要內容，佔據 75% 的寬度。

在本例中，我們將瞭解如何使用影像的浮動來環繞文字。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .float-left {
            float: left;
            margin-bottom: 20px;
            margin-right: 10px;
            border: 3px solid;
        }
        h3{
            clear: left;
        }
    </style>
</head>

<body>
    <img src="/css/images/logo.png" class="float-left" >
    <p>This text will wrap around the floated image.</p>
    <h3>This text with float cleared</h3>
</body>

</html>

CSS Flex 佈局

CSS Flex 佈局 在容器內沿單個維度組織元素，該維度可以是水平對齊或垂直對齊。

以下示例使用 flex-direction 為 row，這意味著專案將水平排列。對於垂直排列，您需要將 flex-direction 設定為 column。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 200px;
        }
        .item {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px;
            border: 3px solid #ccc;
        }
    </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>

CSS 網格佈局

CSS 網格佈局是一個二維佈局系統，用於在開發響應式網頁時水平和垂直組織元素。

在以下示例中，我們將列定義為“2fr 1fr 1fr”，這意味著第一列應占據可用空間的 2 個分數，其餘兩列佔據可用空間的 1 個分數。

示例

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 2fr 1fr 1fr;
         grid-template-rows: 100px 100px 100px;
         gap: 20px; 
      }
      .grid-item {
         background-color: #4CAF50;
         border: 4px solid black;
         padding: 20px;
         text-align: center;
         color: white;
      }
   </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item"> Item 1 </div>

        <div class="grid-item"> Item 2 </div>

        <div class="grid-item"> Item 3 </div>

        <div class="grid-item"> Item 4 </div>
        
        <div class="grid-item"> Item 5 </div>
    </div>
</body>

</html>

CSS 定位

CSS 定位有助於操縱網頁中任何元素的位置。

除了position 屬性外，其他屬性如top、bottom、left 和right 用於控制其在頁面上的精確位置。它們指定元素與其邊緣的偏移量。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        *{
            padding: 15px;
        }
        .container {
            border: 1px solid #ccc;
        }
        .static-element {
            position: static;
            background-color: lightblue;
        }
        .relative-element {
            position: relative;
            top: 20px;  
            left: 30px; 
            background-color: lightgreen;
        }
        .normal-flow {
            background-color: lightcoral;
            margin: 10px 0;
        }
    </style>
</head>

<body>
   <div class="container">
        <div class="static-element">
            This is a static element (default position).
        </div>
        <div class="relative-element">
            This element is relatively positioned 20px 
            down and 30px right.
        </div>
        <div class="normal-flow">
            This element is in the normal document 
            flow, after the relative element.
        </div>
   </div>
</body>
</html>

CSS 響應式佈局

響應式網頁佈局在所有終端使用者裝置（如手機、平板電腦和桌上型電腦）上看起來都很好。它將根據使用者裝置自動調整大小和其他功能。

在 CSS 中，媒體查詢 用於根據螢幕尺寸、解析度和使用者裝置的其他特性應用不同的 CSS 樣式。

@media (width > 700px) {
    /* Styles for screens that are at least 700px wide */
}

以下示例演示了當螢幕寬度在 600px 和 800px 之間時，背景顏色更改為黃色，文字顏色更改為紅色。

示例

<html>
<head>
    <style>
    p {
        color: blue;
    }
    @media (600px < width < 800px) {
        p {
            background-color: yellow;
            color: red;
        }
    }
    </style>
</head>

<body>
    <h1> TutorialsPoint </h1>
    <p> CSS Media Type - Screen </p>
    <p> 
        Resize the browser size to see the effect. (Open HTML 
        compiler of TutorialsPoint and try there )
    </p>
</body>

</html>

列印頁面