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

JustGoForIt
221 阅读2分钟

line-height

两行文字基线之间的距离

行内盒子模型的种类

  1. content-area: 内容区域，大小与font-size有关
  2. inline-box: 内联盒子，匿名内联盒子
<p id='p1'>我是一行文本<em>我是em标签</em>我是一行文本</p>

  • 红色表示内联盒子
  • 绿色表示内联匿名盒子
  1. line-box: 行框盒子

每一行就是行框盒子

  1. containing-box: 包含盒子

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

什么是基线

行高

一些思考与疑问

  1. 内联元素的高度是由行高决定的,不是由文字撑开的
<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的定义是两行基线之间的距离，为什么单行文本也有行高，并且还控制了内联元素的高度？

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

  • 内容区域高度只与字号和字体有关，与line-height没有关系
  • 在simsun(宋体)下，内容区域高度等于文字大小
  • 在simsun字体下：font-size + 行间距 = line-height
  1. 行高决定内联元素的高度
  2. 行间距，可大可小，甚至可以是负值，会根据字体的不同自动调整，保证:行高的值 = 内容区域 + 行间距
  3. 如果行框盒子里有多个高度不同的内联盒子，这个时候行框盒子的高度？

  • 为什么line-height可以让单行文本垂直居中

  • 为什么是基线

  • 需要两行吗

avatar
文章
阅读
粉丝