理解 line-height

摘要:
1.专有名词理解:线条高度:两条相邻基线之间的距离。有时,为了方便起见,相邻底线之间的距离被视为行高字体大小:顶行和底线之间的间距行距:行高减去字体大小就是行距,它将被分为两部分,顶部一部分,底部副本2。理解行距(1)当行距为固定值时:100px div{border:1pxsolid;line-

1.专有名词理解:

  line-height(行高):两条相邻基线之间的距离,有时为了方便,将相邻底线之间的距离作为行高

   理解 line-height第1张

   理解 line-height第2张

  font-size(字体大小):顶线到底线之间的距离

  行间距:行高减去字体大小就为行间距,会平均分成两部分,顶部一份,底部一份

2.行间距的理解

  (1)line-height为固定数值时:100px

    

div{
    border: 1px solid red;
    line-height: 100px;
}
p{
    font-size: 30px;
    border: 1px solid black;
}


<div>
    <p>段犇</p>
</div>

理解 line-height第3张

子元素可以继承父元素的行高!

div{
    border: 1px solid red;
    line-height: 100px
}

<div></div>

理解 line-height第4张

若只设置行高,而没有子元素填充,只会是一条线

div{
    border: 1px solid red;
    height: 100px
}

<div></div>

理解 line-height第5张

注意height与line-height 的区别

  (2)line-height的值为百分数时:

  

div{
    font-size:50px;
    border: 1px solid red;
    line-height: 150%;
}
p{
    font-size:50px;
    border: 1px solid green;
}
<div>
    <p>段犇</p>
</div>

理解 line-height第6张

若父元素的line-height是百分数,则该父元素的行高为:line-height的值 乘以 父元素字体的大小,子元素会继承父元素的行高

若父元素未规定字体大小,而只规定行高,则会用默认的字体大小值 乘以 line-height的值

  (3)line-height的值如1.5的无单位的小数

   

div{
    border: 1px solid red;
    line-height: 1.5;
}
p{
    font-size:50px;
    border: 1px solid green;
}

<div>
    <p>段犇</p>
</div>

理解 line-height第7张

当line-height的值无单位时,如1.5,则行高为:父元素的line-height值 乘以 子元素的字体大小

总结:通过上面的例子我们得知,文本之间的空白部分,不仅与行高(line-height)有关,还与字体(font-size)有关,

     第一种与第二种实质上是一样的,都是只与父元素有关;而第三种必须结合父元素与子元素

  

免责声明:文章转载自《理解 line-height》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ThinkPhp5 mongodb 使用自定义objectID出错解决ppaer 67 : matlab 函数errorbar下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

移动端css、Js优处理

CSS 篇 0.5px细线 移动端 H5 项目越来越多,设计师对于 UI 的要求也越来越高,比如 1px 的边框。在高清屏下,移动端的 1px 会很粗。 那么为什么会产生这个问题呢?主要是跟一个东西有关,DPR(devicePixelRatio) 设备像素比,它是默认缩放为 100%的情况下,设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2(...

POI设置边框

在做一个电子表格时,边框的设置有时是必不可少的。这一节就来介绍边框,设置时,可以指定边框的位置,边框的种类,边框的顔色。 首先是边框的位置和种类。对单元格设置边框时,有上下左右位置之分,所以POI也准备了四个不同的方法。 上部的边框: setBorderTop public void setBorderTop(short border) set th...

CSS 实现左侧固定,右侧自适应两栏布局的方法

"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。 常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS3中...

asp.net 生成静态页 自动分页

template.html 代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xh...

offsetLeft, offsetTop以及postion().left , postion().top有神马区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...

Ext Js简单面板及工具栏的创建使用

面板是比较基础的组件,很多的组件都是在Panel的基础上封装、创建的,可以把面板理解为一个容器,可以存放一些更多的组件在里面让页面更好看、功能更完善。1.对于Panel中的tbar\bbar\buttons的创建使用(其中和下文中的divId即为页面中一个div标签的id) functiontestPanel1(divId) { var testP...