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

编程笔记 html5&css&js 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属性的值。

小结

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

相关推荐
街尾杂货店&23 分钟前
css word属性
前端·css
aesthetician4 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
demi_meng7 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20168 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
EndingCoder10 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
我胡为喜呀10 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
liangshanbo121512 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied13 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果13 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol14 小时前
类与对象(中)笔记整理
java·javascript·笔记