虽然现在浏览器调试工具已经进化到一个很高的程度，但是作为一个后端出身的程序员，对 CSS 还是存在一种恐惧感，这种恐惧感就是我没有任何办法能很直观的找到“那个盒子为啥在那里而不是在我想要它在的位置”的原因。都是开发 UI 最合适的语言是 CSS 这种标记语言，以描述方式来生成 UI ，但是在遇到位置问题时，到底该咋调试呢，只能一个个的去换参数吗（我周围的前端都是这么做的）。难道就没有类似后端那样，挨个的把条件打印出来，哦，原来在那个位置就是因为 xxx 参数是 xx 值的原因？或者更直观的告诉你为啥那个盒子在那里？
This topic created in 3321 days ago, the information mentioned may be changed or developed.
 | 1 murmur Apr 12, 2017 能啊，现在的调试工具都可以列出一个样式是哪些样式叠加成的，谁被划掉了 如果这些都不能解决的话你就需要补一下基础的 一个盒子在这里不是因为他为什么在那里 可能是因为他爹在那里 他是个子元素而已 他爹在那里还可能是因为一个边距或者绝对布局 。。。 然后你可以试着一个一个把这些 css 勾掉 看影响最大的 css 是哪条 试多了就明白了 不过还是要基础牢固 |
 | 2 dong3580 Apr 12, 2017 同是后端，浏览器调试，这不，调试熟练了，可以混个前端职位了， |
 | 3 Tonni Apr 12, 2017 |
 | 4 abcbuzhiming OP @murmur 不不，你说的这些还是不直观，就像你说的，要基础牢靠，要去看一条条的样式，然后逐步去推测最终结果。而浏览器调试的一个最大坑点是，它能表达一个盒子的所属信息，但是它无法表达盒子和盒子之间的相关信息（这一点完全靠调试人员自己的经验），比如一个盒子其实是被另外一个盒子给挤下去的，这个你要基础不牢靠尤其是对盒模型的那些样式不是特别熟悉的话，调半天都不明白为啥这盒子就没法在这个位置上，这真的是太痛苦了 |
 | 5 lneoi Apr 12, 2017 @abcbuzhiming 好像说的有道理 又感觉哪儿不太对劲.. |
| 6 abcbuzhiming OP @lneoi 直白的说吧，现在似乎没有哪款浏览器能表现出盒模型的碰撞关系，如果你不是对 CSS 本身有了解的话，去调试盒模型的位置非常痛苦，有的情况还算直观，有的是完全不知道为啥会出现在那里 |
 | 7 yhxx Apr 12, 2017 前端表示遇到各种各样的奇怪的问题的时候，很大一部分都是靠经验+猜解决的。。。 |
 | 8 lwbjing Apr 12, 2017 chrome ，右键检查元素，然后控制台样式那里就可以随意改啦。。 话说 11 年面淘宝的笔试就是给了我一张简单的页面，让我手写 html 跟 css ，那是我第一次靠目测算像素。。 那时候真好，兼容性基本上只要考虑 IE6 ，其它的基本正常写就可以了。。 |
 | 9 changwei Apr 12, 2017 via Android chrome 按 f12 ，然后弹出来的开发者工具最左上角那个按钮，点一下，然后鼠标移到你觉得“位置不对”的 div 旁边，蓝色是盒子内部，绿色是 padding ，黄色是 margin ，一个一个移过去观察就好了。 一般情况下除非是浏览器渲染 bug ，不然老老实实把 css 基础学好，把一些渲染特性记笔记（比如说 margin 重叠规则等等），是可以做到看到代码，脑子中就可以模拟渲染出实际的页面布局。 |
| 10 abcbuzhiming OP @Tonni 没看懂这东西的作用 |
| 11 abcbuzhiming OP @changwei 你这个是表现单个盒子，是的，这个已经做的很好用了，很直观的，但是对我说的，表现盒子和盒子之间的关系的没有 |
 | 12 pspgbhu Apr 12, 2017 所以说样式出问题了，还是要靠一点经验的，要不然很难直接定位到问题 |
| 13 murmur Apr 12, 2017 @abcbuzhiming 不痛苦的话前端能值这个工资么 |
Select Language