数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
