前端老铁必看：Flex+vh搞定头尾固定中间滚动，拒绝白屏尴尬还能丝-CSDN博客

在这里插入图片描述

前端老铁必看：Flex+vh搞定头尾固定中间滚动，拒绝白屏尴尬还能丝

前端老铁必看：Flex+vh搞定头尾固定中间滚动，拒绝白屏尴尬还能丝滑如德芙

前端老铁必看：Flex+vh搞定头尾固定中间滚动，拒绝白屏尴尬还能丝滑如德芙

别整那些虚头巴脑的开场白，直接说痛点

咱做前端的谁没遇到过这种破事：老板突然冲进工位，拍着桌子说"给我搞个全屏应用，头尾固定，中间能滚，要那种原生APP的感觉"。你一听心里就咯噔一下——这需求听着简单，做起来全是坑。

以前年轻不懂事，上来就是position: absolute一套组合拳。头部top: 0，底部bottom: 0，中间top: 60px; bottom: 60px，看着挺美对吧？结果一换手机屏幕，底部直接飞到屏幕外面去，或者中间内容太少时留一大截空白，丑到想删库跑路。更别提什么刘海屏、折叠屏、横屏竖屏切换，每次测试都能给你整出新花样。

还有那种用height: 100%的写法，从html到body到wrapper层层继承，少设一个就崩给你看。有时候明明写了100%，底部还是 stubborn 地待在屏幕中间，死活不肯下去。你打开F12一看，好家伙，某个祖先元素高度是auto，100%直接变成0，当场血压飙升。

今天不聊虚的，就聊聊怎么用Flex布局加上vh单位，把这种"圣杯布局"给盘得明明白白。这方案写好了，产品经理挑不出毛病，测试妹子夸你细心，连设计师都会来问你"这个效果怎么实现的"。

这俩货到底是啥来头，为啥凑一对这么香

先说说Flex布局。这玩意儿简直就是为了一维排列而生的亲儿子，以前float那一套早该进博物馆了。你想想，以前为了实现垂直居中，什么margin: 0 auto、line-height等于高度、position: absolute加transform: translate(-50%, -50%)，代码写得像天书，维护起来想骂人。Flex出来以后，一个align-items: center搞定，简单粗暴。

Flex的核心思想就是"弹性"。容器说了算，子元素听话。你想让它们横着排还是竖着排，flex-direction一句话。想让某个元素多吃点多占点空间，flex-grow给大点。想让某个元素固定大小别乱动，flex-shrink: 0锁死。这种思维方式特别符合人类直觉，不像float那样反人类。

再说说vh单位。这玩意儿就是视口高度的亲爹，1vh等于视口高度的1%，100vh就是把你浏览器可视区域吃干抹净，一点都不浪费。跟百分比不一样，vh是相对于视口的，不管你在哪个层级，100vh就是屏幕那么高，不用层层继承，不用担心父元素高度不对。

把这俩放一起，就像豆浆配油条，天生一对。Flex负责内部元素的排列和空间分配，vh负责把控整体高度不跑偏。以前那些"高度算不准"的疑难杂症，什么"底部固定但中间要自适应"，什么"全屏布局但内容要滚动"，在这俩面前都是弟弟。

有人可能会说，那用position: fixed不行吗？头部底部fixed定位，中间margin-top和margin-bottom留出空间。行是行，但fixed元素会脱离文档流，有时候z-index管理起来头疼，而且某些情况下会有闪烁问题。Flex方案所有元素都在正常文档流里，只是通过弹性布局来分配空间，更加稳健。

手把手教你捏出这个"头尾定、中间滚"的面团

好了，废话不多说，直接上代码。咱们从头开始，一步一步把这个布局捏出来。

首先是HTML结构，简单清晰，三个部分：头、身、脚。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex+vh圣杯布局</title>
    <style>
        /* 先把浏览器默认的边距清零，这步不能省 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 盒模型设为border-box，省得算宽度时把自己算晕 */
        }
        
        html, body {
            height: 100%; /* 给html和body都设100%，为后面的vh布局打基础 */
            overflow: hidden; /* 禁止body滚动，我们要让中间区域滚动 */
        }
    </style>
</head>
<body>
    <div class="app-wrapper">
        <header class="app-header">
            <h1>我是头部导航</h1>
            <nav>
                <a href="#">首页</a>
                <a href="#">列表</a>
                <a href="#">我的</a>
            </nav>
        </header>
        
        <main class="app-main">
            <!-- 这里放主要内容，要滚动的 -->
            <div class="content-block">
                <h2>内容区块1</h2>
                <p>这里是一些很长的内容...</p>
            </div>
            <div class="content-block">
                <h2>内容区块2</h2>
                <p>这里是另一些很长的内容...</p>
            </div>
            <!-- 更多内容... -->
        </main>
        
        <footer class="app-footer">
            <button class="action-btn">立即参与</button>
            <p>© 2024 版权所有</p>
        </footer>
    </div>
</body>
</html>

注意看，我在html, body上加了overflow: hidden，这是关键。我们要禁止整个页面的滚动，只让中间区域滚动，这样才能实现"头尾固定"的效果。

接下来是CSS的核心部分，Flex布局上场：

/* 外层大盒子，这是地基，歪了后面全塌 */
.app-wrapper {
    display: flex;
    flex-direction: column; /* 垂直排列：头、身、脚从上到下 */
    height: 100vh; /* 吃满整个视口高度，一寸都不浪费 */
    width: 100%;
}

/* 头部这个"顽固分子"，给我老实待着 */
.app-header {
    flex-grow: 0;      /* 别膨胀，别想着多吃空间 */
    flex-shrink: 0;    /* 也别被压缩，高度就固定这么多 */
    height: 60px;      /* 固定高度，根据设计稿调整 */
    background: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 加点阴影，有层次感 */
}

/* 底部同理，也是"顽固分子" */
.app-footer {
    flex-grow: 0;
    flex-shrink: 0;
    height: 80px;      /* 底部一般比头部高点，放按钮什么的 */
    background: #34495e;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* 中间内容区才是主角，贪吃蛇模式启动 */
.app-main {
    flex-grow: 1;      /* 关键！把剩余空间全吃了 */
    flex-shrink: 1;    /* 空间不够时可以压缩 */
    overflow-y: auto;  /* 关键！内容多了就滚动，少了就撑满 */
    background: #f5f5f5;
    padding: 20px;
    
    /* iOS上滚动更丝滑的秘密武器 */
    -webkit-overflow-scrolling: touch;
}

/* 内容样式，让页面看起来不那么寒酸 */
.content-block {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.content-block h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 18px;
}

.content-block p {
    color: #666;
    line-height: 1.6;
    font-size: 14px;
}

.action-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.3s;
}

.action-btn:hover {
    background: #c0392b;
}

看明白了吗？核心就三点：

外层display: flex; flex-direction: column：这是地基，让三个子元素垂直排列。
头尾flex-grow: 0; flex-shrink: 0：告诉它们别乱动，高度固定。
中间flex-grow: 1; overflow-y: auto：让中间吃掉所有剩余空间，内容多了自动出滚动条。

这里有个细节要注意：flex-grow: 1和height: 100%是完全不同的概念。flex-grow: 1是说"我要把父元素剩下的空间都吃掉"，而height: 100%是说"我要和父元素一样高"。如果父元素有其他子元素，100%可能会导致溢出。Flex-grow更智能，会自动计算剩余空间。

再说说-webkit-overflow-scrolling: touch这个属性。这是iOS上的黑科技，加了以后滚动会有惯性效果，手指滑起来很Q弹。不加的话，iOS上的滚动会感觉很生涩，像在搓砂纸。安卓上一般不需要，但加上也没坏处。

这方案看着挺美，实际上坑也不少，咱得提前避雷

别高兴得太早，这方案在真机上跑起来，坑比你想的多。我踩过的雷，给你一个个数清楚。

坑一：移动端地址栏的心机

移动端浏览器（特别是Chrome和Safari）的地址栏是个心机boy。你往下滑，地址栏缩回去，视口高度变大了；你往上滑，地址栏又冒出来，视口高度变小。但vh是在页面加载时计算的，不会实时跟着变。

这就导致一个奇葩现象：页面刚加载时地址栏还在，100vh算的是"地址栏+可视区域"的高度。然后用户往下滑，地址栏缩了，理论上可视区域变大了，但你的布局还是按原来的高度算的，底部可能就悬在半空中，或者出现空白。

解决方案：用JavaScript动态计算，或者用window.innerHeight实时获取。

// 动态设置vh单位，解决移动端地址栏问题
function setDynamicVh() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化设置
setDynamicVh();

// 监听resize，但要做防抖，不然性能爆炸
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(setDynamicVh, 100);
});

// 监听orientationchange，横竖屏切换时重新计算
window.addEventListener('orientationchange', () => {
    setTimeout(setDynamicVh, 300); // 给浏览器一点计算时间
});

然后CSS里这样用：

.app-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100); /* 用CSS变量，不支持的话回退到1vh */
    width: 100%;
}

坑二：iOS Safari的抽风时刻

iOS Safari有时候对vh的支持有点神经质，特别是横屏竖屏切换的时候。你可能发现切换后布局错位，或者底部被切掉一块。

解决方案：横竖屏切换时强制重绘，或者用最简单粗暴的方法——给body加个class再移除，触发重排。

window.addEventListener('orientationchange', () => {
    document.body.style.display = 'none';
    setTimeout(() => {
        document.body.style.display = '';
    }, 10);
});

这招虽然土，但管用。原理是强制浏览器重新计算布局。

坑三：内容太少时的尴尬

如果中间内容太少，有些奇葩浏览器可能不会撑开flex容器，导致底部直接贴到头部脸上，场面一度非常尴尬。

解决方案：给中间内容区加min-height，确保它至少有一定高度。

.app-main {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 200px; /* 至少200px，防止内容太少时底部飞天 */
}

或者给wrapper加justify-content: space-between，但这样中间内容少时会分散对齐，可能不是你想要的效果。

坑四：软键盘的降维打击

这是移动端H5最头疼的问题。用户点击输入框，软键盘弹出来，视口高度瞬间变小（在安卓上尤其明显）。如果你的底部有固定按钮，可能被键盘顶上来，挡住输入框；或者输入框本身被键盘挡住，用户看不见自己输入了什么。

解决方案：监听focus和blur事件，键盘弹出时调整布局。

const inputs = document.querySelectorAll('input, textarea');
const footer = document.querySelector('.app-footer');

inputs.forEach(input => {
    input.addEventListener('focus', () => {
        // 键盘弹出，隐藏底部或者调整布局
        footer.style.transform = 'translateY(100%)';
        footer.style.transition = 'transform 0.3s';
        
        // 确保输入框可见
        setTimeout(() => {
            input.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 300);
    });
    
    input.addEventListener('blur', () => {
        // 键盘收起，底部回来
        footer.style.transform = 'translateY(0)';
    });
});

更好的方案是用visualViewport API（如果浏览器支持），它能给出真正的可视区域大小，不包括软键盘。

if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', () => {
        const height = window.visualViewport.height;
        document.documentElement.style.setProperty('--vv-height', `${height}px`);
    });
}

然后CSS里用--vv-height代替vh。

真刀真枪干项目时，这些场景你得心里有数

理论讲完了，说说实际项目中哪些地方会用到这种布局。别学完不知道用在哪，那就白瞎了。

场景一：后台管理系统

最常见的就是后台管理系统。顶部导航栏放logo和用户头像，左侧菜单（哦不对，今天讲的是上下结构，那就改成顶部tab），底部版权信息，中间表格数据随便滚。

这种场景下，表格可能很长，需要横向滚动和纵向滚动。这时候要注意，如果表格太宽，可能会出现横向滚动条，这时候overflow-x: auto要加在正确的元素上。

.table-wrapper {
    overflow-x: auto; /* 表格横向滚动 */
    overflow-y: hidden;
    flex-grow: 1; /* 在app-main里 */
}

.data-table {
    min-width: 1200px; /* 表格最小宽度，太小的话挤在一起不好看 */
    width: 100%;
}

场景二：移动端H5活动页

上面是活动Header，下面是"立即参与"大按钮，中间规则文本长得要命，必须得滚。这种页面转化率高，老板喜欢做。

但要注意，底部按钮如果是"立即购买"这种，要考虑安全区域。iPhone X以后有刘海和底部横条，按钮太贴边会被横条挡住，或者用户误触横条。

.app-footer {
    padding-bottom: env(safe-area-inset-bottom); /* iOS安全区域 */
    height: calc(80px + env(safe-area-inset-bottom));
}

场景三：聊天界面

聊天界面也是这个套路的变体。头顶好友信息和返回按钮，脚下输入框和发送按钮，中间聊天记录漫天飞，体验必须丝滑。

聊天界面有个特殊需求：新消息来了要自动滚到底部。这时候要用JavaScript控制滚动。

const chatContainer = document.querySelector('.chat-container');

function scrollToBottom() {
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

// 新消息来时
function addMessage(msg) {
    const msgDiv = document.createElement('div');
    msgDiv.className = 'message';
    msgDiv.textContent = msg;
    chatContainer.appendChild(msgDiv);
    scrollToBottom();
}

// 用户手动往上翻历史记录时，不要自动滚动，这个细节很重要
let userScrolling = false;
chatContainer.addEventListener('scroll', () => {
    const isAtBottom = chatContainer.scrollTop + chatContainer.clientHeight >= chatContainer.scrollHeight - 10;
    userScrolling = !isAtBottom;
});

场景四：地图应用

上面搜索栏，下面操作按钮，中间地图区域。这种布局对性能要求高，地图渲染很耗资源，如果布局没做好导致重排重绘频繁，地图会卡成PPT。

这时候will-change属性可以派上用场，告诉浏览器哪些元素要变化，提前优化。

.map-container {
    flex-grow: 1;
    will-change: transform; /* 地图经常缩放平移，提前告知浏览器 */
}

遇到页面炸毛了别慌，按这个路子排查能救命

写这种布局，不出问题是不可能的。遇到问题别慌，按这个 checklist 一个个排查，能救你一命。

第一步：看盒模型

打开F12，选中那个不听话的元素，看盒模型（Computed标签页）。是不是哪个祖宗元素带了莫名其妙的margin或者padding，把高度顶出去了？

特别注意body和html的默认margin。很多浏览器默认给body设了8px的margin，你没清零的话，100vh加上8px，不出滚动条才怪。

第二步：检查高度继承链

从目标元素一直往上追溯到html，看每个元素的高度。父元素高度是auto的话，子元素的100%可能就失效了。

Flex布局里，如果父元素flex-direction: column，子元素flex-grow: 1就能填满剩余空间。但如果父元素没设高度，或者父元素的父元素没高度，整个链就断了。

第三步：看min-height搞鬼

有时候你设了height: 100px，但元素实际高度是200px，很可能是有个min-height: 200px在作怪。检查Computed里的min-height，看是不是被其他样式覆盖了。

第四步：检查溢出内容

如果出现了不该出现的滚动条，可能是某个子元素宽度超出了容器。比如一个图片没设max-width: 100%，或者一段英文单词太长没换行。

.app-main {
    overflow-y: auto;
    overflow-x: hidden; /* 禁止横向滚动 */
    word-break: break-all; /* 长单词换行 */
}

.app-main img {
    max-width: 100%; /* 图片别溢出 */
    height: auto;
}

第五步：移动端真机调试

Chrome DevTools的模拟器只能模拟尺寸，模拟不了地址栏的显示隐藏、软键盘的弹出收起。一定要真机测试，iOS和安卓都要测。

如果条件有限，至少用Safari的远程调试（iOS）和Chrome的远程调试（安卓），连上真机看控制台。

第六步：打印布局信息

实在找不到问题，就用JS打印关键信息：

function debugLayout() {
    const wrapper = document.querySelector('.app-wrapper');
    const main = document.querySelector('.app-main');
    const header = document.querySelector('.app-header');
    const footer = document.querySelector('.app-footer');
    
    console.log('=== 布局调试信息 ===');
    console.log('视口高度:', window.innerHeight);
    console.log('wrapper高度:', wrapper.offsetHeight, 'clientHeight:', wrapper.clientHeight);
    console.log('header高度:', header.offsetHeight);
    console.log('footer高度:', footer.offsetHeight);
    console.log('main高度:', main.offsetHeight, 'scrollHeight:', main.scrollHeight);
    console.log('计算:', header.offsetHeight + footer.offsetHeight + main.offsetHeight);
}

// 页面加载后和resize时都打印
window.addEventListener('load', debugLayout);
window.addEventListener('resize', debugLayout);

几个让代码更骚气、维护更省心的独门秘籍

基础方案能跑，但想写得漂亮、维护起来省心，还得学几招独门秘籍。

秘籍一：calc显式计算

虽然Flex能自动算，但有时候显式写出来更安心，特别是头部底部高度不固定时。

:root {
    --header-height: 60px;
    --footer-height: 80px;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    height: var(--header-height);
    flex-shrink: 0;
}

.app-footer {
    height: var(--footer-height);
    flex-shrink: 0;
}

.app-main {
    height: calc(100vh - var(--header-height) - var(--footer-height)); /* 显式计算 */
    overflow-y: auto;
}

这样写的好处是清晰，一眼就能看出中间区域高度怎么算的。而且如果头部高度要动态变化（比如滚动时收缩），改CSS变量就行。

秘籍二：CSS变量管理主题

把颜色、间距、高度都抽成CSS变量，维护起来爽歪歪。

:root {
    /* 颜色 */
    --color-primary: #2c3e50;
    --color-secondary: #34495e;
    --color-accent: #e74c3c;
    --color-bg: #f5f5f5;
    --color-text: #333;
    --color-text-light: #666;
    
    /* 尺寸 */
    --header-height: 60px;
    --footer-height: 80px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
}

/* 使用变量 */
.app-header {
    height: var(--header-height);
    background: var(--color-primary);
    padding: 0 var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

以后要改主题色，改一处就行，不用满世界找颜色值。

秘籍三：滚动条美化

默认滚动条太丑，特别是Windows上，又宽又灰。可以自定义一下，提升逼格。

/* Webkit浏览器（Chrome、Safari、新版Edge） */
.app-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.app-main::-webkit-scrollbar-track {
    background: transparent;
}

.app-main::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.app-main::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Firefox */
.app-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

注意，自定义滚动条在iOS上不支持，但iOS的默认滚动条本来就挺好看的，问题不大。

秘籍四：响应式断点

这种布局在移动端和桌面端表现可能不一样，需要响应式调整。

/* 移动端默认 */
.app-header {
    height: 50px;
    font-size: 14px;
}

/* 平板 */
@media (min-width: 768px) {
    .app-header {
        height: 60px;
        font-size: 16px;
    }
    
    .app-main {
        padding: 30px;
    }
}

/* 桌面端 */
@media (min-width: 1024px) {
    .app-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1); /* 大屏居中，加点阴影有质感 */
    }
}

秘籍五：Container Queries（未来方向）

虽然Flex能搞定这种布局，但CSS新特性Container Queries也可以关注下。它是根据容器大小而不是视口大小来应用样式，更适合组件化开发。

/* 给wrapper定义一个容器 */
.app-wrapper {
    container-type: size;
    container-name: layout;
}

/* 根据容器高度而不是视口高度调整 */
@container layout (height < 500px) {
    .app-header {
        height: 40px; /* 屏幕太矮时头部缩小 */
    }
    
    .app-footer {
        height: 60px;
    }
}

目前浏览器支持度还不错，可以渐进增强使用。

秘籍六：性能优化

如果中间内容非常多（比如长列表），直接渲染所有DOM可能会卡。这时候要虚拟滚动（Virtual Scrolling），只渲染可视区域内的元素。

可以用第三方库如react-window（React）或vue-virtual-scroller（Vue），也可以自己实现个简单的：

// 简单的虚拟滚动实现思路
const container = document.querySelector('.app-main');
const itemHeight = 50; // 每个列表项高度
const totalItems = 10000; // 总数据量
const visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2; // 可视区域+缓冲

// 只创建可见的DOM元素
function renderVisibleItems(scrollTop) {
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(startIndex + visibleCount, totalItems);
    
    // 清空当前内容
    container.innerHTML = '';
    
    // 创建一个占位元素撑开高度
    const spacer = document.createElement('div');
    spacer.style.height = `${totalItems * itemHeight}px`;
    container.appendChild(spacer);
    
    // 渲染可见项
    for (let i = startIndex; i < endIndex; i++) {
        const item = document.createElement('div');
        item.style.position = 'absolute';
        item.style.top = `${i * itemHeight}px`;
        item.style.height = `${itemHeight}px`;
        item.textContent = `Item ${i}`;
        container.appendChild(item);
    }
}

container.addEventListener('scroll', (e) => {
    renderVisibleItems(e.target.scrollTop);
});

最后唠叨两句，别指望复制粘贴就能走遍天下

代码是死的，浏览器是活的。尤其是国内那些魔改的安卓WebView，什么微信内置浏览器、支付宝内置浏览器、各种国产手机的自带浏览器，能把你气出内伤。同样的代码，在Chrome里跑得好好的，到了微信里就崩，这种事儿太常见了。

所以，别光盯着Chrome看。有空去真机群里吼一声，让拿各种奇葩手机的测试兄弟帮你点点。iPhone 6这种老古董、华为Mate系列的奇葩屏幕比例、小米的MIUI浏览器、OV家的ColorOS，都得测。不然上线就是事故现场，老板凌晨三点给你打电话。

还有，别忽视用户体验细节。滚动是否跟手？点击是否有反馈？转场是否流畅？这些比代码是否正确更重要。用户不会管你用的Flex还是Grid，他们只关心用着爽不爽。

这套组合拳打好了，你就是组里的"布局小王子"，什么复杂页面都能hold住。打不好也就是个天天修CSS bug的码农，全看你自己造化。

赶紧去试试吧，先在CodePen上撸个demo，然后往项目里迁。翻车了也别怪我没提醒，反正坑我都给你标出来了，再掉进去就是你自己的事了。有问题？自己先Google，Google解决不了再来问我，毕竟程序员的第一课就是学会搜索。

完。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具