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,光标垂直居中不合适 --><inputtype="text"class="comment-box"><!-- ✅ 改用 textarea,光标在左上角 --><textareaclass="comment-box"></textarea>对比
<input> | <textarea> | |
|---|---|---|
| 行数 | 单行 | 多行 |
| 光标位置 | 垂直居中 | 默认左上角 |
| 适合场景 | 用户名、密码 | 评论、留言 |
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!
