css百分比问题

前言

在学习css的时候，总是对百分比的概念不是很清晰，因此想通过写这篇文章，理清自己的思路，巩固自己所学的知识,也方便日后概念模糊的时候查看。

相关属性的属性值为百分比计算规则:

• width: 根据包含块的width
• height: 根据包含块的height
• padding: 根据包含块的width值
• margin: 根据包含块的width值
• border-width: 不能设置百分比
• line-height:根据元素本身的字体大小
• font-size: 根据浏览器默认字体大小，一般为16px
• top、bottom、left、right:left 和right 是根据包含块的width计算的，top和bottom 是根据包含块的height计算的。
• max-height、min-height、min-width和max-width： 同width 、height一样的规则

关于包含块containing block的概念

包含块不一定指父元素,对处于普通文档流及设置了浮动的元素而言，包含块指的是父元素，而对于绝对定位元素而言，则是指最接近它的是定位元素的包裹层。