当前位置：首页 > news >正文

css3基于伸缩盒模型生成一个小案例

news 来源：原创 2025/5/14 6:40:12

css3基于伸缩模型生成一个小案例

在前面学习了尚硅谷天禹老师的css3内容后，基于伸缩盒模型做的一个小案例，里面使用了 flex 布局，以及主轴切换，以及主轴平分等特性，分为使用css3 伸缩盒模型方式，已经传统的 margin 等实现的两种方式；

效果预览

在这里插入图片描述

原型分析

重置样式:
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }a { text-decoration: none; }ul { list-style: none; }
背景:铺满全屏
头部:
高度 70pX
背景色 rgba(0,0,0,0.7)
左右各种 20px内边距
导航文字:白色文字、1px白色边框、圆角8px、内边距10px、间距20px中间大导航:宽:1000px高300px在内容区水平垂直居中大导航里的每一个导航项宽:180px高度:200px五个大导航，颜色分别为:#595CA8;#FF9D2E;#01A6DE;#015E91;#1DC128;#01A6DE;

结构拆分详解

我们将页面整个元素分为上中结构。

上方（导航头）
设置高度为 70px，里面包含了一个左右的布局，我们需要将容器里面的两个元素左右排列，这个时候我们就需要将整个header 开启伸缩容器，然后设置为主轴对齐方式，左右两边顶到边上，利用justify-content: space-between;
- 侧轴，水平居中，我们只有一行 align-items: center;
中间部分（内容区）
我们需要让中间容器铺满整个视口，中间的导航栏居中对齐；
- 设置外层视口高度（100vh - 70px ) ，将外层变为伸缩容器
- 里面伸缩项目设置 margin:auto 这个时候就水平，垂直对齐了

css3新特性实现

<title>14.案例(方案1)</title><style>* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }a { text-decoration: none; }ul { list-style: none; }body {background-image: url('./images-v1/bg.jpg');background-repeat: no-repeat;}/* 头部 */.page-header {height: 70px;background-color: rgba(0,0,0,0.7);padding: 20px;display: flex;justify-content: space-between;align-items: center;}.page-header ul {display: flex;}.page-header ul li {color: white;border: 1px solid white;border-radius: 8px;padding: 10px;margin-right: 20px;}.page-header ul li a {color: white;}.page-header ul li:last-child {margin-right: 0;}/* 中间部分 */.container {height: calc(100vh - 70px);display: flex;}.content-nav {width: 1000px;height: 300px;margin: auto;display: flex;justify-content: space-evenly;align-items: center;}.content-nav li {width: 180px;height: 200px;display: flex;flex-direction: column;justify-content: space-around;align-items: center;cursor: pointer;transition: 0.2s linear;}.content-nav li:hover {box-shadow: 0 0 20px black;}.content-nav li span {font-size: 20px;color: white;}.content-nav li:nth-child(1) {background-color: #595CA8;}.content-nav li:nth-child(2) {background-color: #FF9D2E;}.content-nav li:nth-child(3) {background-color: #01A6DE;}.content-nav li:nth-child(4) {background-color: #015E91;}.content-nav li:nth-child(5) {background-color: #1DC128;}.content-nav li:nth-child(6) {background-color: #01A6DE;}</style>
</head>
<body><!-- 头部 --><header class="page-header"><a href="#"><img src="./images-v1/logo.png" alt="logo"></a><ul><li><a href="#">国内校区</a></li><li><a href="#">美国校区</a></li><li><a href="#">加拿大校区</a></li><li><a href="#">英国校区</a></li><li><a href="#">日本校区</a></li></ul></header><!-- 中间部分 --><div class="container"><ul class="content-nav"><li><img src="./images-v1/item1.png" alt=""><span>我的邮箱</span></li><li><img src="./images-v1/item2.png" alt=""><span>云服务</span></li><li><img src="./images-v1/item3.png" alt=""><span>手机课堂</span></li><li><img src="./images-v1/item4.png" alt=""><span>微信服务</span></li><li><img src="./images-v1/item5.png" alt=""><span>在线客服</span></li></ul></div></body>

css3部分

中间部分使用了一部分css3的新特性，以及使用margin 属性，利用文本居中对齐，所以说我们实现效果是有多种方式，并不是只局限于某一种方案

效果

在这里插入图片描述

代码

 <title>14.案例(方案2)</title><style>* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }a { text-decoration: none; }ul { list-style: none; }body {background-image: url('./images-v1/bg.jpg');background-repeat: no-repeat;}/* 头部 */.page-header {height: 70px;background-color: rgba(0,0,0,0.7);padding: 20px;display: flex;justify-content: space-between;align-items: center;}.page-header ul {display: flex;}.page-header ul li {color: white;border: 1px solid white;border-radius: 8px;padding: 10px;margin-right: 20px;}.page-header ul li a {color: white;}.page-header ul li:last-child {margin-right: 0;}/* 中间部分 */.container {height: calc(100vh - 70px);display: flex;}.content-nav {width: 1000px;height: 300px;margin: auto;display: flex;justify-content: space-evenly;align-items: center;}.content-nav li {width: 180px;height: 200px;text-align: center;cursor: pointer;transition: 0.2s linear;}.content-nav li:hover {box-shadow: 0 0 20px black;}.content-nav li img {margin-top: 30px;}.content-nav li span {font-size: 20px;color: white;display: block;margin-top: 20px;}.content-nav li:nth-child(1) {background-color: #595CA8;}.content-nav li:nth-child(2) {background-color: #FF9D2E;}.content-nav li:nth-child(3) {background-color: #01A6DE;}.content-nav li:nth-child(4) {background-color: #015E91;}.content-nav li:nth-child(5) {background-color: #1DC128;}.content-nav li:nth-child(6) {background-color: #01A6DE;}</style>
</head>
<body><!-- 头部 --><header class="page-header"><a href="#"><img src="./images-v1/logo.png" alt="logo"></a><ul><li><a href="#">国内校区</a></li><li><a href="#">美国校区</a></li><li><a href="#">加拿大校区</a></li><li><a href="#">英国校区</a></li><li><a href="#">日本校区</a></li></ul></header><!-- 中间部分 --><div class="container"><ul class="content-nav"><li><img src="./images-v1/item1.png" alt=""><span>我的邮箱</span></li><li><img src="./images-v1/item2.png" alt=""><span>云服务</span></li><li><img src="./images-v1/item3.png" alt=""><span>手机课堂</span></li><li><img src="./images-v1/item4.png" alt=""><span>微信服务</span></li><li><img src="./images-v1/item5.png" alt=""><span>在线客服</span></li></ul></div></body>

注意部分

经测试，部分浏览器不支持主轴对齐均分方式，justify-content: space-evenly; 请使用谷歌浏览器测试，否则不起作用

总结部分

愿我们每个人都能有一份工匠精神，我们应该给代码赋予生命的神圣任务，该简写就绝不多写无用代码，该加注释就写注释；最终希望我们每个人看他人的代码不在痛苦。

最佳实践

‌移动优先‌：优先使用 Flexbox 实现移动端布局，再通过媒体查询扩展桌面端适配
‌渐进增强‌：对不支持 Flexbox 的浏览器（如旧版 IE）提供传统布局兜底方案
‌语义化约束‌：避免过度嵌套 Flex 容器，合理结合 Grid 布局处理二维复杂场

flex布局解决的问题

‌布局灵活性不足‌
传统布局依赖 float、position 和 display 属性组合，难以处理动态内容或未知尺寸元素的排列16。Flexbox 通过主轴和交叉轴的抽象概念，允许容器自动调整子元素的尺寸和位置，实现动态适应能力36。
‌对齐与分布困难‌
传统布局中垂直居中、多元素间距均匀分配等场景需复杂计算，而 Flexbox 仅需通过 justify-content、align-items 等属性即可实现多种对齐模式45。
‌响应式适配低效‌
传统布局需媒体查询频繁调整，而 Flexbox 内置自适应逻辑（如 flex-wrap 换行、flex-grow 比例分配），简化了不同屏幕尺寸的适配流程28。
‌代码冗余与维护成本高‌
Flexbox 通过声明式属性（如 flex-direction 定义方向）替代传统布局的复杂嵌套，减少代码量并提升可维护性