如何設定預設值來對齊 CSS 中的內容？-css教學-PHP中文網

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

WBOY

發布： 2023-08-30 09:09:06

轉載

832 人瀏覽過

如何设置默认值来对齐 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 容器的規格進行拉伸。