zoukankan      html  css  js  c++  java
  • line-height:150%与line-height:1.5的区别

         今天看到一篇文章,说的是CSS学习中的瓶颈,我最近也发现自己css很薄弱,写的样式总是有兼容性问题,要写很久,发现了一个问题,我从来没有用过line-height:150和line-height:1.5,都是直接用xxpx的,所以一直不知道这2者竟然有区别,长见识了。下面说下2者的区别:      

    • 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
    • 父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

        如:

    父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;

    那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。

     

    父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;

    那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。

     

    -----------------------------------------------------------------------------------------------------------------

    最近的自己有点浮躁,在学习的道路上任重而道远啊。。。

     

    欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
  • 相关阅读:
    form表单中name和id区别
    为什么我做网站开发不使用前端框架
    设置GridView表头的背景图片
    input文本框隐藏边框
    如何在asp.net页面使用css和js
    HTML与XHTML的差别
    asp.net实现关闭当前网页功能
    asp.net判断文件或文件夹是否存在
    asp.net自定义错误页面
    asp.net中textbox获得焦点后清空默认文本
  • 原文地址:https://www.cnblogs.com/lulu-beibei/p/6951440.html
Copyright © 2011-2022 走看看