CSS中各种百分比

搬运自掘金文章

css各种百分数的参考对象.jpg

• 为什么padding和margin是基于包含块的宽度

首先对于包含块的宽度是占一整行的，而高度如果没有设置的话，则由其子元素的内容高度所决定，如果是基于包含块的高度，一旦修改了margin和padding值，那么包含块的高度就会发生变化，而一旦包含块的高度发生变化，padding和margin又应该变化，就会造成死循环。而基于宽度则不会有这个问题，因为块元素的宽度就是一整行的宽度。