新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧盒模型到底是个啥——浏览器眼里的每个元素都是个快递盒子content、padding、border、margin 四兄弟谁才是亲生的标准盒模型 vs 怪异盒模型不是bug是featurebox-sizing: border-box 为什么成了行业潜规则用开发者工具“扒开”元素看看它到底占多大地方那些年我们踩过的坑明明设了width200px怎么变220了margin合并到底是怎么回事父子元素、兄弟元素都来凑热闹内联元素也有盒模型但它们不听话实战小技巧用outline代替border调试布局不撑大盒子给所有元素统一加 box-sizing: border-box 到底靠不靠谱遇到布局错乱先别骂浏览器检查下是不是盒模型理解错了padding百分比居然跟宽度挂钩这设计谁想出来的移动端适配时盒模型要注意哪些骚操作别再手动算宽高了CSS Grid和Flexbox已经帮你兜底了当设计师说“这个间距再小5像素”你知道改的是谁吗盒模型和BFC的关系有时候清浮动其实是在救盒模型真·土味调试法给每个div加上不同背景色边框肉眼排错你以为你设置了padding其实你触发了滚动条overflow警告盒模型之外还有outline、box-shadow它们算不算“占地”行内替换元素img、input的盒模型行为为啥这么野老项目没用border-box教你一招无痛迁移方案Chrome和Firefox对盒模型的渲染真的完全一致吗慎答别让伪元素偷偷吃掉你的布局空间——它们也遵守盒模型最后唠一句盒模型不是知识点是前端人的生存本能新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧友情提示本文全程嘴碎建议配快乐水服用喝完记得把易拉罐踩扁——环保从程序员做起。盒模型到底是个啥——浏览器眼里的每个元素都是个快递盒子先别翻书书上的图太干净。想象你双十一撸了十箱零食最里面那包辣条叫content商家怕挤坏给裹了一圈充气袋这就是padding再把辣条充气袋一起塞进纸箱纸箱壳是border快递小哥怕丢件又给缠了3圈胶带这胶带就是margin。浏览器就是快递站每个标签都是快递盒子它得先量好“占地”才能决定放哪层货架。量法不同分两种流派标准盒模型W3C盒模型width只量辣条本身。怪异盒模型IE盒模型width把辣条充气袋纸箱壳一起量了胶带margin永远在外部不算。一句话标准盒模型量“内容”怪异盒模型量“可视”。content、padding、border、margin 四兄弟谁才是亲生的严格说content才是浏览器亲闺女剩下仨都是后爹后妈。content元素真正的内容区文本、图片、video都在这蹦迪。padding内容到边框的“内边距”背景色会蔓延进来所以常用来撑开按钮。border真正的边界线占空间可以圆角可以渐变可以贴图。margin最外层的“外边距”透明不继承背景色专门用来推开别人。代码感受下.box{width:200px;height:100px;padding:20px;/* 四边各20px */border:5px solid #ff6600;margin:30px;background:#ffe4b5;}浏览器最后给这个.box批的“宅基地”是宽 200 20×2 5×2 30×2 310px高 100 20×2 5×2 30×2 210px标准盒模型 vs 怪异盒模型不是bug是feature标准盒模型是 W3C 的“政治正确”但 IE 早期≤5.5偏不走寻常路它把width当“可视宽”padding和border算在里头。后来 W3C 为了兼容加了个开关box-sizing。box-sizing: content-box→ 标准模式默认box-sizing: border-box→ 怪异模式IE 模式很多人一听“怪异”就嫌弃其实 border-box 才是当代真香。box-sizing: border-box 为什么成了行业潜规则先抛结论写布局少掉头发。border-box 下width就是“肉眼可见的宽”padding和border往里吃不再额外撑大盒子。/* 全局通杀一劳永逸 */*, *::before, *::after{box-sizing:border-box;}上面三行代码不知拯救了多少前端人的发际线。设计师说“卡片宽 375px”你直接写width: 375px再随便加padding和border都不会爆线。用开发者工具“扒开”元素看看它到底占多大地方F12 → 选中元素 → 右侧“计算”/“Computed”面板最下面那张彩虹图就是盒模型实时透视。蓝色content绿色padding橙色border黄色margin鼠标悬停还能看具体数值比用尺子量屏幕靠谱多了。那些年我们踩过的坑明明设了width200px怎么变220了99% 忘了把box-sizing改 border-box。/* 没改之前 */.card{width:200px;padding:10px;border:1px solid #ccc;}/* 实际占地 200 10×2 1×2 222px横向滚动条突然蹦迪 */改完.card{box-sizing:border-box;width:200px;/* 现在是真的200pxpadding和border往里挤 */padding:10px;border:1px solid #ccc;}margin合并到底是怎么回事父子元素、兄弟元素都来凑热闹margin 合并collapse是 CSS 最玄学的一条兄弟合并上下 margin 取最大而不是相加。父子合并如果父元素没有border/padding/BFC子元素的margin-top会“钻”到父元素外面。代码现场翻车style.dad{background:#f7f7f7;}.son{margin-top:30px;background:#fff;}/styledivclassdaddivclassson儿子/div/div肉眼效果父元素顶部也多了 30px 空白其实是子元素的margin-top逃逸了。破解大法给父元素加padding-top: 1px别问问就是魔法或border-top: 1px solid transparent或overflow: hidden触发 BFC内联元素也有盒模型但它们不听话span、a、em这些行内元素确实有盒模型但width/height无效padding上下有效但不占文档流空间会重叠margin上下直接无效左右才有效所以给行内元素加padding: 20px看着“胖”了其实只是视觉肥文档流兄弟并不会被撑开。实战小技巧用outline代替border调试布局不撑大盒子outline不占地画完就跑调试神器.debug, .debug *{outline:1px solid #f00;}用完一把梭删掉这行代码世界瞬间清净不用担心把布局撑歪。给所有元素统一加 box-sizing: border-box 到底靠不靠谱靠谱但记得别漏掉伪元素*, *::before, *::after{box-sizing:border-box;}有些老库比如高德地图 SDK内部用了content-box全局改会翻车那就局部回滚.amap-container *{box-sizing:content-box;}遇到布局错乱先别骂浏览器检查下是不是盒模型理解错了90% 的“浏览器 bug”都是人 bug。checklist看box-sizing看padding/border有没有额外占地看margin合并看outlinevsborderpadding百分比居然跟宽度挂钩这设计谁想出来的对你没看错padding-top: 50%意思是**“元素宽度的 50%”不是高利用这个特性可以做自适应正方形**.square{width:50%;padding-top:50%;/* width高宽 */background:#333;position:relative;}.square-inner{position:absolute;inset:0;display:grid;place-content:center;color:#fff;}移动端适配时盒模型要注意哪些骚操作border-box必须全局开否则375px宽屏加padding直接溢出。1px 边框问题高清屏border: 1px会被渲染成 2 物理像素用transform: scale(0.5)或box-shadow模拟。避免用margin做“绝对定位”百分比margin参照的是父元素宽在旋转屏时容易抽风。别再手动算宽高了CSS Grid和Flexbox已经帮你兜底了Grid 和 Flex 的子项默认就是 border-box不管你怎么加 padding都不会撑破父容器。.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}.item{padding:20px;border:2px solid #666;/* 宽1fr自动减去gap再往里吃padding、border完全不用算 */}当设计师说“这个间距再小5像素”你知道改的是谁吗先问清是**“视觉边距”还是“盒子边距”**视觉边距 margin盒子边距 padding改margin可能影响兄弟元素改padding只影响内部。直接共享 F12 彩虹图给设计师让 TA 指哪打哪别再“感觉”了。盒模型和BFC的关系有时候清浮动其实是在救盒模型BFCBlock Formatting Context是一块独立渲染区内部元素不会对外部布局产生影响。触发方式overflow不为visibledisplay: flow-root最干净float/position: absolute等BFC 能阻止margin合并、包裹浮动元素本质上就是给盒模型加“防火墙”。真·土味调试法给每个div加上不同背景色边框肉眼排错/* 彩虹地狱模式 */div:nth-of-type(5n1){background:#ffaaaa;border:1px solid #ff0000;}div:nth-of-type(5n2){background:#aaffaa;border:1px solid #00ff00;}div:nth-of-type(5n3){background:#aaaaff;border:1px solid #0000ff;}div:nth-of-type(5n4){background:#ffffaa;border:1px solid #ffff00;}div:nth-of-type(5n5){background:#ffaaff;border:1px solid #ff00ff;}肉眼排错虽 low但胜在快适合 Deadline 前 30 分钟。你以为你设置了padding其实你触发了滚动条overflow警告.modal{width:100vw;height:100vh;padding:20px;}100vw已经占满屏幕宽度再加padding直接超屏横向滚动条蹦迪。解决.modal{width:100vw;height:100vh;padding:20px;box-sizing:border-box;/* 救星 */}盒模型之外还有outline、box-shadow它们算不算“占地”outline不占像投影灯画完就跑。box-shadow不占但可扩散很远可能遮住隔壁元素。所以用box-shadow做“边框”时记得留足margin否则会出现“元素没碰影子先打起来”的奇观。行内替换元素img、input的盒模型行为为啥这么野img、input、textarea、select这些“替换元素”虽然是display: inline但可以设width/height默认vertical-align: baseline底部留白导致图片下方出现“幽灵空白”解决img{vertical-align:middle;}/* 或 */img{display:block;}老项目没用border-box教你一招无痛迁移方案别直接全局*改容易炸第三方库。用继承html{box-sizing:border-box;}*, *::before, *::after{box-sizing:inherit;}这样新代码默认 border-box老代码保持 content-box渐进式迁移老板再也不担心线上事故。Chrome和Firefox对盒模型的渲染真的完全一致吗慎答理论上完全一致但表单元素默认样式不同input的padding在两家下默认就不一样。高清屏 1px 边框渲染策略不同肉眼能看 0.5px 差异。结论别抠 1px放过自己放过浏览器。别让伪元素偷偷吃掉你的布局空间——它们也遵守盒模型.ribbon::before{content:hot;padding:4px 8px;margin-right:10px;background:#ff6600;color:#fff;}伪元素默认是行内盒上面代码的padding和margin都会生效但 vertical 方向的margin无效。如果父元素高度突然多了几像素八成是伪元素撑的记得检查。最后唠一句盒模型不是知识点是前端人的生存本能写 CSS 不写盒模型就像吃泡面不加调料包——能吃但味儿不对。把 border-box 写进肌肉记忆把开发者工具彩虹图当健康码每天自查30 分钟真男人30 天不掉发。全文完去喝快乐水压压惊吧。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进
新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧盒模型到底是个啥——浏览器眼里的每个元素都是个快递盒子content、padding、border、margin 四兄弟谁才是亲生的标准盒模型 vs 怪异盒模型不是bug是featurebox-sizing: border-box 为什么成了行业潜规则用开发者工具“扒开”元素看看它到底占多大地方那些年我们踩过的坑明明设了width200px怎么变220了margin合并到底是怎么回事父子元素、兄弟元素都来凑热闹内联元素也有盒模型但它们不听话实战小技巧用outline代替border调试布局不撑大盒子给所有元素统一加 box-sizing: border-box 到底靠不靠谱遇到布局错乱先别骂浏览器检查下是不是盒模型理解错了padding百分比居然跟宽度挂钩这设计谁想出来的移动端适配时盒模型要注意哪些骚操作别再手动算宽高了CSS Grid和Flexbox已经帮你兜底了当设计师说“这个间距再小5像素”你知道改的是谁吗盒模型和BFC的关系有时候清浮动其实是在救盒模型真·土味调试法给每个div加上不同背景色边框肉眼排错你以为你设置了padding其实你触发了滚动条overflow警告盒模型之外还有outline、box-shadow它们算不算“占地”行内替换元素img、input的盒模型行为为啥这么野老项目没用border-box教你一招无痛迁移方案Chrome和Firefox对盒模型的渲染真的完全一致吗慎答别让伪元素偷偷吃掉你的布局空间——它们也遵守盒模型最后唠一句盒模型不是知识点是前端人的生存本能新手前端必看30分钟搞懂CSS盒模型附避坑指南实战技巧友情提示本文全程嘴碎建议配快乐水服用喝完记得把易拉罐踩扁——环保从程序员做起。盒模型到底是个啥——浏览器眼里的每个元素都是个快递盒子先别翻书书上的图太干净。想象你双十一撸了十箱零食最里面那包辣条叫content商家怕挤坏给裹了一圈充气袋这就是padding再把辣条充气袋一起塞进纸箱纸箱壳是border快递小哥怕丢件又给缠了3圈胶带这胶带就是margin。浏览器就是快递站每个标签都是快递盒子它得先量好“占地”才能决定放哪层货架。量法不同分两种流派标准盒模型W3C盒模型width只量辣条本身。怪异盒模型IE盒模型width把辣条充气袋纸箱壳一起量了胶带margin永远在外部不算。一句话标准盒模型量“内容”怪异盒模型量“可视”。content、padding、border、margin 四兄弟谁才是亲生的严格说content才是浏览器亲闺女剩下仨都是后爹后妈。content元素真正的内容区文本、图片、video都在这蹦迪。padding内容到边框的“内边距”背景色会蔓延进来所以常用来撑开按钮。border真正的边界线占空间可以圆角可以渐变可以贴图。margin最外层的“外边距”透明不继承背景色专门用来推开别人。代码感受下.box{width:200px;height:100px;padding:20px;/* 四边各20px */border:5px solid #ff6600;margin:30px;background:#ffe4b5;}浏览器最后给这个.box批的“宅基地”是宽 200 20×2 5×2 30×2 310px高 100 20×2 5×2 30×2 210px标准盒模型 vs 怪异盒模型不是bug是feature标准盒模型是 W3C 的“政治正确”但 IE 早期≤5.5偏不走寻常路它把width当“可视宽”padding和border算在里头。后来 W3C 为了兼容加了个开关box-sizing。box-sizing: content-box→ 标准模式默认box-sizing: border-box→ 怪异模式IE 模式很多人一听“怪异”就嫌弃其实 border-box 才是当代真香。box-sizing: border-box 为什么成了行业潜规则先抛结论写布局少掉头发。border-box 下width就是“肉眼可见的宽”padding和border往里吃不再额外撑大盒子。/* 全局通杀一劳永逸 */*, *::before, *::after{box-sizing:border-box;}上面三行代码不知拯救了多少前端人的发际线。设计师说“卡片宽 375px”你直接写width: 375px再随便加padding和border都不会爆线。用开发者工具“扒开”元素看看它到底占多大地方F12 → 选中元素 → 右侧“计算”/“Computed”面板最下面那张彩虹图就是盒模型实时透视。蓝色content绿色padding橙色border黄色margin鼠标悬停还能看具体数值比用尺子量屏幕靠谱多了。那些年我们踩过的坑明明设了width200px怎么变220了99% 忘了把box-sizing改 border-box。/* 没改之前 */.card{width:200px;padding:10px;border:1px solid #ccc;}/* 实际占地 200 10×2 1×2 222px横向滚动条突然蹦迪 */改完.card{box-sizing:border-box;width:200px;/* 现在是真的200pxpadding和border往里挤 */padding:10px;border:1px solid #ccc;}margin合并到底是怎么回事父子元素、兄弟元素都来凑热闹margin 合并collapse是 CSS 最玄学的一条兄弟合并上下 margin 取最大而不是相加。父子合并如果父元素没有border/padding/BFC子元素的margin-top会“钻”到父元素外面。代码现场翻车style.dad{background:#f7f7f7;}.son{margin-top:30px;background:#fff;}/styledivclassdaddivclassson儿子/div/div肉眼效果父元素顶部也多了 30px 空白其实是子元素的margin-top逃逸了。破解大法给父元素加padding-top: 1px别问问就是魔法或border-top: 1px solid transparent或overflow: hidden触发 BFC内联元素也有盒模型但它们不听话span、a、em这些行内元素确实有盒模型但width/height无效padding上下有效但不占文档流空间会重叠margin上下直接无效左右才有效所以给行内元素加padding: 20px看着“胖”了其实只是视觉肥文档流兄弟并不会被撑开。实战小技巧用outline代替border调试布局不撑大盒子outline不占地画完就跑调试神器.debug, .debug *{outline:1px solid #f00;}用完一把梭删掉这行代码世界瞬间清净不用担心把布局撑歪。给所有元素统一加 box-sizing: border-box 到底靠不靠谱靠谱但记得别漏掉伪元素*, *::before, *::after{box-sizing:border-box;}有些老库比如高德地图 SDK内部用了content-box全局改会翻车那就局部回滚.amap-container *{box-sizing:content-box;}遇到布局错乱先别骂浏览器检查下是不是盒模型理解错了90% 的“浏览器 bug”都是人 bug。checklist看box-sizing看padding/border有没有额外占地看margin合并看outlinevsborderpadding百分比居然跟宽度挂钩这设计谁想出来的对你没看错padding-top: 50%意思是**“元素宽度的 50%”不是高利用这个特性可以做自适应正方形**.square{width:50%;padding-top:50%;/* width高宽 */background:#333;position:relative;}.square-inner{position:absolute;inset:0;display:grid;place-content:center;color:#fff;}移动端适配时盒模型要注意哪些骚操作border-box必须全局开否则375px宽屏加padding直接溢出。1px 边框问题高清屏border: 1px会被渲染成 2 物理像素用transform: scale(0.5)或box-shadow模拟。避免用margin做“绝对定位”百分比margin参照的是父元素宽在旋转屏时容易抽风。别再手动算宽高了CSS Grid和Flexbox已经帮你兜底了Grid 和 Flex 的子项默认就是 border-box不管你怎么加 padding都不会撑破父容器。.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}.item{padding:20px;border:2px solid #666;/* 宽1fr自动减去gap再往里吃padding、border完全不用算 */}当设计师说“这个间距再小5像素”你知道改的是谁吗先问清是**“视觉边距”还是“盒子边距”**视觉边距 margin盒子边距 padding改margin可能影响兄弟元素改padding只影响内部。直接共享 F12 彩虹图给设计师让 TA 指哪打哪别再“感觉”了。盒模型和BFC的关系有时候清浮动其实是在救盒模型BFCBlock Formatting Context是一块独立渲染区内部元素不会对外部布局产生影响。触发方式overflow不为visibledisplay: flow-root最干净float/position: absolute等BFC 能阻止margin合并、包裹浮动元素本质上就是给盒模型加“防火墙”。真·土味调试法给每个div加上不同背景色边框肉眼排错/* 彩虹地狱模式 */div:nth-of-type(5n1){background:#ffaaaa;border:1px solid #ff0000;}div:nth-of-type(5n2){background:#aaffaa;border:1px solid #00ff00;}div:nth-of-type(5n3){background:#aaaaff;border:1px solid #0000ff;}div:nth-of-type(5n4){background:#ffffaa;border:1px solid #ffff00;}div:nth-of-type(5n5){background:#ffaaff;border:1px solid #ff00ff;}肉眼排错虽 low但胜在快适合 Deadline 前 30 分钟。你以为你设置了padding其实你触发了滚动条overflow警告.modal{width:100vw;height:100vh;padding:20px;}100vw已经占满屏幕宽度再加padding直接超屏横向滚动条蹦迪。解决.modal{width:100vw;height:100vh;padding:20px;box-sizing:border-box;/* 救星 */}盒模型之外还有outline、box-shadow它们算不算“占地”outline不占像投影灯画完就跑。box-shadow不占但可扩散很远可能遮住隔壁元素。所以用box-shadow做“边框”时记得留足margin否则会出现“元素没碰影子先打起来”的奇观。行内替换元素img、input的盒模型行为为啥这么野img、input、textarea、select这些“替换元素”虽然是display: inline但可以设width/height默认vertical-align: baseline底部留白导致图片下方出现“幽灵空白”解决img{vertical-align:middle;}/* 或 */img{display:block;}老项目没用border-box教你一招无痛迁移方案别直接全局*改容易炸第三方库。用继承html{box-sizing:border-box;}*, *::before, *::after{box-sizing:inherit;}这样新代码默认 border-box老代码保持 content-box渐进式迁移老板再也不担心线上事故。Chrome和Firefox对盒模型的渲染真的完全一致吗慎答理论上完全一致但表单元素默认样式不同input的padding在两家下默认就不一样。高清屏 1px 边框渲染策略不同肉眼能看 0.5px 差异。结论别抠 1px放过自己放过浏览器。别让伪元素偷偷吃掉你的布局空间——它们也遵守盒模型.ribbon::before{content:hot;padding:4px 8px;margin-right:10px;background:#ff6600;color:#fff;}伪元素默认是行内盒上面代码的padding和margin都会生效但 vertical 方向的margin无效。如果父元素高度突然多了几像素八成是伪元素撑的记得检查。最后唠一句盒模型不是知识点是前端人的生存本能写 CSS 不写盒模型就像吃泡面不加调料包——能吃但味儿不对。把 border-box 写进肌肉记忆把开发者工具彩虹图当健康码每天自查30 分钟真男人30 天不掉发。全文完去喝快乐水压压惊吧。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进
