前端技术文章
-
![CSS中，background-size 属性用于控制背景图像的大小，可以实现缩放、拉伸或适应容器等效果。以下是其基本用法和常见应用场景：一、background-size 的语法background-size: [width] [height];width：设置背景图的宽度。height：设置背景图的高度。如果只提供一个值，则另一个值默认为 auto。二、常用值说明值说明auto默认值，背景图原](/uploads/20260516/17789168196a081dd35ce0e.jpg)
background-size用于控制背景图尺寸，取值包括auto、具体数值、百分比、cover和contain，配合background-position和background-repeat可实现全屏背景、图标缩放等效果。435 收藏 -
必须掌握操作HTML元素的核心DOM方法：一、通过ID获取单个元素；二、通过类名获取元素集合；三、通过标签名获取元素集合；四、通过CSS选择器获取元素；五、为元素绑定事件监听器；六、创建并插入新元素；七、替换或删除现有元素。435 收藏 -
sm:表示视口宽度≥640px时生效，lg:表示视口宽度≥1024px时生效，二者不互斥且lg优先级更高。435 收藏 -
JavaScriptIntlAPI提供内置国际化支持，含DateTimeFormat和NumberFormat等接口，可自动适配多语言日期、时间、数字、货币格式，需注意语言标签准确性、浏览器兼容性及时区/货币显式配置。435 收藏 -
summary标签本质是details的唯一交互锚点，必须为首个直接子元素；支持纯文本、内联元素（如<svg>）及emoji，但禁用块级元素；失效主因包括结构错位、CSS阻断（如pointer-events:none）或JS覆盖默认行为。435 收藏 -
提取 HTML 属性中的纯文本内容时，避免使用正则表达式是关键，因为 HTML 的复杂性和多样性可能导致正则表达式失效或产生意外结果。以下是安全高效的方法：1. 使用 DOM 解析器（推荐）DOM 解析器可以正确解析 HTML 结构，避免正则表达式的陷阱。示例（Python）：from bs4 import BeautifulSoup html = '
本文介绍为何不应使用多层正则替换清理HTML标签，推荐使用DOMParser解析并提取innerText的健壮方案，兼顾安全性、可维护性与浏览器兼容性。本文介绍为何不应使用多层正则替换清理HTML标签，推荐使用DOMParser解析并提取innerText的健壮方案，兼顾安全性、可维护性与浏览器兼容性。在前端开发中，常需从HTML属性（如title）中提取“无标签的纯文本”。初学者易倾向用链式.replace()配合多个正435 收藏
Object.freeze比Object.seal保护更强：两者均禁止增删属性且不可修改描述符，但freeze还禁止修改属性值；均不递归处理嵌套对象；isFrozen为真必isSealed为真，反之不成立。435 收藏
直接用click监听树节点会失效，因懒加载节点初始无DOM；应使用事件委托绑定到容器，用closest()找目标按钮并校验disabled状态。435 收藏
absolute+margin:auto居中需同时满足四边为0、宽高明确、父容器为定位上下文；遮罩场景易因裁剪、滚动偏移、视口变化失效，推荐fixed+flex替代。434 收藏
内联样式仅限邮件模板、SSR首屏关键样式等不可替代场景，其余必须用外部样式表；因其特异性最高但破坏可维护性，混用时会覆盖伪类、媒体查询等所有CSS规则。434 收藏
Tailwind不支持empty:变体，因其未内置结构伪类解析；需用@layercomponents自定义或兄弟元素+:emptyCSS实现，注意DOM空白节点和框架渲染导致的失灵问题。434 收藏
Flex垂直居中失效主因是父容器无高度、为inline-flex或子元素绝对定位；Grid的place-items失效主因是未定义grid-template-rows、存在wrapper嵌套或子元素设置align-self覆盖。434 收藏
flex-wrap用于控制Flex子元素是否换行，默认值为nowrap，必须显式设为wrap或wrap-reverse才能换行；其行为受flex-direction主轴影响，换行方向随之改变。434 收藏
日常写HTML首选VSCode；需WYSIWYG编辑选CKEditor或TinyMCE；轻量修改用Notepad++或VSCodeLivePreview。434 收藏
推荐用iframe替代object嵌入PDF，因其专为文档嵌入设计、不依赖type属性、支持全屏和手势缩放；object因浏览器兼容性差、易白屏或跳转系统应用，仅限可控环境且满足fallback等特定条件时使用。434 收藏