那些理解不够深入的CSS属性

时间 2019-11-06

标签那些理解不够深入 css 属性栏目 CSS 繁體版

原文原文链接

line-height

两行文字基线之间的距离css

行内盒子模型的种类

content-area: 内容区域，大小与font-size有关
inline-box: 内联盒子，匿名内联盒子

<p id='p1'>我是一行文本<em>我是em标签</em>我是一行文本</p>
复制代码

红色表示内联盒子
绿色表示内联匿名盒子

line-box: 行框盒子

每一行就是行框盒子bash

containing-box: 包含盒子

一行一行的line-box组成包含盒子字体

什么是基线

行高

一些思考与疑问

内联元素的高度是由行高决定的,不是由文字撑开的

<body>
	<style type="text/css">
		#p1{
			font-size: 30px;
			line-height: 0;
			background: red;
			border: 2px solid #ccc;
		}
		#p2{
			font-size: 0;
			line-height: 30px;
			background: red;
			border: 2px solid #ccc;
		}
		#p3{
			background: red;
			border: 2px solid #ccc;
		}
	</style>
	<p id='p1'>我是一行文本<em>我是em标签</em>我是一行文本</p>
	<p id='p2'>我是一行文本<em>我是em标签</em>我是一行文本</p>
	<p id='p3'>我是一行文本<em>我是em标签</em>我是一行文本</p>
</body>
复制代码

2. line-heigth的定义是两行基线之间的距离，为何单行文本也有行高，而且还控制了内联元素的高度？

单行文本的高度不是行高，单行文本的高度=内容区域+行间距，这个距离恰好和行高的值相等。ui

内容区域高度只与字号和字体有关，与line-height没有关系
在simsun(宋体)下，内容区域高度等于文字大小
在simsun字体下：font-size + 行间距 = line-height

行高决定内联元素的高度
行间距，可大可小，甚至能够是负值，会根据字体的不一样自动调整，保证:行高的值 = 内容区域 + 行间距
若是行框盒子里有多个高度不一样的内联盒子，这个时候行框盒子的高度？

为何line-height可让单行文本垂直居中spa
为何是基线code
须要两行吗cdn