css中的百分比计算方法

这一份笔记主要是来梳理一下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%将不会有任何效果。


 上一篇
圣杯布局和双飞翼布局 圣杯布局和双飞翼布局
圣杯布局圣杯布局是一种常见的CSS布局,它要求: 底部和顶部各自占领屏幕的全部宽度 上下部之间是一个三栏布局 三栏布局两侧宽度不变,中间部分自动填充整个区域 中间部分的高度是三栏中高度最高区域的高度 下面介绍两种实现方式: 浮动实现
2019-06-06
下一篇 
盒子居中方法 盒子居中方法
盒子没有固定的宽和高利用transform在需要居中对齐的块中首先采用绝对定位,其父盒子采用相对定位。然后transform:translate(-50%,-50%);left:50%;top:50% 采用flex布局父盒子采用flex布局
2019-06-06
  目录