自己写出来的代码就像自己的孩子一样,但是如果有一天孩子怎么都不听话!啪啪啪!(文明养娃从我做起)
写了这么久代码还是有翻车的时候,今天写代码被这个不听话的width气急了。。。
不过最后发现原因其实很简单。。真是脑瓜越来越不灵敏了。
有事随笔记一记(●ˇ∀ˇ●),有啥忘了翻一翻。
发现(以为)页面中的展示和自己写的css不对应时,如下以此次的width为例
查错过程:
- 控制台,选中元素查看该元素的对应css属性,对于这次翻车,因为很明显地看出是宽度有问题,所以我直接去看了这个元素的
Computed
观察浏览器最终计算出的元素width(盒模型中的数值),再看看确定width的css类中的数值。
发现:错怪了css类(如上图),但是浏览器计算出的宽度就是不按照写的来。 - 查看是否
min-width
限制了宽度。
同理:如果是展示宽度比需要宽度小,可以看看max-width
;如果是高度则看min-height
和max-height
;
(总的来说,是看看有没有限制型的属性影响了展示)
结果:min-width: 0px;
,不是它。 - 查看是否内联元素,无法设置宽高。
直接在Styles
里给元素element.style{ display: block; }
结果:display: block;
并没有拯救它 - 思考父元素对其的影响。
想到它的父元素是flex布局,然后我也在该元素的属性里找到了flex: 1;
,布局影响了它的展示宽度。
结果:flex: none;
让它重回美貌。
由内而外,由浅到深,冷静思考,bug拜拜。