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 中的内容？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何设置默认值来对齐 CSS 中的内容？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
