CSS布局需先确定display类型：block独占行、inline不可设宽高、flex/grid由父容器调度；调试用开发者工具拖动滑块更高效；响应式优先用min-width和viewport设置。
怎么用 CSS 控制元素位置和尺寸
直接改 margin、padding、width、height 最快，但容易叠在一起或撑破容器。关键不是“加多少”，而是先看元素的 display 类型——block 元素默认独占一行，inline 元素不能设宽高，flex 或 grid 容器里的子项则由父容器统一调度。
常见错误：给一个 span（默认 inline）写 width: 200px，结果完全没反应。这时候要么加 display: inline-block，要么直接换用 div。
- 调试时右键「检查元素」，在浏览器开发者工具里实时拖动
margin/padding滑块，比反复改代码快得多 - 设
max-width而非固定width，能避免小屏幕溢出 - 用
box-sizing: border-box让宽高包含边框和内边距，计算更直观
CSS 布局方式选哪个：float / flex / grid
float 现在基本只用于文字环绕图片这种老场景；flex 适合一维排列（比如导航栏、卡片列表）；grid 适合真正二维结构（比如后台仪表盘、响应式图文网格）。
性能上没明显差别，但兼容性要注意：grid 在 IE11 及更早版本不支持，flex 的旧语法（如 display: -webkit-flex）现在基本可弃用。
立即学习“前端免费学习笔记（深入）”；
- 做响应式导航栏，用
display: flex+flex-wrap: wrap，比浮动清空更稳 - 两栏布局（侧边栏+主内容），
grid写法更简洁：grid-template-columns: 250px 1fr - 别把
float和flex混用在一个容器里，容易触发意料外的重排
为什么改了 CSS 却没生效
最常见是选择器优先级（specificity）被更高权重的规则覆盖，比如你在 style.css 里写了 .btn { color: red }，但组件库的 button.btn:disabled 规则会把它压住。
另一个高频原因是样式被继承或层叠干扰，比如父元素设了 font-size: 14px，子元素又没重置，实际字体就变小了。
- 用浏览器开发者工具点开元素，看右侧「Computed」面板，找哪条
color或margin显示为删除线，那就是被覆盖了 - 临时加
!important能验证是不是优先级问题，但上线前必须删掉 - 避免用
id写样式（如#header），它权重太高，后期难覆盖
移动端适配的关键几行 CSS
不是所有页面都需要媒体查询，但三行基础设置几乎必加：
meta name="viewport" content="width=device-width, initial-scale=1"
这行 HTML 标签漏掉，@media 就全失效；CSS 里再补两行：
-
html { font-size: 16px }—— 防止 iOS Safari 自动缩放文本 -
* { box-sizing: border-box }—— 统一边框计算方式，避免 padding 把盒子撑大
真要写响应式断点，优先用 min-width（移动优先），而不是 max-width；否则小屏设备可能加载了根本用不到的大屏样式。
复杂点在于不同设备的像素比（dpr）和视口缩放行为不一致，同一段 1px 边框，在 iPhone 上可能渲染成 2 物理像素，但 Android 某些机型又会模糊——这时候得靠 transform: scaleY(0.5) 或媒体查询配合 device-pixel-ratio 微调。
