不能用 display: none 隐藏原生 checkbox，因为它会彻底移除元素的可访问性，导致 tab 键无法聚焦、屏幕阅读器读不到、表单序列化丢失值；正确做法是用 position: absolute + opacity: 0 视觉隐藏并保留交互能力。
为什么不能用 display: none 隐藏原生 checkbox？
直接写 input[type="checkbox"] { display: none; } 看似简单，但会破坏键盘导航和屏幕阅读器支持——Tab 键无法聚焦、辅助技术读不到状态，属于可访问性硬伤。
正确做法是用视觉隐藏而非逻辑移除：
-
position: absolute把元素移出文档流，避免影响布局 -
opacity: 0让它不可见，但保留交互能力 - 加
pointer-events: none可选，防止误点干扰自定义区域（但 label 仍需正常响应）
如何用伪元素画出可点击的自定义勾选框？
核心是把样式“挂”在 label 上，并通过相邻兄弟选择器 + 响应 checkbox 状态变化。
示例关键 CSS：
label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
margin-right: 8px;
vertical-align: middle;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
position: absolute;
left: 4px;
top: 2px;
font-size: 14px;
color: #fff;
}
注意：::before 画边框，::after 画勾；:checked + label 才能精准命中对应 label，别漏掉 +。
响应式尺寸怎么适配移动端？
小屏下 checkbox 图标和文字容易挤在一起，靠固定像素值（如 18px）会失衡。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
推荐用相对单位+媒体查询组合：
- 图标宽高改用
em或rem，比如width: 1.2em; height: 1.2em; - 文字间距用
margin-inline-start替代margin-left，兼容 RTL - 在
@media (max-width: 480px)里把字体缩小、行高调松，避免触摸目标过小
特别提醒：iOS Safari 对 label 的点击热区有最小 44×44px 要求，确保整个可点击区域达标。
多列布局用 Grid 还是 Flex？
Grid 更适合明确列数的场景，比如「始终显示 3 列」；Flex 更适合动态换行，比如「尽可能塞满一行，不够就折行」。
实际选型看需求：
- 要严格等宽三列 → 用
grid-template-columns: repeat(3, 1fr) - 要每项宽度固定（如 120px）、自动换行 → 用
display: flex; flex-wrap: wrap;+flex: 0 0 120px - 别忘了加
gap控制间距，比margin更干净
Grid 在 Safari 旧版本（-webkit- 前缀，但 2026 年绝大多数用户已无需考虑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
