网页总显示异常？HTML源码查看调试全攻略

（拍桌子）哎我说各位前端小白们，是不是经常遇到浏览器显示的页面和设计稿差了十万八千里？今儿咱就把浏览器怎么解析HTML源码这事儿掰碎了说，保准你看完能自己揪出80%的页面bug！

​​浏览器到底怎么处理源码的？​​
这玩意儿就跟做菜似的，浏览器就是个厨子，HTML源码就是菜谱。​​关键三步走​​：

1. 下载html文件（买菜）
2. 解析标签生成DOM树（洗切配菜）
3. 渲染绘制页面（炒菜出锅）
   要是标签没闭合，就像炒菜忘关火，整个页面都得糊！

​​三大查看姿势对比​​

（上周有个兄弟死活找不到样式表，结果是用开发者工具才发现CSS文件404了）

​​元素显示错位咋排查？​​

1. 先按F12打开​​审查元素​​
2. 点左上角箭头图标选中有问题的区域
3. 看右侧Styles面板有没有被划横线的样式
   常见死因：

• 父容器设了​​overflow:hidden​​
• 用了浮动却没清浮动
• 盒子模型计算错误

​​中文乱码问题急救包​​
那天帮妹子调试页面，所有中文都变火星文，最后发现是：

1. 文件编码没存成UTF-8
2. 标签写错位置
3. 服务器返回的Content-Type不对
   记住啊，必须放在的最前面！

​​移动端必杀技​​
遇到手机浏览器显示不正常？

1. 加viewport元标签：
2. 用Chrome的​​设备模拟器​​调试
3. 检查媒体查询条件是否覆盖所有机型
   （华为某些机型会对rem单位进行二次计算，这个坑我踩过！）

现在调试页面，我都是Chrome开发者工具和VSCode**。前两天给教育机构做的响应式官网，就是靠元素审查功能逮住了某个的迷之margin。各位记住啊，浏览器显示异常就像破案，源码就是现场证据链，学会查看HTML源码可比找外包程序员省钱多了！