wordpress 禁止访问郴州网站排名优化

wordpress 禁止访问,郴州网站排名优化,dw表格怎么做网站搜索,合肥网站建设公司 推荐前端新手必看#xff1a;精准获取元素宽高不再踩坑#xff08;附实战技巧避雷指南#xff09;前端新手必看#xff1a;精准获取元素宽高不再踩坑#xff08;附实战技巧避雷指南#xff09;引言——为什么你量到的尺寸永远像“薛定谔的猫”先拆盒子——content-box 与 bor…前端新手必看精准获取元素宽高不再踩坑附实战技巧避雷指南前端新手必看精准获取元素宽高不再踩坑附实战技巧避雷指南引言——为什么你量到的尺寸永远像“薛定谔的猫”先拆盒子——content-box 与 border-box 的“宫斗剧”1. 标准盒模型content-box2. IE 异端盒模型border-box3. 滚动条——藏在角落里的“第三者”4. transform——“灵魂出窍”的元凶getComputedStyle——“样式档案室”的馆长1. 它能给你什么2. 单位陷阱——“em、%、auto”三连坑3. 别拿它做“实时量尺”getBoundingClientRect——“像素级卷尺”1. 基本用法2. transform 的“灵异事件”3. 高清屏的“小数点”性能修罗场——重排与强制同步布局1. 什么是强制同步布局FSL2. 批量读写避免 FSL3. requestAnimationFrame 防抖实战场景一动态弹窗——“内容多高我就多高”实战场景二瀑布流——“卡片高度各不同我要一一记录”实战场景三懒加载 IntersectionObserver——“露头再加载”踩坑实录——“我遇到鬼了”1. getComputedStyle 返回 auto怎么办2. 页面缩放zoom导致 getBoundingClientRect 失真3. display:none 时两个 API 都“失明”高手私藏——一行代码搞定所有边界ResizeObserver——“尺寸变了我第一时间告诉你”SSR 与 JSDOM——“后端也想量尺寸”结语——“像素级掌控”不是梦前端新手必看精准获取元素宽高不再踩坑附实战技巧避雷指南“哥我明明写了height: 100px控制台里却死活拿不到 100”“别急你看到的只是 CSS 的‘嘴炮’浏览器真正画出来的才是‘肉身’。”引言——为什么你量到的尺寸永远像“薛定谔的猫”几乎每个前端都在某个深夜被“元素尺寸”狠狠坑过弹窗位置永远偏半像素、瀑布流卡片忽高忽低、懒加载图片刚露头就闪退……你打开 DevTools对着offsetWidth和clientHeight两眼发直——它们像渣男嘴上说爱你实际给的根本不是你想要的。罪魁祸首并不是你而是浏览器盒模型这一“暗箱”。CSS 里写下的width: 200px可能只是 content-box 里的“理想国”真正占位的还要加上 padding、border甚至滚动条、transform、zoom 这些“隐形刺客”。于是读尺寸这件事成了一场“盲人摸象”。今天我们就把大象牵出来从头到尾摸一遍先拆盒模型再聊两个最常用却最容易误用的 API——getComputedStyle与getBoundingClientRect接着用一堆“血泪案例”告诉你什么时候该用谁、怎么组合、如何不掉坑最后送上“老司机工具包”让你一行代码就能拿到“像素级”精准数据。准备好咖啡咱们开摸——哦不开讲。先拆盒子——content-box 与 border-box 的“宫斗剧”1. 标准盒模型content-box.box{width:200px;padding:10px;border:5px solid;}在 content-box 模式下width只负责 content 区域。所以真实占位 200 10×2 5×2 230 px。很多新同学直接读el.style.width一看 200就天真地以为这就是“全部”结果布局一跑就崩。2. IE 异端盒模型border-box.box{box-sizing:border-box;width:200px;padding:10px;border:5px solid;}此时width已经包含了 padding bordercontent 区域被压缩成 200 - 10×2 - 5×2 170 px。真实占位 200 px与 CSS 写的完全一致。所以想“所见即所得”请把box-sizing: border-box写进 reset.css别再犹豫。3. 滚动条——藏在角落里的“第三者”.scroll{width:200px;height:100px;overflow:auto;}当内容溢出出现滚动条时滚动条会吃掉部分 content 空间。在 Windows 上经典滚动条宽约 17 pxmacOS 上可能 0 px重叠式。这意味着同样一行代码在不同系统上量到的 clientWidth 可能不一样。做精密布局时别忘了给它留“备胎”宽度。4. transform——“灵魂出窍”的元凶.ghost{transform:scale(0.5);}元素在视觉上缩小了一半但 DOM 占位纹丝不动。此时offsetWidth依旧按原尺寸汇报而getBoundingClientRect会如实返回缩放后的像素级大小。后面我们会用代码验证先埋个包袱。getComputedStyle——“样式档案室”的馆长1. 它能给你什么conststylewindow.getComputedStyle(el);console.log(style.width);// 190.375pxconsole.log(style.height);// auto返回的是渲染后的最终样式颜色、字体、宽高都能查到。但注意所有值都是字符串带单位且不可写。如果 CSS 里写的是height: auto它绝不会好心帮你算成像素——auto 就是 auto一字不差。2. 单位陷阱——“em、%、auto”三连坑.parent{font-size:16px;}.child{width:50%;height:10em;}constchilddocument.querySelector(.child);conststgetComputedStyle(child);console.log(st.width);// 50% ← 依然是百分比console.log(st.height);// 160px ← 计算后的像素规则百分比相对于包含块getComputedStyle 不会帮你转换成 px除非浏览器已经布局完。em/rem会被换算成 px因为字体大小已确定。auto纹丝不动你拿不到具体数字。3. 别拿它做“实时量尺”// ❌ 错误示范想拿 auto 高度if(parseFloat(st.height)100){// 这里永远是 NaN 或 0}正确姿势getComputedStyle 只负责“样式声明”不负责“布局结果”。要想拿到“真实像素”请转战getBoundingClientRect或clientHeight。getBoundingClientRect——“像素级卷尺”1. 基本用法constrectel.getBoundingClientRect();console.log(rect.width);// 190.375console.log(rect.height);// 300.25返回浮点数单位是像素已经包含 padding border。坐标相对于视口滚动不影响 width/height但会改变 top/left。不会受到box-sizing影响因为它就是“画出来”的尺寸。2. transform 的“灵异事件”divclassghostGhost/divstyle.ghost{width:100px;height:100px;transform:scale(1.5);}/stylescriptconstrdocument.querySelector(.ghost).getBoundingClientRect();console.log(r.width);// 150 ← 已经乘了 1.5/script看到没getBoundingClientRect 把 transform 也算了进去而offsetWidth还是 100。所以做拖拽、碰撞检测时请务必用 getBoundingClientRect否则元素都“灵魂出窍”了你还拿旧尺寸肯定撞墙。3. 高清屏的“小数点”DPR 2 的手机上CSS 写 100 px实际物理像素 200。getBoundingClientRect 依旧返回100单位是CSS 像素不是物理像素。别被“高清”吓坏布局逻辑只认 CSS 像素。性能修罗场——重排与强制同步布局1. 什么是强制同步布局FSL// ❌ 典型 FSLel.style.width100px;console.log(el.offsetHeight);// 强制浏览器立即布局先写后读浏览器为了给你最新高度不得不立即重排。放在循环里就是性能核弹。2. 批量读写避免 FSL// ✅ goodconstwidthel.offsetWidth;// 读el.style.heightwidthpx;// 写先读后写浏览器可以一次性把写操作缓存起来下一帧统一刷新。工具函数里把所有读放一起所有写放一起性能立省 80%。3. requestAnimationFrame 防抖letrafId;functiononResize(){cancelAnimationFrame(rafId);rafIdrequestAnimationFrame((){constrectbox.getBoundingClientRect();// 安全读取不触发 FSL});}window.addEventListener(resize,onResize);把所有尺寸读取放进requestAnimationFrame浏览器会在下一帧布局完成后再回调零重排顺滑如丝。实战场景一动态弹窗——“内容多高我就多高”需求弹窗高度由内容撑开但最大不超过视口 80%。如果超出内部滚动。/** * 获取元素“真实”占用尺寸 * 隐藏元素也能测 */functionmeasure(el){constplaceholderel.cloneNode(true);Object.assign(placeholder.style,{position:fixed,left:-9999px,top:-9999px,visibility:hidden,display:block,transform:none// 去掉 transform 干扰});document.body.appendChild(placeholder);constrectplaceholder.getBoundingClientRect();document.body.removeChild(placeholder);return{width:rect.width,height:rect.height};}functionadjustDialog(){constdialogdocument.querySelector(.dialog);constbodydialog.querySelector(.dialog-body);const{height}measure(body);constmaxwindow.innerHeight*0.8;body.style.maxHeightMath.min(height,max)px;body.style.overflowheightmax?auto:visible;}亮点克隆节点 visibility:hidden跳过 display:none 的“失明”。去掉 transform防止缩放干扰。一次性读取零重排。实战场景二瀑布流——“卡片高度各不同我要一一记录”classWaterfall{constructor(container,col3){this.containercontainer;this.colcol;this.colTopsnewArray(col).fill(0);// 每列当前高度}asyncaddItem(el){// 1. 先插入到容器让浏览器渲染el.style.positionabsolute;// 脱离文档流不占位this.container.appendChild(el);// 2. 读取高度const{height}el.getBoundingClientRect();// 3. 找最短的列constminTopMath.min(...this.colTops);constidxthis.colTops.indexOf(minTop);// 4. 定位constcolWidththis.container.clientWidth/this.col;el.style.leftidx*colWidthpx;el.style.topminToppx;// 5. 更新列高this.colTops[idx]height20;// 20 是下边距}}// 使用constwfnewWaterfall(document.querySelector(.waterfall),3);items.forEach(itemwf.addItem(item));注意必须先插入 DOM浏览器渲染后才能读到高度。用position:absolute让元素不占文档流避免反复重排。所有读操作集中在前写操作定位集中在后性能最佳。实战场景三懒加载 IntersectionObserver——“露头再加载”constimgsdocument.querySelectorAll(img[data-src]);constionewIntersectionObserver(entries{entries.forEach(en{if(en.isIntersecting){constimgen.target;// 占位图替换真实地址img.srcimg.dataset.src;io.unobserve(img);}});},{rootMargin:50px,// 提前 50px 开始加载threshold:0.01});imgs.forEach(imgio.observe(img));问题如果图片没设置高度首次进入视口时en.boundingClientRect.height可能是 0导致重复触发或计算错误。解决提前在 CSS 里给占位图一个固定宽高比img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;/* 新标准老浏览器用 padding-hack */}这样即使 src 是空浏览器也能算出高度IntersectionObserver 就能精准判断进入时机。踩坑实录——“我遇到鬼了”1. getComputedStyle 返回 auto怎么办场景父元素高度由子元素撑开你想拿父高做动画结果拿到auto。急救包functiongetRealHeight(el){constoldel.style.display;el.style.displayblock;// 强制渲染consthel.getBoundingClientRect().height;el.style.displayold;returnh;}代价短暂闪一下慎用或者直接用前面的measure克隆法零闪屏。2. 页面缩放zoom导致 getBoundingClientRect 失真document.body.style.zoom1.25;constrel.getBoundingClientRect();console.log(r.width);// 比原始值大 25%结论getBoundingClientRect 返回的是CSS 像素 × zoom如果你要做拖拽定位记得把 zoom 算回去constzoomwindow.devicePixelRatio/(window.outerWidth/window.innerWidth);constrealr.width/zoom;3. display:none 时两个 API 都“失明”真相元素不在渲染树浏览器根本没画自然拿不到尺寸。唯一解法先让它可见但不占位.ghost-measure{position:absolute;visibility:hidden;display:block!important;}测完再删前面 clone 法已经示范。高手私藏——一行代码搞定所有边界/** * 终极尺寸工具 * param {HTMLElement} el * param {Boolean} ignoreTransform // 是否忽略 transform * return {Object} {width, height} */exportfunctiongetElementSize(el,ignoreTransformfalse){if(!el)return{width:0,height:0};// 隐藏元素特殊处理constisHiddenwindow.getComputedStyle(el).displaynone;letnodeel;if(isHidden){nodeel.cloneNode(true);Object.assign(node.style,{display:block,position:absolute,visibility:hidden,transform:none,left:-9999px});document.body.appendChild(node);}constrectnode.getBoundingClientRect();constwidthignoreTransform?node.offsetWidth:rect.width;constheightignoreTransform?node.offsetHeight:rect.height;if(isHidden)document.body.removeChild(node);return{width:Math.round(width),height:Math.round(height)};}特点自动识别display:none克隆测量零副作用。可选ignoreTransform应对缩放场景。返回整数避免小数点漂移。ResizeObserver——“尺寸变了我第一时间告诉你”constronewResizeObserver(entries{entries.forEach(en{const{inlineSize:width,blockSize:height}en.contentBoxSize[0];console.log(新尺寸,width,height);// 触发重排业务});});ro.observe(document.querySelector(.box));优势原生监听比 window.resize 精准一万倍。内容区、边框区、设备像素比都能区分。性能爆棚零手动轮询。兼容现代浏览器 100%老 IE 直接埋了吧。SSR 与 JSDOM——“后端也想量尺寸”Node 里没有渲染树getBoundingClientRect 直接 undefined。解决方案用JSDOM css-layout模拟import{JSDOM}fromjsdom;importcomputeLayoutfromcss-layout;consthtmldiv stylewidth:200px;padding:10px;/div;constdomnewJSDOM(html);consteldom.window.document.querySelector(div);// 手动计算constlayoutcomputeLayout({style:{width:200,padding:10},children:[]});console.log(layout.width);// 220注意只能做静态布局没有字体渲染、没有浮动塌陷。精度有限仅供服务端骨架屏或单元测试。结语——“像素级掌控”不是梦别再被offsetWidth和style.width这对“塑料兄弟”骗了也别再让auto和transform牵着鼻子走。记住一句话“样式找 computed占位找 rect隐藏先克隆变化用 observer。”把今天这篇收藏 星标 抄代码下次再遇到“尺寸不对”你就能三秒定位、五秒修复然后准点下班去撸串。祝你编码愉快像素从此听你号令。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进