编程笔记 html5&css&js 039 CSS背景示例

明月看潮生2024-01-20 0:09

编程笔记 html5&css&js 039 CSS背景示例

一、html
二、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属性的值。

小结

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