首頁 >web前端 >css教學 >如何設定預設值來對齊 CSS 中的內容？

如何設定預設值來對齊 CSS 中的內容？

WBOY轉載: 2023-08-30 09:09:06813瀏覽

如何设置默认值来对齐 CSS 中的内容？

CSS是一種網路語言，主要用於設計和呈現網頁。它為我們提供了許多有助於定製過程的屬性。其中一個屬性是「對齊內容屬性」。

對齊內容屬性用於在屬於彈性盒或網格的項目之間或周圍分配空間。此屬性的初始值為「正常」。它具有離散動畫，並且計算值始終等於指定值。

要注意的是，它不是可繼承的屬性。這是大多數瀏覽器廣泛支援的屬性。

可以為此屬性提供的各種值如下所述 -

Start - 當您希望內容或項目從容器元素的開頭開始打包時使用。
End - 當您希望內容或項目從容器元素的末端開始打包時使用。
Center - 用於將子元素打包在對齊容器的中心。
Normal - 這是對齊內容屬性的預設值。
Flex-start - 用於彈性盒類型容器，並將開始沿起始邊緣對齊專案。但是，如果我們在不是 Flexbox 的容器上使用它們，這將被視為開始。
Flex-end - 就像 flex-start 一樣，它也用在 Flexbox 類型的容器中，並將開始沿著結束邊緣對齊專案。但是，如果我們在不是 Flexbox 的容器上使用它們，這將被視為結束。
Space- Between - 使用此屬性指定的項目將沿著容器的橫軸對齊，並且沿著相鄰元素具有相同的間距。
Space-around - 它的工作原理與之間的空間類似，但第一個元素的左側和最後一個元素的右側的空間將等於該元素的一半兩個相鄰元素之間的空間。
Space-evenly - 這只表示所有元素之間都有相同的空間，不像均勻的空間，從第一個元素的開頭到最後一個元素的結尾只有一半的空間最後一個元素。
拉伸 - 它會自動更改容器內與自動大小關聯的項目的大小。

除此之外，我們還有 safe 和 unsafe 作為此屬性的值。它們與對齊關鍵字一起使用，並且取決於容器的特性，例如溢出是否會導致資料遺失。根據這些條件，我們選擇是否保持對齊。

範例

下面給出了對齊內容屬性的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #92a4b5;
      }
      #mainDiv {
         background-color: black;
         width: 100%;
         height: 300px;
         display: flex;
         flex-wrap: wrap;
         align-content: stretch;
      }
      #mainDiv div {
         width: 100%;
         height: 40px;
      }
   </style>
</head>
<body>
   <h1>The example of align-content Property</h1>
   <div id="mainDiv">
      <div style="background-color: coral"></div>
      <div style="background-color: lightblue"></div>
      <div style="background-color: pink"></div>
   </div>
</body>
</html>

設定預設值以對齊內容

術語「預設值」實際上可以指屬性的「初始值」。對齊項目的預設值為「拉伸」。

因此，我們可以說「正常」有點像是具有特定意義的特殊關鍵字，但會根據其使用的上下文而變化。因為如果沒有特定的背景，我們就無法定義「正常」會做什麼。

我們可以使用正常作為預設值，無需擔心，因為它要么被視為無效並使用回退值，要么被視為有效並回退到正確的值。

範例

下面給出了將對齊內容的預設值設定為正常的範例程式碼 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .FlexBox {
         width: 40vw;
         height: 54vh;
         border: 5px solid blue;
         display: flex;
         flex-wrap: wrap;
         background-color: rgb(170, 210, 170);
         align-content: normal;
      }
      #BoxItem1,
      #BoxItem2,
      #BoxItem3,
      #BoxItem4 {
         box-sizing: border-box;
         min-height: 20%;
         width: 22%;
         border: 1.5px dashed red;
         margin: 0.5vw;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      #BoxItem1 {
         background-color: rgb(214, 198, 192);
      }
      #BoxItem2 {
         background-color: rgb(198, 198, 49);
      }
      #BoxItem3 {
         background-color: rgb(233, 115, 135);
      }
      #BoxItem4 {
         background-color: rgb(143, 196, 196);
      }
   </style>
</head>
<body>
   <div class="FlexBox">
      <div id="BoxItem1">1</div>
      <div id="BoxItem2">2</div>
      <div id="BoxItem3">3</div>
      <div id="BoxItem4">4</div>
   </div>
</body>

我們可以看到，容器中的所有項目都按照預設值「正常」對齊，即按照 Flexbox 容器的規格進行拉伸。

結論

總而言之，使用 CSS 設定定位內容的預設值是確保整個網站設計一致的簡單而有效的方法。透過將單一值設為預設值，您可以快速調整每個頁面上所有元素的位置，而無需單獨變更每個元素。這使得開發人員和設計師都可以輕鬆創建適合任何主題或主題的一致外觀。您可以稍後根據需要輕鬆調整。

以上是如何設定預設值來對齊 CSS 中的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css 继承 flex

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS @page規則下一篇：CSS @page規則

看更多