自己写出来的代码就像自己的孩子一样，但是如果有一天孩子怎么都不听话！啪啪啪！（👻文明养娃从我做起）
写了这么久代码还是有翻车的时候，今天写代码被这个不听话的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拜拜。
网友评论