1.background 替代 img 后元素消失核心结论img是内容,会撑开父元素;background是装饰,不撑开父元素。把 img 换成 background 后,必须给容器手动设宽高。代码示例/* ❌ 背景图看不到(容器高度为 0) */.box{background:url(...)no-repeat;}/* ✅ 给容器设尺寸 */.box{width:300px;height:200px;background:url(...)no-repeat;background-size:contain;/* 可选:完整显示 */}img vs background 怎么选场景用img用background图片是页面内容(产品图、文章配图)✅❌图片是装饰(边框、花纹、图标)❌✅需要 SEO/无障碍✅ 有 alt❌需要叠加文字/其他元素❌✅ 容易需要响应式缩放都行background-size: cover/contain更灵活一句话记忆img会撑开父元素,background不会!换用 background 要给容器设 width/height!2.input vs textarea核心结论input单行,光标垂直居中;textarea多行,光标默认在左上角。代码示例!-- ❌ 评论输入框用 input,光标垂直居中不合适 --inputtypetextclasscomment-box!-- ✅ 改用 textarea,光标在左上角 --textareaclasscomment-box/textarea对比inputtextarea行数单行多行光标位置垂直居中默认左上角适合场景用户名、密码评论、留言textarea 常用样式textarea{padding:10px;/* 光标离边框有间距 */border:none;/* 去掉默认边框 */resize:none;/* 禁止拖拽改变大小 */outline:none;/* 去掉聚焦时的外框 */}一句话记忆多行输入用 textarea,光标默认在左上角!3.margin vs padding vs top/left核心结论属性作用是否移动元素是否占布局空间margin元素外部间距✅ 移动✅ 占空间padding元素内部间距❌ 不移动(只影响内容位置)✅ 占空间top/left(relative)视觉偏移✅ 视觉移动❌ 原位置保留使用场景/* 想真正移动元素 → 用 margin */.box{margin-top:50px;}/* 想让内容离边缘远一点 → 用 padding */.box{padding:20px;}/* 想微调视觉位置且不影响布局 → 用 relative top */.box{position:relative;top:10px;}padding 看起来没生效的原因padding 是内边距,只控制元素与容器边缘的距离,不会移动元素本身。改 padding 后:✅ 容器高度变大了(多了 padding)✅ 内容离边缘有间距❌ 但元素位置没变一句话记忆移动元素用 margin,留白用 padding,微调视觉用 relative top!