CSS行高line-height的个人理解
建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
一、行高的字面意思
“行高“顾名思义指一行文子的高度。具体来说是指两行文子间基线间的距离。
基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基线,是a,c,z,x等字母的地边线。
————————顶线( line)————————————————
——————————中线(middle line)————————————
————————————基线(base line)———————————
———————————————底线(bottom line)——————
vertical-align中有,middle,baseline,bottom与之是有关联的,具体细节如何,浏览器差异怎样,我还是不是很清楚。
由于中午跟英文长得不一样,所以基线的说法就像老太太穿线一一对不上眼。你理解为底线之差也不为不可。只是定义一回事,表现则另一回事。
二、line-height与line boxes高度
先说一个大家熟知的现象,有一个空的div,<div></div>,如果没有设置至少大于1像素高度height值时,该div的高度就是个0.如果该div里面打入了一个空格或是一个汉字 ,则此div就会有一个高度。那么您有没有思考过,为什么div里面有文字后就会有高度呢?
这是个看上去很简单的问题,是理解line-height非常重要的一个问题。可能有人会认为是文子撑开的!文子占据空间,自然将div撑开。我一开始也是这样理解的,事实上,深入理解inline模型后,我发现,根本不是文字撑开了div的高度,而是line-height!哟证明很简单(如下测试代码):
css代码
<!-- lang: css -->
.test1{font-size:20px; line-height:0; border:1px solid #; backgroud:#eeeeee;}
<!-- lang: css -->
.teset2{fon-size:0; line-height:20px; border:1px solid #; backgroud:#eeeeee;}
html代码
<!-- lang: html -->
<div class="test1">测试1</div>
<!-- lang: html -->
<div class="test2">测试2</div>
结果test1 div有文字大小,行高为0,结果div的高度就是个0;test2 div文字大小为0,有行高,为20像素,结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。
到底这个line-height行高怎么就产生了高度呢?在linline box模型中,有个line boxes,这个是看不见的。line boxes的工作就是包裹每行文字。一行文字一个 line boxes。例如”艾佛森退役"这5个字,如果它们在一行显示,你艾佛森再牛,对不起,只有一个line boxes罩着你;”春哥纯爷们“这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计5个line boxes。line boxes什么特性也没有,就是高度。所以一个没有设置height属性的div的高度就是由一个line boxes的高度堆积而成的。
其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下-inline boxes干的,这些手下就是文字啦,图片啦,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>.则line boxes的高度就是40像素了。
“行高“顾名思义指一行文子的高度。具体来说是指两行文子间基线间的距离。
基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基线,是a,c,z,x等字母的地边线。
————————顶线( line)————————————————
——————————中线(middle line)————————————
————————————基线(base line)———————————
———————————————底线(bottom line)——————
vertical-align中有,middle,baseline,bottom与之是有关联的,具体细节如何,浏览器差异怎样,我还是不是很清楚。
由于中午跟英文长得不一样,所以基线的说法就像老太太穿线一一对不上眼。你理解为底线之差也不为不可。只是定义一回事,表现则另一回事。
二、line-height与line boxes高度
先说一个大家熟知的现象,有一个空的div,<div></div>,如果没有设置至少大于1像素高度height值时,该div的高度就是个0.如果该div里面打入了一个空格或是一个汉字 ,则此div就会有一个高度。那么您有没有思考过,为什么div里面有文字后就会有高度呢?
这是个看上去很简单的问题,是理解line-height非常重要的一个问题。可能有人会认为是文子撑开的!文子占据空间,自然将div撑开。我一开始也是这样理解的,事实上,深入理解inline模型后,我发现,根本不是文字撑开了div的高度,而是line-height!哟证明很简单(如下测试代码):
css代码
复制代码
代码如下:<!-- lang: css -->
.test1{font-size:20px; line-height:0; border:1px solid #; backgroud:#eeeeee;}
<!-- lang: css -->
.teset2{fon-size:0; line-height:20px; border:1px solid #; backgroud:#eeeeee;}
html代码
复制代码
代码如下:<!-- lang: html -->
<div class="test1">测试1</div>
<!-- lang: html -->
<div class="test2">测试2</div>
结果test1 div有文字大小,行高为0,结果div的高度就是个0;test2 div文字大小为0,有行高,为20像素,结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。
到底这个line-height行高怎么就产生了高度呢?在linline box模型中,有个line boxes,这个是看不见的。line boxes的工作就是包裹每行文字。一行文字一个 line boxes。例如”艾佛森退役"这5个字,如果它们在一行显示,你艾佛森再牛,对不起,只有一个line boxes罩着你;”春哥纯爷们“这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计5个line boxes。line boxes什么特性也没有,就是高度。所以一个没有设置height属性的div的高度就是由一个line boxes的高度堆积而成的。
其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下-inline boxes干的,这些手下就是文字啦,图片啦,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>.则line boxes的高度就是40像素了。
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键