CSS line-height概念与举例
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37
定义
两行文字基线之间的距离。
基线的大体位置
基线的位置可以看成x字母下边缘的位置。
不同字体的基线位置会有微小的差别。
文本中的几条线:
行高示意图:
一行文本的行高为:上间距 + 文本的高度+下间距,并且上间距是等于下间距的。
我们还可以基本上这样认为:行高是两行文字基线之间的距离,也是两行文字顶线之间的距离,两行文字中线之间的距离。
行内框盒子模型
- 内容区域 content area
- 内联盒子 inline boxes
- 行框盒子 line boxes
包含盒子 containing box
内容区域 content area
围绕盒子看不见的区域,大小与font-size相关,高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。
内容区域只与字号与字体有关,与行高无关!
在宋体字体下,内容区域高度 = 字体大小。在其他字体下,内容区域高度 ≈ 字体大小
内联盒子 inline boxes
内联盒子不会让内容成块显示,而是显示成一行,如果外部包含inline标签的话(span,a,em等),则属于内联盒子。如果只有文字的话,就是"匿名内联盒子"。
行框盒子 line boxes
每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成的。
包含盒子 containing box
由一行一行的行框盒子组成的。
总之:包含盒子包括行框盒子包括内联盒子
line-height的属性值
- 对于块级元素,line-height指定了元素内部line-boxes的最小高度
- 对于非替代行内元素,line-height用于计算line-box的高度
对于替代行内元素,例如input、button,line-height没有影响
normal
取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。
line-height: normal;
number
所用的值是无单位数值乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。
line-height: 3.5;
length
指定 用于计算 line box 的高度。
line-height: 3em;
percentage
与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。
line-height: 34%;
inherit
IE8+
input框等元素默认行高是normal,可以使用
line-height: inherit ;
让元素可控性更强。
line-height:1.5、line-height:150%、line-height:1.5em的区别
em的效果跟%是一样的。
line-height:1.5
所有可继承元素根据font-size重新计算行高。
<div id="father"><div id="son">我的font-size为60px</div>
</div>
#father{font-size:12px;line-height:1.5;width:300px;
}
#son{font-size:60px;color:white;
}
此时,#son元素的line-height为60*1.5=75px;
line-height:150%/line-height:1.5em
当前元素根据font-size计算行高,将计算出来的值继承给下面的元素。
<div id="father"><div id="son">我的font-size为60px</div>
</div>
#father{font-size:12px;line-height:150%;width:300px;
}
#son{font-size:60px;color:white;
}
此时#son元素的line-height为12px*150%=18px。因为#son元素的文本框高度是60px,所以#son元素的半行间距约等于(18-60)/2 = -21px;所以#son元素内的两行字重合在一起了。
推荐使用无单位数值给line-height赋值
line-height与图片的表现
<div><img src="muke/resource/photo/1_0.jpeg">
</div>
div{background-color: #abcdef;
}
img{width: 300px;height: 300px;
}
注意到图片下方有很窄的一条空隙,使得图片的高度不能填充父容器的高度。
现在在图片之后加入一些文字的话:
<div><img src="muke/resource/photo/1_0.jpeg"><span>xxxx我是图片之后的文字</span><br>
</div>
div{background-color: #abcdef;
}
img{width: 300px;height: 300px;
}
span{background-color: white;
}
注意到图片底部是与字母x的下边缘(基线)对齐的,所以我们可以联想到,图片为了与之后文字的基线对齐(图片之后没有文字可以想象成有文字),所以图片下面才有了一小段空隙。为什么图片要与文字的基线对齐呢?因为vertical-align的属性默认是baseline。以后有时间再细细研究一下vertical-align这个属性。
如何消除图片下面的空隙
- 图片底线对齐
img{width: 300px;height: 300px;vertical-align:bottom;
}
这样的话图片就与文字的底线对齐,也就消除了空隙。
- 图片块状化
img{width: 300px;height: 300px;display:block;
}
因为vertical-align这个属性只对行内元素有效,所以将图片变为块状元素可以使得vertical-align:baseline失效。
- 行高足够小,使得基线上移
div{background-color: #abcdef;line-height:0;
}
这里有个疑问,此时基线按理说应该比图片底端还要向上,为什么图片没有与基线对齐?
单行文本垂直居中原理
<div>单行文本垂直居中
</div>
div{background-color: #abcdef;height: 300px;line-height: 300px;
}
文字居中,即文字内容区域的一半 + 内容区域顶部到父容器上边缘 = 父容器高度的一半。而内容区域顶部到父容器上边缘 = 上间距 = 下间距,所以文字内容区域 + 上间距 + 下间距 = 父容器高度。因为文字内容区域 + 上间距 + 下间距 = line-height,所以当line-height = height时,单行文本居中。也就是文本的中线与父容器的中间线近似重合。
多行文本居中
<div id="father"><div id="son">多行文本垂直居中<br>多行文本垂直居中<br>多行文本垂直居中<br></div>
</div>
#father{line-height:300px;background-color: #abcdef;height: 300px;
}
#son{line-height: normal;display: inline-block;vertical-align: middle;border: 1px red solid;
}
多行文本居中,我们可以将这多行文本看成一个整体,即一行,问题转换为上面的单行文本居中,所以我们让父元素的height = line-height。为了覆盖掉继承过来的line-height,我们在#son元素中使用line-height:normal。看下效果:
貌似偏上了一些,为了让整体文本的中线与父容器的中间线近似重合。我们可以添加vertical-align: middle。让整体放置于父元素的中部,效果就是本节开始的那张图片的效果。
参考资料:http://www.imooc.com/learn/403
http://www.imooc.com/article/7767
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
转载于:https://www.cnblogs.com/zhangyachen/p/8035661.html
CSS line-height概念与举例相关推荐
- CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色 背景 大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
- [css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
- [css] css的height:100%和height:inherit之间有什么区别呢?
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子 不过inh ...
- 解决css中height:100%失效的问题
解决css中height:100%失效的问题 参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
- Line Phone概念手机的设计感悟
文/田飞 湖南工业大学青年教师田飞设计的Line Phone概念手机是2011年芙蓉杯国际工业设计大赛"数字产品与服务设计类"金奖获奖作品.Line Right any natur ...
- html如何设定盒子的高,css 高度height设置
css height[css 高度]教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局都会用到css高度height样式,特别是布局局部时 ...
- CSS的基本概念———每天一遍小知识
前言 这是我学习了这个网站整理的笔记,接下来还会持续更新. 这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不 ...
- CSS中height:100vh和height:100%的区别是什么?
CSS中height:100vh和height:100%的区别 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
- CSS的基础概念、行内样式(内嵌样式)、内部样式(内联样式)、外部样式(外联样式)、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表 标签:<p> <div>-之类的标签 使用方式:直接输入标签名 类(class):cla ...
- html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
最新文章
- MySQL中的主键、唯一键、外键对比
- 新手探索NLP(九)——文本摘要
- dataset string dataset
- Android 从清单配置文件元数据中获取值
- CF A. DZY Loves Hash
- android通过webservice连接SQL数据库(一)服务器端
- 十八般武艺玩转GaussDB(DWS)性能调优:总体调优策略
- UVA 357 - Let Me Count The Ways
- AI PRO I 第4章
- 如何检查您的 Android 设备是否支持 Widevine DRM
- Arcis矢量化边界问题处理
- 华为服务器虚拟化:Fusion Compute基础教程
- Ticket管理工具:Redmine
- 计算机视觉基础(五)——图像分割/二值化
- 找到服务器系统日志,查看服务器系统日志
- ubuntu安装fcitx五笔拼音输入法_Simplelife_新浪博客
- nginx中deny和allow详解
- 【SG建模同步】基于system generator的QAM载波同步和时间同步FPGA建模
- 2021年上半年软件设计师上午真题及答案解析(三)
- 我的博客园博客设计更新记录