元素css宽高不听我的话？！

自己写出来的代码就像自己的孩子一样，但是如果有一天孩子怎么都不听话！啪啪啪！（👻文明养娃从我做起）

---

写了这么久代码还是有翻车的时候，今天写代码被这个不听话的width气急了。。。
不过最后发现原因其实很简单。。真是脑瓜越来越不灵敏了。

有事随笔记一记(●ˇ∀ˇ●)，有啥忘了翻一翻。

---

发现（以为）页面中的展示和自己写的css不对应时，如下以此次的width为例

不正常

查错过程：

1. 控制台，选中元素查看该元素的对应css属性，对于这次翻车，因为很明显地看出是宽度有问题，所以我直接去看了这个元素的Computed
   观察浏览器最终计算出的元素width（盒模型中的数值），再看看确定width的css类中的数值。
   发现：错怪了css类（如上图），但是浏览器计算出的宽度就是不按照写的来。
2. 查看是否min-width限制了宽度。
   同理：如果是展示宽度比需要宽度小，可以看看max-width；如果是高度则看min-height和max-height；
   （总的来说，是看看有没有限制型的属性影响了展示）
   结果：min-width: 0px;，不是它。
3. 查看是否内联元素，无法设置宽高。
   直接在Styles里给元素element.style{ display: block; }
   结果：display: block;并没有拯救它
4. 思考父元素对其的影响。
   想到它的父元素是flex布局，然后我也在该元素的属性里找到了flex: 1;，布局影响了它的展示宽度。
   结果：flex: none;让它重回美貌。
   正常

---

由内而外，由浅到深，冷静思考，bug拜拜。