那些理解不夠深入的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>
複製代碼