CSS中一些不经意的细节问题1

 

    CSS这样的语法，细节问题非常多，往往一些难以处理的问题，有可能是一些细节问题不到位，所以先记下一些，留给以后自己看看。

 

1.line-height:150%与line-height:1.5 的区别

 

 .main{
   font-size:12px;
   line-height:150%;
   margin:20px;
   border:1px solid #ccc;
 }
 
 .main p{
   font-size:20px;
 }

<div class="main">
    <p>This is a test!</p>
</div>

当父容器为line-height:150%时，子元素P的line-height是按父容器的font-size*line-height来计算得出的是为18px;

 

然后当父容器为line-height:1.5时

 .main{
   font-size:12px;
   line-height:1.5;
   margin:20px;
   border:1px solid #ccc;
 }
 
 .main p{
   font-size:20px;
 }

子元素P的line-height是按父容器的line-height*自己的font-size计算得出的，所以是30px;

虽然是一个小问题，但是在排版的时候，不注意的话，会有意想不到的效果的。