关于css的比值关系

发表于 css3 分类,标签:
<class=>
    <class=>
        
    </>
</>


.fd-contain {
    margin: 0 auto;
    width: 1000px;
    height: 400px;
    font-size: 100px;
    line-height: 100px;
}
.fd-test {
    width: 50%;  /*  500px*/
    left: 10%;  /* 100px*/
    right: 10%;  /* 100px*/
    padding: 10%;  /* padding:100px*/
    margin: 10%;  /* margin:100px*/
    
    
    height: 50%;  /* 200px*/
    top: 10%;  /* 40px*/
    bottom: 10%;   /* 40px*/
    
    
    font-size: 200%; /* font-size:200px*/
    
    line-height: 100%; /*200px */
}


从上图我们可以了解到
 
 width  padding  margin  和  定位中的 left  right 的比值是参考父元素的 width 
 而 height  和  定位中 的top bottom 是参照父元素的高进行的比值
 font-size 是参考父元素的font-size 
 Line-height 是参考自身的字体大小进行的比值

0 篇评论

发表我的评论