求助， CSS 调试的正确方式到底是什么

[abcbuzhiming]

虽然现在浏览器调试工具已经进化到一个很高的程度，但是作为一个后端出身的程序员，对 CSS 还是存在一种恐惧感，这种恐惧感就是——我没有任何办法能很直观的找到“那个盒子为啥在那里而不是在我想要它在的位置”的原因。都是开发 UI 最合适的语言是 CSS 这种标记语言，以描述方式来生成 UI ，但是在遇到位置问题时，到底该咋调试呢，只能一个个的去换参数吗（我周围的前端都是这么做的）。难道就没有类似后端那样，挨个的把条件打印出来，哦，原来在那个位置就是因为 xxx 参数是 xx 值的原因？或者更直观的告诉你为啥那个盒子在那里？

[murmur]

能啊，现在的调试工具都可以列出一个样式是哪些样式叠加成的，谁被划掉了
如果这些都不能解决的话你就需要补一下基础的
一个盒子在这里不是因为他为什么在那里 可能是因为他爹在那里 他是个子元素而已
他爹在那里还可能是因为一个边距或者绝对布局
。。。

然后你可以试着一个一个把这些 css 勾掉 看影响最大的 css 是哪条 试多了就明白了 不过还是要基础牢固

[dong3580]

同是后端，浏览器调试，这不，调试熟练了，可以混个前端职位了，

[Tonni]

https://css-tricks.com/debugging-tips-tricks/

[abcbuzhiming]

@murmur 不不，你说的这些还是不直观，就像你说的，要基础牢靠，要去看一条条的样式，然后逐步去推测最终结果。而浏览器调试的一个最大坑点是，它能表达一个盒子的所属信息，但是它无法表达盒子和盒子之间的相关信息（这一点完全靠调试人员自己的经验），比如一个盒子其实是被另外一个盒子给挤下去的，这个你要基础不牢靠尤其是对盒模型的那些样式不是特别熟悉的话，调半天都不明白为啥这盒子就没法在这个位置上，这真的是太痛苦了

[lneoi]

@abcbuzhiming 好像说的有道理 又感觉哪儿不太对劲..

[abcbuzhiming]

@lneoi 直白的说吧，现在似乎没有哪款浏览器能表现出盒模型的碰撞关系，如果你不是对 CSS 本身有了解的话，去调试盒模型的位置非常痛苦，有的情况还算直观，有的是完全不知道为啥会出现在那里

[yhxx]

前端表示遇到各种各样的奇怪的问题的时候，很大一部分都是靠经验+猜解决的。。。

[lwbjing]

chrome ，右键检查元素，然后控制台样式那里就可以随意改啦。。
话说 11 年面淘宝的笔试就是给了我一张简单的页面，让我手写 html 跟 css ，那是我第一次靠目测算像素。。
那时候真好，兼容性基本上只要考虑 IE6 ，其它的基本正常写就可以了。。

[changwei]

chrome 按 f12 ，然后弹出来的开发者工具最左上角那个按钮，点一下，然后鼠标移到你觉得“位置不对”的 div 旁边，蓝色是盒子内部，绿色是 padding ，黄色是 margin ，一个一个移过去观察就好了。

一般情况下除非是浏览器渲染 bug ，不然老老实实把 css 基础学好，把一些渲染特性记笔记（比如说 margin 重叠规则等等），是可以做到看到代码，脑子中就可以模拟渲染出实际的页面布局。

[abcbuzhiming]

@Tonni 没看懂这东西的作用

[abcbuzhiming]

@changwei 你这个是表现单个盒子，是的，这个已经做的很好用了，很直观的，但是对我说的，表现盒子和盒子之间的关系的没有

[pspgbhu]

所以说样式出问题了，还是要靠一点经验的，要不然很难直接定位到问题

[murmur]

@abcbuzhiming 不痛苦的话前端能值这个工资么