-
深拷贝创建完全独立的新对象,所有嵌套层级均重新分配内存;浅拷贝仅复制顶层,引用类型仍共享内存。推荐优先使用structuredClone(),兼容性要求高时可用JSON序列化或Lodash的_.cloneDeep()。
-
border会占位因默认box-sizing:content-box下宽度不包含边框;可用box-shadow模拟视觉边框以避免撑大布局,如box-shadow:0002px#333实现不占位边框;但box-shadow无法响应交互且不支持虚线,推荐优先使用box-sizing:border-box使border包含在宽高中,结合两者可灵活控制布局与视觉效果。
-
align-items是Flexbox布局中控制子元素在交叉轴上对齐方式的属性。1.它需在display:flex容器中使用;2.常用值包括flex-start(起始对齐)、flex-end(结束对齐)、center(居中)、baseline(基线对齐)和stretch(拉伸填充);3.其作用方向取决于flex-direction,主轴为水平时控制垂直对齐,反之则控制水平对齐;4.与justify-content(主轴对齐)配合使用可实现完整布局;5.实际应用中需注意设置容器高度、区分align-cont
-
order是Flex布局中唯一能不改变DOM结构而调整子项视觉顺序的属性,数值越小越靠前,相同值则保持DOM顺序,需配合flex容器及避免脱离文档流。
-
JavaScript原型链是对象属性查找的核心机制:从自身开始,沿__proto__逐级向上搜索至null;prototype是函数的属性,指向实例的原型;__proto__是实例的内部原型引用;constructor指向构造函数。
-
==先类型转换后比较,===要求值和类型均严格一致;如0==false为true而0===false为false,null==undefined为true但null===undefined为false,"0"==0、""==0、[]==false、[0]==false均为true;仅value==null检查null/undefined时合理;ESLint和TS默认禁用==,动态类型场景需显式转换后用===。
-
CSScolor属性用于设置文本颜色,可通过颜色名称(如red)、十六进制(如#ff0000)、RGB/RGBA(如rgb(255,0,0))、HSL/HSLA(如hsl(0,100%,50%))等方式定义,适用于不同场景需求。
-
target属性控制链接打开的浏览上下文而非创建新窗口;常用值包括_self、_blank(需配rel="noopenernoreferrer"防安全风险)、_parent、_top及自定义名(复用或新建);移动端WebView可能禁用_target="_blank"_需配置或降级处理。
-
使用语义化标签构建HTML表单可提升可读性、可访问性与SEO,应合理采用form、fieldset、legend、label等元素组织结构,确保输入项清晰关联,增强屏幕阅读器支持并优化用户体验。
-
PostCSS通过插件实现浏览器前缀自动补全、现代CSS语法支持和代码压缩等功能,需结合构建工具如Webpack使用;安装postcss及相关插件后,在postcss.config.js中配置autoprefixer和postcss-preset-env等插件,并通过.browserslistrc指定目标浏览器,使CSS能自动适配旧版本浏览器。
-
opacity会使整个元素及子元素一同变透明,无法单独控制背景或文字;正确做法是用rgba()设置背景色实现仅背景透明,或用伪元素+opacity模拟半透背景层。
-
合理使用rgba()和opacity可实现丰富视觉层次。rgba()精准控制颜色透明度,避免影响子元素,适合背景叠加与色彩融合;opacity作用于整个元素,常用于淡入淡出、遮罩效果。多层半透明叠加产生自然混合,如红色蒙版营造氛围,伪元素增强质感。注意文本用rgba()而非opacity保持可读性,避免多层高透明导致过暗,需在不同背景下测试可视性。结合两者优势,细节处理得当即可实现细腻立体的视觉效果。
-
transition作用于width、height、top、left会卡顿,因其触发高成本layout;应优先使用transform和opacity等仅影响合成层的属性,并通过translateZ(0)或will-change提升图层。
-
使用TailwindCSS可快速构建响应式卡片布局,通过实用类组合实现样式与交互;示例包含图片、标题、描述和按钮的基础结构,结合grid或flex实现多卡片排列,支持响应式断点控制;添加hover:scale-105、hover:shadow-xl等悬停效果提升用户体验,配合字体、颜色与间距类优化排版可读性。
-
grid-column:1/-1能占满整行,因-1指向容器最右侧隐式网格线,起始于第1列、结束于最后一列之后,不依赖列数且语义清晰;span语法如1/span100效果等效但更易读。