資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 CSS 中設定對齊內容的預設值？
CSS 是一種用於網頁的語言，主要用於網頁的設計和呈現。它為我們提供了許多有助於定製過程的屬性。其中一個屬性是“align content 屬性”。
Align content 屬性用於在屬於 flexbox 或網格的專案之間或周圍分配空間。此屬性的初始值為“normal”。它具有離散動畫，計算值始終等於指定的值。
需要注意的是，它不是一個可繼承的屬性。它是一個被大多數瀏覽器廣泛支援的屬性。
可以為此屬性提供的各種值如下所述：
Start - 當您希望內容或專案從容器元素的開頭開始打包時使用。
End - 當您希望內容或專案從容器元素的末尾開始打包時使用。
Center - 用於將子元素打包在對齊容器的中心。
Normal - 是 align content 屬性的預設值。
Flex-start - 用於 flexbox 型別容器，並將沿起始邊緣開始對齊專案。但是，如果我們在不是 flexbox 的容器上使用它們，則將其視為 start。
Flex-end - 就像 flex-start 一樣，它也用於 flexbox 型別容器，並將沿結束邊緣開始對齊專案。但是，如果我們在不是 flexbox 的容器上使用它們，則將其視為 end。
Space-between - 使用此屬性指定的專案將沿容器的交叉軸對齊，並且相鄰元素之間將具有相同的空間。
Space-around - 它的工作原理類似於 space-between，但除此之外，第一個元素的左側和最後一個元素的右側將具有等於兩個相鄰元素之間空間的一半的空間。
Space-evenly - 這僅僅意味著所有元素之間都有相同的空間，不像 space-evenly 那樣，從第一個元素的開頭到最後一個元素的末尾只有半個空間。
Stretch - 它會自動更改容器內與之關聯的自動大小的專案的尺寸。
除此之外，我們還有safe 和unsafe 作為此屬性的值。這些與對齊關鍵字一起使用，並且取決於容器的特性，例如溢位是否會導致資料丟失。根據這些條件，我們選擇是否保留對齊方式。
示例
下面給出了align content 屬性的示例。
<!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>
設定對齊內容的預設值
術語“預設值”實際上可以稱為屬性的“初始值”。align items 的預設值為“stretch”。
因此，我們可以說“normal”有點像具有指定含義的特殊關鍵字，但會根據其使用上下文而變化。因為我們無法在沒有特定上下文的情況下定義“normal”的作用。
我們可以毫無顧慮地使用 normal 作為預設值，因為它要麼被認為無效並使用回退值，要麼被認為有效並回退到正確的值。
示例
下面給出了一個將 align content 的預設值設定為 normal 的程式碼示例：
<!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>
我們可以看到，容器中的所有專案都根據預設值 normal 對齊，根據 flexbox 容器的規範，normal 等於 stretch。
結論
總而言之，使用 CSS 設定內容定位的預設值是確保整個網站設計一致的簡單有效的方法。透過將單個值設定為預設值，您可以快速調整每個頁面上所有元素的位置，而無需單獨更改每個元素。這使開發人員和設計人員都可以輕鬆建立適合任何主題或主題的一致外觀。您可以根據需要輕鬆地稍後調整它。
357 次檢視
