-
使用CSS的:required伪类可为表单必填字段添加视觉提示。1.通过HTML的required属性标记必填项，CSS的:required伪类选中这些元素。2.用:required设置边框、背景色等样式提升可读性。3.结合::after与:has()在label旁添加红色星号标识，或直接在HTML中写入兼容性更好。4.利用:invalid和:valid区分未填与已正确填写的字段，分别显示红绿边框。通过简单CSS即可实现清晰的表单反馈，关键是保持样式一致，明确提示用户必填项及其状态。
-
flex:1在含文字列表中无法等宽，因flex-basis:0+flex-shrink:1导致长文本撑开后压缩失衡；可靠方案是flex:00calc(100%/n)配合min-width:0和white-space控制换行或截断。
-
该错误表明TailwindCSSv4+要求PostCSS8，但项目中存在PostCSS7或版本冲突；解决方法是卸载旧版并安装兼容组合：npmuninstalltailwindcsspostcssautoprefixer&&npminstall-Dtailwindcss@npm:@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9。
-
老旧浏览器访问现代网页需兼容处理：一、启用IE兼容模式；二、注入HTML5Shiv支持语义化标签；三、用Babel转译ES6+语法并加载core-jspolyfill；四、对现代API做特征检测与降级回退。
-
<p>应使用\s匹配任意空白字符（含制表符、换行符、全角空格等），而非仅；常见用法包括去首尾空白、合并连续空白、清除纯空白行及提取非空内容，并需注意贪婪性与边界控制。</p>
-
content-box是W3C规定的默认盒模型，width/height仅指内容区尺寸，padding和border额外叠加；border-box则将padding和border纳入width/height计算，内容区自动压缩，布局更可控。
-
toBlob()比toDataURL()更适合上传前压缩，因其直接生成Blob对象、体积小、内存占用低、不触发Base64膨胀；而toDataURL()同步阻塞、生成字符串体积比原图大33%、易致卡顿或OOM。
-
padEnd()是实现固定宽度终端动画的核心工具，通过统一补足字符串长度避免光标跳动；需预设基准宽度、配合\r原地刷新、分离动态静态内容，并慎用Unicode字符以防越界。
-
浮动（Float）用于元素横向排列，通过float:left或float:right使元素脱离文档流并左/右对齐，常用于多列布局；多个浮动元素在容器宽度足够时会并排显示，如.left-box设width:60%、float:left，.right-box设width:40%、float:right可实现两栏布局；但浮动会导致父容器高度塌陷，需通过clear:both、overflow:hidden或伪元素::after{content:"";display:table;clear:both}清除浮动；使用
-
BEM通过block__element--modifier命名强制作用域隔离，降低样式覆盖成本；禁用复杂选择器、依赖工具链校验与编辑器支持，并需配合设计令牌管理全局变量。
-
{}与{}不是同一个键，因为Map键比较基于引用而非结构相等，每次{}创建新对象实例，内存地址不同，Map视为独立键。
-
用[href$=".pdf"]可精准匹配以.pdf结尾的URL并添加图标，因$=操作符只匹配属性值结尾，比*=更安全；需注意空格、协议不影响匹配，但IE8不支持。
-
使用Flexbox实现导航栏内容排列，结合Grid构建页面整体结构，通过媒体查询实现响应式布局，体现“Grid管结构、Flex管内容”的设计原则。
-
HTML5Canvas绘制矩形有四种方法：一、fillRect()直接绘制实心矩形；二、strokeRect()仅绘制空心边框；三、rect()结合beginPath()与fill()/stroke()定义路径；四、clearRect()清除指定矩形区域。
-
直接设width和height无效，应采用padding-bottom:100%模拟正方形或aspect-ratio+table-layout:fixed锁死尺寸，避免被内容撑开。
