编程笔记 html5cssjs 039 CSS背景示例

网页上只有三个水平并列大小相同的的DIV，大小为300p*200,如何使用CSS让它们整体水平和垂直都居中，并使用不同的背景色？

一、html

要在网页上实现三个水平并列且大小相同的div元素，每个尺寸为300像素宽和200像素高，整体居中显示且具有不同的背景颜色，你可以通过以下CSS来完成：
假设HTML结构如下：

Html
<div class="container"><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div>
</div>

二、css

相应的CSS样式应为：

Css
/* 确保body或容器父元素填充整个视口 */
body, html {margin: 0;padding: 0;height: 100%;display: flex;justify-content: center;align-items: center;
}.container {/* 设置一个合适的最大宽度，保证在任何分辨率下都能水平居中 */max-width: 900px;display: flex;justify-content: space-between; /* 使盒子之间等距分布 */align-items: center; /* 垂直居中对齐 */width: calc(3 * (300px + gap)); /* 包括div与div之间的间距 */gap: 10px; /* 自定义盒子之间的间距 */
}.box {width: 300px;height: 200px;
}.box1 {background-color: #ff0000; /* 不同的背景色 */
}.box2 {background-color: #00ff00;
}.box3 {background-color: #0000ff;
}

这样，.container会确保内部的.box元素水平居中，同时它们自身也会因为align-items: center;而垂直居中。每个.box子元素都有指定的宽度和高度，并且设置了不同的背景颜色。如果需要调整盒子间的间距，可以修改gap属性的值。

小结

由于多种设计因素交织，必须实际试过才知道哪一种是有效的，还有在软件开发过程，系统的各个因素也是互相交织着的，比如你要高度代码，就涉及到权限，有些权限在操作系统中不是很直观，或者涉及到多个层次，初学者遇到问题要勇于思考、勤于动手、有问题可以到网上查询解决方法，根据需要扩展知识面，如网络、操作系统、安全等方面的知识。