这一份笔记主要是来梳理一下css中涉及到的%计算。下面进入正题:
css当中常用的属性百分比
| 属性 | 解析 |
|---|---|
| width | 基于父元素的width |
| height | 基于父元素的height |
| margin(top,bottom,left,right) | 基于父元素的width |
| padding(top,bottom,left,right) | 基于父元素的width |
| left,bottom,right,top | left/right基于父元素的width,top/bottom基于父元素的height |
| font-size | 基于继承得到的font-size |
| line-height | 基于自身的font-size |
| translate(x,y) | 基于自身的width和height |
注意:
给子元素设置height:50%;,会基于父元素的height来计算,但是这种情况必须是父元素显示的在css上面写上height等于多少,如果没有写,那么父元素div1的高度就是自动撑开的,那么子元素里的height:50%将不会有任何效果。