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

小结

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

相关推荐
德育处主任几秒前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
安卓开发者14 分钟前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
fdc201736 分钟前
Avalonia 基础导航实现:从页面切换到响应式交互全指南
开发语言·javascript·ecmascript
Sapphire~1 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
小菜花291 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
二十雨辰2 小时前
歌词滚动效果
前端·css
前端小巷子2 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
知识分享小能手2 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
古夕3 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
李李记3 小时前
Node.js 打包踩坑?NCC+PKG 从单文件到多平台可执行文件,解决 axios 缺失等 80% 问题
javascript