<nav>只能包含导航链接，不可塞入搜索框；正确做法是用<header>并列包裹<nav>、<form role="search">和用户区域，语义清晰、可访问性强。
用 <nav> 包住导航项，别塞搜索框进去
很多人一上来就把 <input type="search"> 直接丢进 <nav> 里，结果语义错乱、读屏器报错、SEO 权重稀释。HTML5 明确规定：<nav> 只该包含“导航到其他页面的链接集合”，搜索是功能操作，不是导航目标。
正确结构是：用 <header> 作为顶层容器，里面并列放 <nav>、<form>（包搜索框）、<div class="user">（头像）三块。这样语义清晰，各司其职。
-
<nav>内部必须是<ul><li><a>结构，不能直接写<a> - 搜索框要包在
<form>里，加role="search"和aria-label="站内搜索"，否则屏幕阅读器只读“输入框”，不知道用途 - 如果用
<input type="search">，Safari 会自带放大镜图标和取消按钮，但 Chrome 不一定显示取消按钮——得靠 JS 或 CSS 控制::-webkit-search-cancel-button
display: flex 布局时，中间搜索框怎么占满剩余空间？
常见错误是给搜索 <form> 设 width: 100%，结果它撑满整个 <header>，把右边头像顶跑了。真正该做的是让搜索区域“弹性占位”。
关键 CSS 就这几句：
立即学习“前端免费学习笔记（深入）”；
header {
display: flex;
align-items: center;
gap: 1rem;
}
nav { flex: 0 0 auto; }
form { flex: 1; }
.user { flex: 0 0 36px; }
注意点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
flex: 1等价于flex: 1 1 0，意思是“尽可能拉伸，基准尺寸为 0”，所以它会吃掉 nav 和 user 之外的所有空隙 - 别给
form设固定width或max-width，否则在小屏下可能溢出或缩得太小 - 如果搜索框内
<input>没填满父级，记得加width: 100%和box-sizing: border-box
input[type="search"] 的:focus 样式为什么没反应？
Chrome 默认会给 <input type="search"> 加 outline: none（尤其用了重置 CSS 后），但很多人删了 outline 却没补 :focus 的替代样式，导致键盘用户完全看不出焦点在哪——这是可访问性红线。
必须显式定义：
input[type="search"]:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
border-color: #007bff;
}
容易踩的坑：
- 写了
outline: none却没配:focus，等于主动屏蔽键盘导航 - 只改
border-color，但没调outline，某些浏览器（如旧版 Safari）仍不显示焦点环 - 移动端 Safari 对
appearance: none支持不稳定，加了反而让搜索图标消失，建议只在必要时加，并配合::-webkit-search-decoration手动控制图标
头像下拉菜单弹不出来？先查 z-index 和 overflow
头像点击后下拉菜单不见，90% 是被裁掉了。不是 JS 没绑，也不是 CSS 没写，而是布局层级或容器限制出了问题。
检查顺序如下：
- 头像容器（比如
<div class="user">）是否设了position: relative？没设就无法锚定绝对定位的下拉菜单 - 下拉菜单本身是否设了
position: absolute; top: 100%; right: 0; z-index: 1000？z-index必须比 header 高，且不能依赖父级的z-index（IE11 除外） -
<header>是否有overflow: hidden？有就立刻删掉，这是最常被忽略的裁剪元凶 - 如果 header 用了
transform: scale(0.98)或filter: drop-shadow()，会创建新层叠上下文，导致子元素的z-index失效；此时要在头像容器上加isolation: isolate
复杂点在于：这些限制条件往往叠加出现，比如小屏下媒体查询改了 flex-direction，又加了 transform 动画，再配上 overflow: hidden —— 下拉菜单就彻底隐身了。调试时得一层层关掉样式来隔离问题。
