直播预约通道开启!2021腾讯数字生态大会邀您共探产业发展新机遇! 了解详情
写点什么

Debug 时,有个正确的态度至关重要

2020 年 5 月 03 日

Debug时,有个正确的态度至关重要


之前,我写过一篇文章《程序调试长什么样?》来讲述调试程序时应该做什么。有个基本要点:一次只改变一样东西,并核实你的假设。


但是,当我上周调试一些 CSS 程序时,我认为有些东西没讲:调试时的态度。


直到现在,我还不是一名杰出的 CSS 开发者。我不仅对很多基本的 CSS 概念缺乏理解,而且从来没有专业的写过 CSS。上周,我做了一个自己尝试过的最复杂的 CSS 项目。


当调试 CSS 项目时,我发现自己犯了一些不该犯的错误,这些错误有:


  • 盲目的随机修改代码,并妄想能奏效;

  • 在谷歌上搜了一大堆东西,还未理解就去尝试;

  • 如果代码出错,回退更改到原状,并重新折腾


这样,没有任何效果。之后,我意识到这是因为我对 CSS 的态度(有问题)。与平常调试不同,我这次有先入为主的想法(对我来说,CSS 太难,我搞不懂)。让我们谈谈调试程序时的态度问题。


错误的态度——我认为这太难了

当遇到一个具体问题,我有 2 个层叠的 div,想把 Div A 叠放到 Div B 上。最初,我认为的 CSS 层叠模型是这样:“如果你想要把 A 叠加到 B 上,只要改变 z-index 就好了。”因此,我将 Div A 的 z-index 改成 5。


但它并未生效。在 Firefox 环境中,Div A 显示在最上面,而在 Chrome 环境中,Div B 显示在最上面。真让人头大。


我用 google 搜索了一下,发现 z-index 没有生效的一个可能原因是,Div A 和 Div B 实际处于不同的“堆叠上下文”中。如果是这样,即使我将 Div A 的 z-index 设置为 999999,仍然不会将 Div A 叠放在 Div B 上。(这有一个关于 z-index 问题的小型示例,虽然我认为那个 bug 还有一些其他因素)


我认为,这些堆叠上下文的相关内容看上去异常复杂,为什么 Firefox 和 Chrome 环境会有所不同,我根本不可能弄明白这些东西。于是,我尝试了网上推荐的方法,但这些建议统统不管用。


最后,我放弃这种“盲目修改并撞大运的”策略,去阅读关于堆叠顺序的文档。


我看了 MDN 关于堆叠顺序的页面,上面写着:


当没有元素包含 z-index 属性时,元素按照如下顺序堆叠(从底到顶顺序):

  1. 根元素的背景和边界

  2. 普通流(无定位)里的块元素(没有 position 或者 position:static;)按 HTML 中的出现顺序堆叠

  3. 定位元素按 HTML 中的出现顺序堆叠


这么一解释,让我恍然大悟。这取决于 HTML 中的出现顺序!于是,我在 HTML 把 Div A 放在 Div B 的后面(作为同属(sibling)单元),这样它在两种浏览器的环境下都能正常工作。


正确的态度——让我们学习一些基础知识,看看是否有用

实际上,CSS 堆叠的问题并没有想象中那么复杂。你只需要阅读一个简单的文档,了解 CSS 是怎样进行堆叠的。


当然,计算机上的事情并非如此简单。而且即使在这个具体案例中,如果要深究怎样创建一个新堆叠上下文的规则,也很复杂。


所以,建议调试时,先冷静下来,学习一些基础知识,看看是否有所帮助。


在 CSS 中,另一个我认为“很难”理解的地方是关于position: absoluteposition: relative的一整套规则。我不断看到一些代码示例中,人们用position: absolute属性来制作复杂的 CSS,但我搞不明白它们如何工作。


但是上周,我与一个比我更擅长 CSS 的人一起写代码,我发现别人在自己的代码里信心满满地使用position: absoluteposition: relative属性。我也能成为这样的高手吗?


于是,我又去查阅 MDN 上关于position: absolute的文档,它是这样写的:


元素会被移出正常文档流,且在页面布局中不会为元素创建任何空间。元素位置是通过该元素相对于最近的定位祖先元素(closest positioned ancestor)的偏移量来确定的……元素的最终位置由 top、right、bottom 和 left 的值决定。


所以,如果一个元素带position: absolute属性,它的位置是相对于它们最近的定位祖先元素进行定位的!你只需要使用top/bottom/right/left这几个属性来决定它的位置!就是这么简单!


好的文档可以让你事半功倍

我认为此前对 CSS 丧失信心的另一个原因是,我不确定能在哪里找到准确的信息和建议。即使我知道 MDN 应该有帮助,但它无法解决非常具体的问题,比如我应该如何将一个 div 居中。为此我搜到许多答案,但我无法确定它们一定正确。


这周,我去CSS Tricks 学习,发现很多非常棒的文章,比如Centering in CSS: A Complete Guide,这篇文章看上去很靠谱,而且写得清晰明了。


写在最后:

我不知道,为什么最初会坚信理解 CSS 的概念“是不可能的”,即使我往往认为计算机领域没有什么不可能。或许由于我在停留在 CSS 初级编程水平,却从未在这个领域深究。正是这种错误态度阻碍我写出好的 CSS 项目。


英文原文:


When debugging, your attitude matters


2020 年 5 月 03 日 07:001505
用户头像

发布了 63 篇内容, 共 37.0 次阅读, 收获喜欢 114 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营第四周学习总结

吴传禹

极客大学架构师训练营

聊聊「测试分工和测试时间」

清菡

测试

极客时间架构师培训 1 期 - 第 4 周作业

Kaven

架构师训练营 1 期 -- 第四周作业

曾彪彪

极客大学架构师训练营

第四周总结

Geek_ac4080

手把手教你分析Mysql死锁问题

捡田螺的小男孩

MySQL 死锁

用Python绘制地理图

计算机与AI

Python 绘图

Week 3学习总结

balsamspear

极客大学架构师训练营

十六、深入Python字符串

刘润森

Python

B站真题:如何判断括号是否有效?

王磊

Java 数据结构 算法

架构师训练营 1 期 -- 第四周总结

曾彪彪

极客大学架构师训练营

架构师训练营第四周作业

我是谁

极客大学架构师训练营

甲方日常 32

句子

随笔杂谈

典型的大型互联网应用方案

garlic

极客大学架构师训练营

迭代开发中的微服务拆分

码猿外

架构 微服务 微服务拆分 架构演进

十五、深入Python输入和输出

刘润森

Python

架构师训练营第四周作业

吴传禹

极客大学架构师训练营

week04总结

追风

架构师一期

三步法解析Express源码

执鸢者

面试 前端 Node Express

如何设计大型互联网系统架构

天天向上

极客大学架构师训练营

每天都要写吗?

Nydia

week04作业

追风

架构师一期

给新入职工程师的10条建议

supernova

管理 职场 工作方式

第四课系统架构课后作业

Geek_michael

极客大学架构师训练营

视读——沟通的艺术,看入人里,看出人外(第四章)

废材姑娘

一次用户故事地图之旅

Bruce Talk

敏捷开发 用户故事 Product Owner 用户故事地图

Spring 事务,你真的用对了吗(上篇)?

废材姑娘

Spring MVC

自学编程,看书还是视频?

沉默王二

程序员 读书 自学编程 视频

大型互联网系统常用的技术方案

天天向上

极客大学架构师训练营

Week 3命题作业

balsamspear

极客大学架构师训练营

会用Docker的人都别装了,这多简单呐

MySQL从删库到跑路

MySQL Docker Linux yum redhat

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

Debug时,有个正确的态度至关重要-InfoQ