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