一、弹性布局的补充性学习1、flex-basis、flex-grow、flex-shrink的典型应用概念flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具尤其适合需要「自适应容器空间」的场景。【典型场景】响应式导航栏导航栏通常包含「Logo、菜单选项、操作按钮」需要在不同屏幕尺寸下自动调整布局- 大屏幕时元素均匀分布充分利用空间- 中等屏幕时菜单选项自动收缩避免换行- 小屏幕时优先保证关键元素如 Logo 和按钮显示次要菜单适当压缩解析1. Logo左侧- flex-basis: 120px → 初始宽度120px- flex-grow: 0 → 不放大保持固定宽度- flex-shrink: 0 → 不缩小保证Logo始终可见2. 菜单中间- flex-basis: 0 → 初始宽度为0不占用固定宽度- flex-grow: 1 → 占据所有剩余空间自动填充- flex-shrink: 1 → 空间不足时允许收缩3. 按钮右侧- flex-basis: 80px → 初始宽度80px- flex-grow: 0 → 不放大- flex-shrink: 0.5 → 允许轻微收缩但收缩比例较小总结使用 flex: 0 0 120px 可以一次性设置三个属性| 元素 | flex-grow | flex-shrink | flex-basis | 效果 ||--------|-----------|-------------|------------|-----------------------------------|| Logo | 0 | 0 | 120px | 固定宽度不变化 || 菜单 | 1 | 1 | 0 | 自动填充剩余空间 || 按钮 | 0 | 0.5 | 80px | 固定宽度允许轻微收缩 |代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleflex-basis、flex-grow、flex-shrink的典型应用/title /head body !-- 响应式导航栏 - 典型应用场景 flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具 尤其适合需要「自适应容器空间」的场景。 【典型场景】响应式导航栏 导航栏通常包含「Logo、菜单选项、操作按钮」需要在不同屏幕尺寸下自动调整布局 - 大屏幕时元素均匀分布充分利用空间 - 中等屏幕时菜单选项自动收缩避免换行 - 小屏幕时优先保证关键元素如 Logo 和按钮显示次要菜单适当压缩 导航栏布局设计思路 1. Logo左侧 - flex-basis: 120px → 初始宽度120px - flex-grow: 0 → 不放大保持固定宽度 - flex-shrink: 0 → 不缩小保证Logo始终可见 2. 菜单中间 - flex-basis: 0 → 初始宽度为0不占用固定宽度 - flex-grow: 1 → 占据所有剩余空间自动填充 - flex-shrink: 1 → 空间不足时允许收缩 3. 按钮右侧 - flex-basis: 80px → 初始宽度80px - flex-grow: 0 → 不放大 - flex-shrink: 0.5 → 允许轻微收缩但收缩比例较小 -- !-- 测试方法运行后在浏览器按F12打开开发者工具 然后调整浏览器窗口宽度观察导航栏的变化 -- !-- 完整导航栏代码 -- div styledisplay: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white; !-- Logo区域 - flex: 0 0 120px 的简写形式 - 固定120px宽度既不放大也不缩小 - 确保品牌标识始终清晰可见 -- div styleflex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;LOGO/div !-- 中间菜单区域 - flex: 1 1 0 的简写形式 - flex-basis: 0 表示初始不占宽度完全依靠 flex-grow 填充剩余空间 - 当屏幕变小时这个区域会优先收缩 -- div styleflex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px; div styledisplay: flex; gap: 15px; span首页/span span产品/span span关于我们/span span联系/span /div /div !-- 右侧按钮区域 - flex: 0 0.5 80px 的简写形式 - flex-shrink: 0.5 表示允许收缩但只承担一半的收缩比例 - 这样在极端情况下按钮会被压缩但不会完全消失 -- div styleflex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;登录/div /div !-- 完整代码解析 总结 使用 flex: 0 0 120px 可以一次性设置三个属性 | 元素 | flex-grow | flex-shrink | flex-basis | 效果 | |--------|-----------|-------------|------------|-----------------------------------| | Logo | 0 | 0 | 120px | 固定宽度不变化 | | 菜单 | 1 | 1 | 0 | 自动填充剩余空间 | | 按钮 | 0 | 0.5 | 80px | 固定宽度允许轻微收缩 | -- /body /html二、经典三列布局在学习此部分的时候建议各位连同前面的定位以及弹性布局一起进行——此三节连贯性极大有许多共通的地方。三列布局大致可以通过四种方式进行实现——1、display 2、position 3、flex 4、flex响应接下来将用这四种方式分别实现该示例图1、display代码!DOCTYPE html html langen head meta charsetUTF-8 !-- 设置视口适配移动端 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局通过display改变元素性质来实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部导航栏样式 */ #navigator { /* 宽度占满整个屏幕 */ width: 100%; /* 导航栏高度 */ height: 30px; /* 背景颜色橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } /* 中间内容区域总容器 */ #content { /* 宽度占满整个屏幕 */ width: 100%; /* 内容区域高度 */ height: 800px; } /* 左侧红色栏 */ #div1 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色红色 */ background-color: red; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 中间绿色栏核心 */ #div2 { /* 重要说明 正常三列总和应为 10% 80% 10% 100% 但是 display: inline-block 元素(行内块元素)之间 默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙 所以必须把宽度从 80% 缩小为 79%腾出空间给这个空白间隙 否则三列总宽度会超出100%导致第三列被挤到下一行 */ width: 79%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色绿色 */ background-color: green; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 右侧蓝色栏 */ #div3 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色蓝色 */ background-color: blue; /* 将块级元素转为行内块元素实现横向并排 */ display: inline-block; } /* 底部页脚样式 */ #footer { /* 宽度占满整个屏幕 */ width: 100%; /* 页脚高度 */ height: 30px; /* 背景颜色橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } /style /head body !-- 顶部导航栏 -- div idnavigator网页导航栏/div !-- 中间三列内容区域 -- div idcontent div iddiv1/div div iddiv2/div div iddiv3/div /div !-- 底部页脚 -- div idfooter网页页脚/div /body /html重要说明正常三列总和应为 10% 80% 10% 100%但是 display: inline-block 元素(行内块元素)之间默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙所以必须把宽度从 80% 缩小为 79%腾出空间给这个空白间隙否则三列总宽度会超出100%导致第三列被挤到下一行2、position代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title经典三列布局position定位实现/title style /* 全局初始化清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } #navigator { width: 100%; height: 30px; background-color: orange; text-align: center; } #content { width: 100%; height: 800px; /* 父容器设置相对定位作为子元素绝对定位的参考基准 */ position: relative; } #div1 { width: 10%; height: 100%; background-color: red; /* 设置绝对定位固定在父容器左侧 */ position: absolute; /* 距离父容器左侧0像素 */ left: 0; /* 距离父容器顶部0像素 */ top: 0; } #div2 { width: 80%; height: 100%; background-color: green; /* 设置绝对定位位于左侧栏右边 */ position: absolute; /* 距离父容器左侧10%刚好在左侧栏后面 */ left: 10%; /* 距离父容器顶部0像素 */ top: 0; } #div3 { width: 10%; height: 100%; background-color: blue; /* 设置绝对定位固定在父容器右侧 */ position: absolute; /* 距离父容器右侧0像素 */ right: 0; /* 距离父容器顶部0像素 */ top: 0; } #footer { width: 100%; height: 30px; background-color: orange; text-align: center; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1/div div iddiv2/div div iddiv3/div /div div idfooter网页页脚/div /body /html3、flex代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFlex实现三列布局/title style /* 全局初始化清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器Flex布局核心 */ #content { width: 100%; min-height: 500px; /* 开启Flex布局 */ display: flex; } /* 左侧栏 */ #div1 { background-color: red; /* 电脑端宽度 */ width: 10%; } /* 中间内容栏 */ #div2 { background-color: green; /* 电脑端宽度 */ width: 80%; } /* 右侧栏 */ #div3 { background-color: blue; /* 电脑端宽度 */ width: 10%; } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1左侧栏/div div iddiv2中间内容/div div iddiv3右侧栏/div /div div idfooter网页页脚/div /body /html4、flex响应代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFlex响应式三列布局/title style /* 全局初始化清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器Flex布局核心 */ #content { width: 100%; min-height: 500px; /* 开启Flex布局 */ display: flex; /* 允许自动换行响应式必备 */ flex-wrap: wrap; } /* 左侧栏 */ #div1 { background-color: red; /* 电脑端宽度 */ width: 10%; } /* 中间内容栏 */ #div2 { background-color: green; /* 电脑端宽度 */ width: 80%; } /* 右侧栏 */ #div3 { background-color: blue; /* 电脑端宽度 */ width: 10%; } /* 响应式区间 */ /* 平板端宽度≤768px不改变顺序左右自动并排 */ media (max-width: 768px) { /* 左侧占一半宽度 */ #div1 { width: 50%; } /* 中间占满整行自动换行 */ #div2 { width: 100%; } /* 右侧占一半宽度自动跟上一行剩余位置 */ #div3 { width: 50%; } } /* 手机端宽度≤480px全部单列 */ media (max-width: 480px) { #div1,#div2,#div3 { width: 100%; } } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /style /head body div idnavigator网页导航栏/div div idcontent div iddiv1左侧栏/div div iddiv2中间内容/div div iddiv3右侧栏/div /div div idfooter网页页脚/div /body /html注意不同设备上呈现的页面都会不同我们在开发的时候也是可以依据实际代码进行预览的就例如以下演示视频对页面进行电脑端和手机端的预览演示预览最后通过实际实验进行练习代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title布局/title style * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } .top-header { width: 100%; height: 120px; background: url(./经典三列布局/top.jpg) no-repeat center; background-size: 100% 100%; position: relative; } .left-logo { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 400px; height: 70px; background: url(./经典三列布局/logo.png) no-repeat; background-size: 100% 100%; } .right-box { position: absolute; top: 50%; left: 800px; transform: translateY(-50%); text-align: center; } .college-name { font-size: 20px; font-weight: bold; color: #000; margin-bottom: 5px; } .motto-img { width: 300px; height: 40px; display: inline-block; background: url(./经典三列布局/logo2.png) no-repeat; background-size: 100% 100%; } .navbar { display: flex; align-items: center; justify-content: space-between; background-color:green; padding: 10px 20px; } .logo { color: #fff; font-size: 18px; font-weight: bold; } .nav-links { display: flex; gap: 25px; } .nav-links a { color: #fff; } .search-box { display: flex; gap: 5px; } .search-box input { padding: 5px; border: none; border-radius: 3px; } .search-box button { padding: 5px 10px; border: none; border-radius: 3px; background: #fff; color: green; cursor: pointer; } .main-wrap { display: flex; } .left-sidebar { width: 180px; background: green; min-height: 400px; color: #fff; padding: 15px; } .container { flex: 1; background: #eee; padding: 20px; min-height: 400px; } .right-sidebar { width: 180px; background:green; min-height: 400px; padding: 15px; } .img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; } .img-item { background: #fff; padding: 10px; text-align: center; } .img-item img { width: 100%; } .contact-form { background: #ffc8d0; padding: 10px; position: fixed; right: 15px; top: 500px; width: 160px; } .contact-form input { width: 100%; margin: 4px 0; padding: 3px; } .contact-form button { width: 100%; padding: 3px; } footer { text-align: center; padding: 10px; border-top: 1px solid #ccc; font-size: 12px; } /style /head body div classtop-header div classleft-logo/div div classright-box div classcollege-name计算机学院/div div classmotto-img/div /div /div nav classnavbar div classlogo网站Logo/div ul classnav-links lia href 首页/a /li lia href#产品/a /li lia href#服务/a /li lia href#关于我们/a /li lia href#联系我们/a /li /ul div classsearch-box input typetext placeholder搜索... button搜索/button /div /nav div classmain-wrap div classleft-sidebar左侧栏目/div div classcontainer h1欢迎来到我们的网站/h1 p这里是一些关于我们的内容。/p div classimg-grid div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div div classimg-itemimg src./经典三列布局/photo2.jpg alt/div /div /div div classright-sidebar div classcontact-form h4联系我们/h4 input typetext placeholder姓名 input typetext placeholder邮箱 button提交/button /div /div /div footer 版权所有 © 2024 广东云浮中医药职业学院计算机学院 /footer /body /html实际效果在实际运用过程中那种方式用起来更顺手就用那种。补充grid-template-columns: repeat(4, 1fr);——把当前容器分成四列每一列宽度完全相等可以通过这个语句更加快速的把中间图片的排布更加均匀整体更美观