做的网站怎么发网上手工艺品网站建设的选题背景

做的网站怎么发网上,手工艺品网站建设的选题背景,太原广告传媒有限公司,wordpress 图片调用左侧固定右侧自适应#xff1f;CSS布局高手的实战秘籍#xff08;附避坑指南#xff09;左侧固定右侧自适应#xff1f;CSS布局高手的实战秘籍#xff08;附避坑指南#xff09;引言#xff1a;为什么“左定右满”布局成了前端面试常客CSS 实现这种布局的前世今生#…左侧固定右侧自适应CSS布局高手的实战秘籍附避坑指南左侧固定右侧自适应CSS布局高手的实战秘籍附避坑指南引言为什么“左定右满”布局成了前端面试常客CSS 实现这种布局的前世今生从 table 时代到 Grid-Flexbox 的进化之路浮动 margin老而弥坚的“坦克方案”绝对定位 padding非主流却好用的“旁门左道”Flexbox一句 display:flex 众生平等CSS Grid终极一行代码兼容性速查表IE 能活吗真实项目拆给你看三个场景三种写法场景 1后台管理系统场景 2文档站点场景 3聊天界面常见问题排查手册内容被吃了滚动条打架1. 右侧内容被遮挡 90%2. 左侧抖动/闪一下3. 滚动条错位4. flex 子项被内容撑爆效率提升SCSS 变量 RTL 一键换方向那些年我们踩过的坑血泪合辑结语没有银弹只有最适合的子弹左侧固定右侧自适应CSS布局高手的实战秘籍附避坑指南引言为什么“左定右满”布局成了前端面试常客如果你去面试前端岗位十家有八家会甩给你一张白纸让你手写“左侧固定 200 px右侧自适应”的布局。别笑这题看似简单却像一面照妖镜有人三分钟写完有人半小时还在画格子。面试官想看的不是你背了几种写法而是你在“兼容性、可维护性、可扩展性”三条钢丝上怎么走。今天咱们就把这题拆成七块从老掉牙的 float 到最潮的 grid每一块都给你喂饱代码、喂饱注释还顺手把坑标红。看完还不懂你来打我——我住 302门口有只橘猫。CSS 实现这种布局的前世今生从 table 时代到 Grid-Flexbox 的进化之路2003 年我还在用 Dreamweaver 画表格想实现“左定右满”得先拉一个table width100%左边td width200右边td width*。代码写出来像牛皮癣改一次布局吐一次血。后来出现了 float大家发现“咦这玩意能漂”——于是float:left margin-right成了第一代“民间标准”。再后来absolute 党崛起“爹相子绝”一时风头无两可一旦窗口缩放absolute 就像喝醉了到处乱撞。2012 年Flexbox 降临一句display:flex让众生普度再往后Grid 带着“二维布局”的大杀器把“左定右满”砍成了一行代码。故事讲完代码上场咱们按时间线撸一遍让你知道每一种写法为什么诞生又为什么被拍在沙滩上。浮动 margin老而弥坚的“坦克方案”兼容性IE6关键词float、BFC、清除浮动!-- 骨架一个爸爸俩儿子 --divclasstank-wrapper!-- 左侧导航固定 200pxfloat 向左 --asideclasstank-left左侧导航/aside!-- 右侧主内容流式自适应 --mainclasstank-main右侧主内容/main/div/* 1. 父级清浮动防止高度塌陷 */.tank-wrapper{overflow:hidden;/* 触发 BFC清浮动最简洁写法 */}/* 2. 左侧固定宽度float 靠左 */.tank-left{float:left;width:200px;background:#2c3e50;color:#fff;padding:20px;box-sizing:border-box;/* 把 padding 吃进去别撑破肚 */}/* 3. 右侧创建 BFC避开 float 区域 */.tank-main{margin-left:200px;/* 关键让出左边 200px */background:#ecf0f1;padding:20px;min-height:100vh;/* 撑个屏好看 */}亮点overflow:hidden清浮动不写额外标签。margin-left正好等于左侧宽度原理简单到外婆都能懂。坑左侧如果加border或padding一定记得box-sizing:border-box否则宽度 200 会鼓包。右侧内容过高时部分旧版浏览器IE7-会出现“3px 间隙 bug”解决方案是给右侧也加float:left width:auto但会牺牲流动性慎用。绝对定位 padding非主流却好用的“旁门左道”兼容性IE7关键词position、padding、scrolldivclassabs-wrapperasideclassabs-left左栏/asidemainclassabs-main右栏/main/div.abs-wrapper{position:relative;/* 爹相 */padding-left:200px;/* 提前把左边空地留好 */height:100vh;}.abs-left{position:absolute;left:0;top:0;width:200px;height:100%;background:#34495e;color:#fff;overflow-y:auto;/* 左侧太长自己滚 */}.abs-main{height:100%;overflow-y:auto;/* 右侧太长自己滚 */background:#fff;padding:20px;}使用场景后台管理系统左侧菜单树可能高达几千行用 absolute 把它“拎”出来主内容区滚动互不干扰。坑父级必须position:relative否则左栏会去找body认爹。如果左侧有折叠动画width 从 200→0记得同步改padding-left否则主内容区“塌方”。Flexbox一句 display:flex 众生平等兼容性IE11部分属性 IE10 也支持关键词flex、flex-shrink、min-widthdivclassflex-wrappernavclassflex-nav左栏 200px/navmainclassflex-main右栏剩余/main/div.flex-wrapper{display:flex;/* 魔法咒语 */height:100vh;}.flex-nav{flex:0 0 200px;/* 不伸不缩固定 200 */background:#1abc9c;color:#fff;padding:15px;}.flex-main{flex:1;/* 占满剩余 */min-width:0;/* 关键防止子元素过宽撑破布局 */background:#f5f7fa;padding:20px;overflow:auto;}亮点flex:1等价于flex:1 1 0%剩余空间全吃。min-width:0是“弹性子项”默认不能收缩的克星尤其在里层再套 table 或white-space:nowrap时必加。坑旧版安卓 4.3 下flex:1要写全写-webkit-box-flex:1做兼容 autoprefixer 可以帮你但别完全裸奔。左侧如果做“拖拽改宽”记得把flex-basis同步到行内样式否则 React 下一次 setState 会把你拖拽结果覆盖掉。CSS Grid终极一行代码兼容性Edge16、Chrome57、Safari10.1关键词grid、fr、gapdivclassgrid-wrapperasideclassgrid-left左栏/asidemainclassgrid-main右栏/main/div.grid-wrapper{display:grid;grid-template-columns:200px 1fr;/* 一行定乾坤 */gap:0;/* 想去掉间隙就 0 */height:100vh;}.grid-left{background:#9b59b6;color:#fff;padding:20px;}.grid-main{background:#fdf6f0;padding:20px;overflow:auto;}骚操作响应式再来一行媒体查询media(max-width:768px){.grid-wrapper{grid-template-columns:1fr;/* 小屏堆叠 */}.grid-left{display:none;/* 或者变成抽屉 */}}坑grid-gap在旧语法里叫grid-column-gap老项目如果用的是 2016 年语法注意对齐。Grid 子项默认min-width:auto一样会导致溢出记得加min-width:0。兼容性速查表IE 能活吗方案IE6IE7IE8IE9IE10IE11Edge12安卓 4.3iOS 7floatmargin✅✅✅✅✅✅✅✅✅absolute❌✅✅✅✅✅✅✅✅flexbox❌❌❌❌⚠️✅✅⚠️✅grid❌❌❌❌❌❌✅✅✅⚠️ 代表需要旧语法前缀或部分属性缺失。结论要陪客户玩 IE9——float 是你亲哥只要到 IE11——flex 能扛大旗敢拍桌子说“老子只支持现代浏览器”——grid 让你爽到飞起。真实项目拆给你看三个场景三种写法场景 1后台管理系统需求左侧菜单 220 px可折叠右侧多页签带缓存 keep-alive。技术栈Vue3 ElementPlus。选型flex。理由菜单宽度会动态变flex-basis 可以响应式绑定变量折叠动画丝滑。/* 变量化一键改宽 */ $sideWidth: 220px; .app-wrapper{ display:flex; } .app-sidebar{ flex:0 0 $sideWidth; transition:flex-basis .3s; .collapse{ flex-basis:64px; /* 折叠后只留图标 */ } } .app-main{ flex:1; min-width:0; }场景 2文档站点需求左侧 TOC 树滚动到当前标题高亮右侧 Markdown 渲染。技术栈VitePress。选型grid。理由文档站不用管 IEgrid 模板可读性最高再配position:sticky做目录钉在屏幕代码最少。.layout{display:grid;grid-template-columns:240pxminmax(0,1fr);grid-template-rows:60px 1fr;grid-template-areas:header headersidebar content;}场景 3聊天界面需求左侧会话列表右侧消息气泡移动端要变成底部 Tab。技术栈React MUI。选型flex 媒体查询。理由聊天列表可能动态增删flex 子项自带等分能力再配react-window做虚拟滚动性能不怵。const ChatLayout styled(Box)({ display:flex, height:100vh, media (max-width:600px):{ flexDirection:column } });常见问题排查手册内容被吃了滚动条打架1. 右侧内容被遮挡 90%十有八九是左侧用了float但右侧没触发 BFC。检查右侧有没有overflow:hidden或display:flow-root。急救直接给右侧加overflow:auto先止血。2. 左侧抖动/闪一下折叠动画时左侧从 200px→0px如果用的是width而不是flex-basis浏览器每帧都要重排。改动画属性换成flex-basis或者加will-change:flex-basis。3. 滚动条错位Grid 或 Flex 容器设了height:100vh但子项里又有一个height:100%的表格结果 Windows 下出现双滚动条。解给子项加overflow:auto让滚动条长在子项身上别往body上冒。4. flex 子项被内容撑爆现象里层放了一个pre代码块页面横向滚出月球。解给 flex 子项加min-width:0再给pre加overflow-x:auto; white-space:pre-wrap。效率提升SCSS 变量 RTL 一键换方向/* 定义变量 */ $sidebar-width: 200px; $is-rtl: false; // 一键切 RTL mixin left-fixed-right-fluid($width:$sidebar-width, $rtl:$is-rtl){ display:flex; if $rtl{ flex-direction:row-reverse; } .sidebar{ flex:0 0 $width; } .main{ flex:1; min-width:0; } } .app{ include left-fixed-right-fluid; }把$is-rtl改成true重新编译整个布局瞬间镜像阿拉伯客户喜笑颜开。那些年我们踩过的坑血泪合辑忘记清浮动结果父级高度 0背景色失踪测试小姐姐把 bug 图甩群里你只想原地蒸发。解上面坦克方案已讲用overflow:hidden最省事。flex 子项默认不收缩现象右边放了个大表格直接把左侧挤成 0。解给弹性子项加min-width:0背下来面试也会考。Grid 间隙导致宽度计算偏差你写了grid-template-columns:200px 1fr却顺手加gap:20px结果右侧实际可用宽度少了 20px设计稿对齐失败。解要么把 gap 算进设计稿要么用calc(200px 20px)做第一列。折叠动画同时改 width 和 transform想加炫酷“旋转箭头”结果动画帧率掉到 30fps。解只改flex-basis箭头用transform:rotate(90deg)硬件加速别去动width。移动端忘记关弹性滚动iOS 下 over-scroll 把页面整体上下弹领导说“像山寨 App”。解html,body{height:100%;overflow:hidden}滚动只发生在内容区。结语没有银弹只有最适合的子弹从 table 到 grid二十年前写三列布局要嵌套九个 td今天一行grid-template-columns就能解决。但别急着炫技——客户要兼容 IE11你就老老实实 flex老项目 2012 年的代码float 堆成山也别硬上 grid。把今天这五种方案、十几段完整代码、几十条注释收进书签下次面试官再让你“左定右满”你可以先反问“IE 需求到几要不要折叠动画要不要 RTL”对方一愣你就赢了。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进