padding和width百分比使用時要注意滾動條的出現

最主要的緣由仍是我對盒子模型理解的不夠。

盒子大小最爲重要的2個部分就是padding和內容content。

當咱們設置width是在設置content的大小，百分比的時候它參照的是父元素的content的大小。

父元素content的大小（即width）爲100px，子元素用百分比的時候100%就是100px。

上述聯繫下。

若是父元素width設置爲100%恰好撐滿整個設備屏幕，若是這個時候子元素width仍是設置爲100%；

同時，父元素用了padding，那就要出事了。會有橫向滾動條。

 

元素的盒子去渲染的時候，是先肯定下來content的大小，再去弄padding的大小。整個由盒子的內部向外部計算渲染。

若是content是100%了，它又要想辦法去弄padding來知足你，那對不起了，來個橫向滾動條把，或者整個元素的邊界擴張了。

太晚了我想睡覺了。

總之，想用padding來限制內容大小或者子元素的時候，父元素不要設置width，若是width設置了就意味着content確定是不變的，徹底和咱們的想法矛盾了，父元素自身設置好padding就好了，下面子元素的寬度設置爲100%。