精华内容
下载资源
问答
  • 真正的能理解CSS中的line-height,height与line-height

    万次阅读 多人点赞 2018-09-20 15:48:21
    在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。 基本...

    在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。

    基本概念

    行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font-size存在什么关系呢,line-height与所属元素的height又有什么联系呢?。好了,带着疑问,我们一同探究。
    行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。
    在这里插入图片描述
    从上图我们就可以看出,行距、font-size与line-height之间的关系了吧。接下来进一步来看看这三者关系
    在这里插入图片描述
    当font-size等于line-height时,行距 = line-height - font-size = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠,如下图:
    在这里插入图片描述
    关于CSS boxes的四种类型(containing boxes、inline boxes、line boxes、content area)和line-height五种取值方法(line-height:normal;、line-height:inherit;、line-height:120%;、line-height:25px;、line-height:1.2)。参见以下资料:
    深入了解css的行高Line Height属性
    [学习笔记] css中的line-height
    接下来将讲一讲height和line-height的联系
    CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。以一个div为例,来进一步说明两个问题:
    第一个问题:如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值。不防来写段代码进行直观的说明

    CSS:
        .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
    html:
    	<div class="test1">测试</div>
    

    显示结果(图1):
    在这里插入图片描述

    CSS:
        .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
    html:
    	  <div class="test2">测试</div>
    

    显示结果(图2):
    在这里插入图片描述
    由图1和图2可知,在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。
    第二问题:div的height与line-height的大小关系不同时,会有什么显示结果呢?
    (1)height = line-height时
    在这里插入图片描述
    (2)height>line-height时
    在这里插入图片描述
    (3)height<line-height时
    在这里插入图片描述
    可以通过“测试”两个字在页面上的位置,能反映出height与line-height的大小关系。如果通过上面的学习,没有疑问的话,可以说初步理解了line-height。
    如若以上并没有使你柳暗花明,敬请谅解,如果有什么问题,可留言我们讨论。

    展开全文
  • 首先要说一下line-height在api中的语法是: line-height:normal | | | ; line-height:主要是设计元素的行高, 我们现在这里假设font-size:24px; 1.首先是px的,设置行高是15px的话,那么我们得到的行高...

    看到一道面试题据说是最基础的东西,但是发现我还是不太清楚(css会用但是太细节的真心记不住)下面就在博客上记录一下:

    首先要说一下line-height在api中的语法是:

    line-height:normal | <length>| <percentage>| <number>

    line-height:主要是设计元素的行高,

    我们现在这里假设font-size:24px;

    1.首先是px的,设置行高是15px的话,那么我们得到的行高自然也是15px;没什么区别的;

    2.如果是em的话,首先要看看默认的网页的字体像素,通常都是16px,所以说1em=16px。而对于本文中设置了24px,所以说1.5em就是1.5*24=36px;就是说行高设置了36px;

    3.下一种百分比,我们同样要换算成px的,百分比也是基于当前字体尺寸的,100%=1em;在本题中是150%就是说为1.5em,就是1.5*24=36px;

    4.最后一种是数值的,没有任何的单位,也被称为因子方式,使用因子方式定义line-height是非常安全的方式,将可以避免文字重叠的现象。因子方法的数值是县继承后计算的,而其他的三个是先计算在继承的,所以如果说是按照理他最近的那个子元素的font-size乘上1.5;

    最后用例子总结一下区别:

    出一道题看看和你想的一样吗?:

    以这个为例子第7行现在是1.5那么结果就是,首先文字不会发生重叠,单行行高是1.5*48=72px;(注意因为这里为了展现出重叠效果所以写了大量的文字,总的行高是要在乘上行数的,不过一定是72的倍数)。

    第7行是1.5em和150%或者是36px,最后都是单行行高为36px,和div2里面的48没关系,是有div1的24*1.5决定的。三者都会发生文字重叠现象......

    大家可以自己试试,图片插不进来了

    所以说这里要知道的就是1em=16px=100%;

    展开全文
  • 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。 ...

    在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉。在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别。

    基本概念
    行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font-size存在什么关系呢,line-height与所属元素的height又有什么联系呢?。好了,带着疑问,我们一同探究。
    行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。

    从上图我们就可以看出,行距、font-size与line-height之间的关系了吧。接下来进一步来看看这三者关系

    当font-size等于line-height时,行距 = line-height - font-size = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠,如下图:

    关于CSS boxes的四种类型(containing boxes、inline boxes、line boxes、content area)和line-height五种取值方法(line-height:normal;、line-height:inherit;、line-height:120%;、line-height:25px;、line-height:1.2)。参见以下资料:
    深入了解css的行高Line Height属性
    [学习笔记] css中的line-height
    接下来将讲一讲height和line-height的联系
    CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。以一个div为例,来进一步说明两个问题:
    第一个问题:如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值。不防来写段代码进行直观的说明

    CSS:
        .test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;} 
    html:
        <div class="test1">测试</div>
    1
    2
    3
    4
    显示结果(图1):


    CSS:
        .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
    html:
          <div class="test2">测试</div>
    1
    2
    3
    4
    显示结果(图2):

    由图1和图2可知,在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。
    第二问题:div的height与line-height的大小关系不同时,会有什么显示结果呢?
    (1)height = line-height时

    (2)height>line-height时

    (3)height<line-height时

    可以通过“测试”两个字在页面上的位置,能反映出height与line-height的大小关系。如果通过上面的学习,没有疑问的话,可以说初步理解了line-height。
    如若以上并没有使你柳暗花明,敬请谅解,如果有什么问题,可留言我们讨论

    展开全文
  • line-height

    2021-04-03 15:42:22
    根据MDN定义,对于块级元素,line-height决定了line-box的最小高度,而对于非替换行内元素,line-height用于计算line-box的高度。 <div class="father"> <span>hhhhhh</span> </div> ....

    根据MDN定义,对于块级元素,line-height决定了line-box的最小高度,而对于非替换行内元素,line-height用于计算line-box的高度。

         <div class="father">
             <span>hhhhhh</span>
         </div>
    
          .father{
              line-height:40px;
          }
          .son{
              line-height: 30px;
          }
    

    在这里插入图片描述
    在这里插入图片描述
    span元素前面有一个幽灵空白节点,line-height继承了父元素的,为40px,作用在行框上,而span元素的line-height仅仅为30px,两者取大,所以30px被覆盖了。
    line-height和font-size
    当line-height<font-size时,内联盒子的位置逐渐向文字中间靠近,当line-height=0时,内联盒子在文字中间靠上的位置。

            <div class="father">
             <span>aaa</span>
         </div>
    
         span{
              line-height:8px;
              font-size:10px;
          }
    

    在这里插入图片描述
    在这里插入图片描述
    另外鼠标点击span元素获取到的是span元素的em-box。
    行框的确定:先由每个盒子的line-height确定内联框和基线的位置关系,例如line-height=0时,内联框在基线的上方大约1/2 x-height,再根据vertical-align确定每个内联盒子垂直方向的位置,最后由最低和最高的盒子确定行框高度。
    line-height加在所有内联元素上面(前面有个幽灵空白节点默认为内联元素):

            <div class="father">aaaaa</div>
         <span class="justify">hhhhh</span>
    
        body{
             margin: 0;
             line-height:0;
         }
         .father{
             line-height: normal;
         }
          .justify{
              border-top:1px solid #ccc;
          }
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    line-height加在单独一个内联元素上面:

          .justify{
              border-top:1px solid #ccc;
              line-height:0;
          }
    

    在这里插入图片描述
    在这里插入图片描述

    只利用line-height让文字与图标天然垂直对齐(必须让伪元素line-height=父元素图标height,或大或小都会影响图表的位置,利用line-height上下等分使得文字高度的一半与图标中心对齐,无论怎么改变font-size始终对齐。)

            <div class="father">
                <i></i><span>哈哈哈哈</span>
            </div>
    
         .father{
             line-height:20px;
             font-size: 80px;
             margin-top: 40px;
         }
         i{
            display: inline-block;
            width:20px;
            height:20px; 
            background: url(./image/喵.JPG);
             background-size: 100%;
             text-indent: -999em;
         }
         i::before{
             content: "fuck";
         }
    

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。 父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到...
  • 父元素设置 line-height:1.5 会直接继承给子元素,子元素根据自己的 font-size 再去计算子元素自己的 line-height 。 父元素设置 line-height:150% 是计算好了 line-height 值,然后把这个计算值给子元素继承,子...
  • line-height1.5和line-height:150%的区别 一、区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。 父...
  • 先上结论: 数字的时候,子元素的行高 = 子元素的字体大小 * 数字 百分比和em单位时,子元素...line-height:150%;font-size:16px;width:300px"&gt; 父元素内容 &lt;div style="font-size:30px...
  • 1.给你个数,孩子自己算吧line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。 2.老子说多大就是多大line-height:150% 父元素设置...
  • 先上结论: 1. 数字的时候,子元素的行高 = 子元素的字体大小 * 数字 2. 百分比和em单位时,子元素的...line-height:150%;font-size:16px;width:300px"&gt; 父元素内容 &lt;div style="f...
  • line-height:150% 是继承父元素的距离 line-height:1.5 是计算各子元素的距离 1、当line - height 为百分比时: body{ font-size:14px; line-height:150%; } p{ font-size:21px; }  结果就是: body{ line-...
  • CSS行高line-height默认值normal以及line-height与盒子的关系
  • line-height继承性 height 背景填充
  • 今天看到一篇文章,说的是CSS学习中的瓶颈,我最近也发现自己css很薄弱,写的样式总是有兼容性问题,要写很久,发现了一个问题,我从来没有用过line-height:150和line-height:1.5,都是直接用xxpx的,所以一直不知道...
  • line-height:150%, line-height:1.5的区别

    千次阅读 2012-11-26 11:19:26
    主要区别还是1.5内部继承的是未经过计算的,line-height:150%是经过计算的。 因为line-height:继承属性和其他css不一样的地方是根据font-size:px数值进行计算的  我们都知道line-height是可以继承的,由于这个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,790
精华内容 12,316
热门标签
关键字:

line-height