<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 是参考自身的字体大小进行的比值