企业官网建设流程全解析

网站建设 思维导图,春节彩灯制作公司,模板网站好优化吗,公司管理系统开发前端新手必看#xff1a;精准获取元素宽高的两大神器实战指南前端新手必看#xff1a;精准获取元素宽高的两大神器实战指南揭开盒子模型的神秘面纱#xff1a;别再说“盒子”就只有 width 和 heightwindow.getComputedStyle#xff1a;浏览器里的“终审法官”它到底审了什么…前端新手必看精准获取元素宽高的两大神器实战指南前端新手必看精准获取元素宽高的两大神器实战指南揭开盒子模型的神秘面纱别再说“盒子”就只有 width 和 heightwindow.getComputedStyle浏览器里的“终审法官”它到底审了什么最常用 API 姿势一个完整的“尺子函数”想量哪层量哪层什么时候必须请它出山getBoundingClientRect几何界的“激光测距仪”API 极简但信息量爆炸一个“悬浮提示”实战鼠标在哪提示框就贴哪什么时候非它不可两大神器正面 PK一张表看懂谁量了什么常见作死误区90% 的“宽高不对”都是下面这几种情况1. 把 offsetWidth 当“最终宽度”2. 忽略 display: none3. 量的时候还没渲染4. 高频事件里裸奔组合技样式 几何双剑合璧做“自适应输入框”进阶ResizeObserver——让浏览器主动喊“我变了”收个尾一张思维导图放钱包里前端新手必看精准获取元素宽高的两大神器实战指南“设计师说按钮 44 px测试妹截了个图说 43.98 px我当场裂开。”——某前端新人群真实吐槽别笑这种惨案每天都在上演。为什么你打印出来的width跟 F12 里看到的天差地别为什么一滚动就飘为什么明明写了box-sizing:border-box却还是对不上别急今天咱们就把“元素到底多宽多高”这件事扒个底朝天顺便把两位幕后大佬——getComputedStyle和getBoundingClientRect——请出来手把手教你在不同场景下该抱谁的大腿。读完这篇包你下次再跟设计师对线时能把像素级误差甩回去“哥量的是浏览器渲染后的真·尺寸。”揭开盒子模型的神秘面纱别再说“盒子”就只有 width 和 height先别急着抄家伙写代码。把“盒子”这层窗户纸捅破后面才不会踩坑。.box{width:200px;height:100px;padding:10px;border:5px solid #333;margin:15px;}上面这段 CSS浏览器到底画出了多大一块地画个“洋葱图”你就明白了┌------------------------- margin ------------------------┐ | ┌-------------------- border ---------------┐ | | | ┌------------- padding -----------┐ | | | | | content 200×100 | | | | | | | | | | | └---------------------------------┘ | | | └-------------------------------------------┘ | └---------------------------------------------------------┘content元素真正的“内容区”CSS 里写的width/height只管到这里。padding内边距背景色能铺进来。border边框算在“占地”里但背景色管不到。margin外边距纯粹是和别人保持距离不占自身像素。所以“元素在页面上到底多宽”至少有三种口径content 宽200 pxcontent padding200 10×2 220 pxcontent padding border200 20 10 230 px至于 margin它只是“社交距离”别算进“自身体重”。牢记这张图后面无论用哪把尺子量你都能秒懂“量的到底是哪一层”。window.getComputedStyle浏览器里的“终审法官”它到底审了什么把作者写的样式、浏览器默认样式、继承样式、甚至style和link里那堆选择器全算一遍把em、rem、%、calc()全部算成像素把color: red翻译成color: rgb(255,0,0)甚至把伪元素::before的样式也给你列出来。一句话所有“渲染时真正用到的样式”它都能给你。最常用 API 姿势// 先抓人constboxdocument.querySelector(.box);// 再开庭conststylewindow.getComputedStyle(box);// 拿证据console.log(content width :,style.width);// 200pxconsole.log(padding-left :,style.paddingLeft);// 10pxconsole.log(border-left-width :,style.borderLeftWidth);// 5pxconsole.log(box-sizing :,style.boxSizing);// border-box ?注意返回值带单位是字符串200px而不是数字200做运算记得先parseFloat。一个完整的“尺子函数”想量哪层量哪层/** * 用 getComputedStyle 精确测量元素各层尺寸 * param {Element} el 目标元素 * return {Object} 各层尺寸信息 */functionmeasureByStyle(el){constswindow.getComputedStyle(el);constrect{};// contentrect.contentWidthparseFloat(s.width);rect.contentHeightparseFloat(s.height);// paddingrect.paddingLeftparseFloat(s.paddingLeft);rect.paddingRightparseFloat(s.paddingRight);rect.paddingTopparseFloat(s.paddingTop);rect.paddingBottomparseFloat(s.paddingBottom);// borderrect.borderLeftparseFloat(s.borderLeftWidth);rect.borderRightparseFloat(s.borderRightWidth);rect.borderTopparseFloat(s.borderTopWidth);rect.borderBottomparseFloat(s.borderBottomWidth);// 汇总rect.paddingBoxWidthrect.contentWidthrect.paddingLeftrect.paddingRight;rect.paddingBoxHeightrect.contentHeightrect.paddingToprect.paddingBottom;rect.borderBoxWidthrect.paddingBoxWidthrect.borderLeftrect.borderRight;rect.borderBoxHeightrect.paddingBoxHeightrect.borderToprect.borderBottom;returnrect;}// 调用console.table(measureByStyle(document.querySelector(.box)));什么时候必须请它出山动态主题切换用户点了“暗夜模式”你把--theme-padding变量换了想重新读取“最新”的padding值只能找getComputedStyle。伪元素宽高清点::before画了一个小三角你想知道它到底有多宽getComputedStyle(伪元素)是唯一能拿到渲染后样式的口子。需要忽略滚动位置getBoundingClientRect会随滚动变化而getComputedStyle只关心样式不关心几何位置适合“纯样式”场景。getBoundingClientRect几何界的“激光测距仪”如果说getComputedStyle是“样式终审法官”那getBoundingClientRect就是激光雷达直接告诉你元素在视口的上下左右边界包括padding border 滚动造成的位置变化不受box-sizing影响因为它量的是“真实像素”受transform影响旋转、缩放后给出的就是变形后的边界不受margin影响margin 不是自身像素再次强调。API 极简但信息量爆炸constrectbox.getBoundingClientRect();console.log(rect);/* { x: 106.5, // 左上角距离视口左边 y: 88, width: 230, // 元素在视口里的“占地”宽含 border height: 130, top: 88, right: 336.5, bottom: 218, left: 106.5 } */一个“悬浮提示”实战鼠标在哪提示框就贴哪style.tooltip{position:fixed;background:#222;color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;pointer-events:none;transform:translate(-50%,-120%);/* 居中上浮 */will-change:left,top;/* 告诉浏览器我要频繁动 left/top */}/styledivclassbox鼠标移上来/divdivclasstooltiphidden/divscriptconstboxdocument.querySelector(.box);consttipdocument.querySelector(.tooltip);box.addEventListener(mousemove,throttle(e{// 1. 拿目标元素的几何信息constrectbox.getBoundingClientRect();// 2. 计算鼠标在元素内的相对坐标constxe.clientX-rect.left;constye.clientY-rect.top;// 3. 把提示框扔到视口对应坐标tip.style.lefte.clientXpx;tip.style.tope.clientYpx;tip.hiddenfalse;// 4. 写点内容tip.textContent局部坐标${x.toFixed(1)},${y.toFixed(1)};},16));box.addEventListener(mouseleave,()tip.hiddentrue);// 简易 throttlefunctionthrottle(fn,wait){letlast0;returnfunction(...args){constnowDate.now();if(now-lastwait){lastnow;fn.apply(this,args);}};}/script这段代码里getBoundingClientRect负责实时给出元素在视口的“锚点”再结合e.clientX/e.clientY就能算出鼠标在元素内部的局部坐标。没有它提示框能飘到火星。什么时候非它不可滚动监听侧边栏要不要吸顶先看rect.top是否 ≤ 0。懒加载图片进入视口才加载判断rect.bottom 0 rect.top window.innerHeight。碰撞检测拖拽方块 A 是否跟方块 B 重叠用rectA.left rectB.right rectA.right rectB.left …经典 AABB 算法。悬浮定位鼠标跟随、气泡提示、下拉框对齐——任何“视口绝对坐标”场景都绕不开它。两大神器正面 PK一张表看懂谁量了什么维度getComputedStylegetBoundingClientRect核心任务样式计算结果几何边界是否含 content✅✅是否含 padding✅需手动加✅是否含 border✅需手动加✅是否含 margin❌❌是否受 transform 影响❌只读样式表✅真实视觉边界是否受滚动偏移影响❌✅top/left 随滚动变返回值类型字符串如200px数字如200单位 px性能一次重计算样式一次布局回流高频调用风险中等较高会强制同步布局记住口诀“要样式找 computed要位置找 rect。”常见作死误区90% 的“宽高不对”都是下面这几种情况1. 把offsetWidth当“最终宽度”console.log(box.offsetWidth);// 230offsetWidth确实返回“contentpaddingborder”但它四舍五入取整高清屏下 43.98 给你变成 44它不包含伪元素它受滚动条影响如果元素本身出现滚动条offsetWidth会减去滚动条宽度而getBoundingClientRect依旧给你含滚动条的视觉宽度。→ 精确场景请优先getBoundingClientRect。2. 忽略display: none隐藏元素压根没生成盒模型两种 API 都只会给你 0。调试思路if(style.displaynone){// 先让它出来透口气Object.assign(el.style,{display:block,visibility:hidden,position:absolute});constrectel.getBoundingClientRect();// 量完再塞回去Object.assign(el.style,{display:,visibility:,position:});}3. 量的时候还没渲染刚document.createElement完就急吼吼去量浏览器还没 paint当然全是 0。解决方案丢到下一帧requestAnimationFrame(() measure())或者等样式计算完setTimeout(() measure(), 0)。4. 高频事件里裸奔window.addEventListener(scroll,(){constrecthero.getBoundingClientRect();// 每帧都量凉凉nav.classList.toggle(sticky,rect.top0);});正确姿势防抖 缓存。letcachednull;letrafIdnull;constmeasure(){cachedhero.getBoundingClientRect();nav.classList.toggle(sticky,cached.top0);rafIdnull;};window.addEventListener(scroll,(){if(!rafId)rafIdrequestAnimationFrame(measure);});把“强制同步布局”压到一帧一次性能瞬间从 PPT 回到 60 FPS。组合技样式 几何双剑合璧做“自适应输入框”需求文本框要随内容高度自动撑开但最大高度 200 px超出出现滚动条。思路用getComputedStyle拿到行高、padding用scrollHeight元素内部滚动高度判断内容高度用getBoundingClientRect实时监测是否达到最大视觉高度决定要不要overflow:auto。textareaclassautoTextrows1/textareastyle.autoText{width:300px;padding:8px 10px;line-height:1.5;font-size:14px;resize:none;overflow:hidden;/* 初始隐藏滚动条 */box-sizing:border-box;}/stylescriptconsttadocument.querySelector(.autoText);constMAX_PX200;ta.addEventListener(input,(){// 1. 重置高度让 scrollHeight 收缩到最小ta.style.heightauto;// 2. 拿样式常量conststylewindow.getComputedStyle(ta);constpadTopparseFloat(style.paddingTop);constpadBotparseFloat(style.paddingBottom);constlineHparseFloat(style.lineHeight);// 3. 计算目标高度lettargetHta.scrollHeight;// 4. 用 getBoundingClientRect 判断是否超限ta.style.heighttargetHpx;constrectta.getBoundingClientRect();if(rect.heightMAX_PX){ta.style.heightMAX_PXpx;ta.style.overflowauto;}else{ta.style.overflowhidden;}});/script这段代码里getComputedStyle负责把“行高、padding”这些样式常量读出来getBoundingClientRect负责把“视觉高度”与“200 px 红线”比对两者互补缺谁都不行。进阶ResizeObserver——让浏览器主动喊“我变了”以前为了监听元素尺寸变化只能setInterval轮询或者window.onresize里把全部元素拉出来量一遍性能感人。2018 年起浏览器自带ResizeObserver元素尺寸一变就主动推送彻底解放劳动力。constronewResizeObserver(entries{for(constentryofentries){constcrentry.contentRect;// 注意这里不含 padding borderconsole.log(新 content 尺寸:,cr.width,cr.height);// 如果想含 border可再调一次 getBoundingClientRectconstwithBorderentry.target.getBoundingClientRect();console.log(含 border 尺寸:,withBorder.width,withBorder.height);}});// 监听任意元素ro.observe(document.querySelector(.box));注意contentRect只给content宽高与getBoundingClientRect口径不同回调里可以安全地读取 getBoundingClientRect因为浏览器已经处于布局后阶段不会触发额外回流别忘了unobserve避免内存泄漏。收个尾一张思维导图放钱包里下次再遇到“元素到底多宽”这种灵魂拷问先掏出小抄量样式padding、border、伪元素→getComputedStyle量视觉位置/尺寸含 transform、滚动影响→getBoundingClientRect量内容高度→scrollHeight监听尺寸变化→ResizeObserver高频事件→requestAnimationFrame 缓存把这五张王牌打顺了别说 43.98 px就算 43.984375 px 都能给设计师报出来。到时候你淡淡一句“我用的 getBoundingClientRect设备像素比 1.25小数点后六位都稳。”对面只能回“大佬喝奶茶吗”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进