元素css宽高不听我的话?!

自己写出来的代码就像自己的孩子一样,但是如果有一天孩子怎么都不听话!啪啪啪!(文明养娃从我做起)


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

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


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

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

你可能感兴趣的:(元素css宽高不听我的话?!)