CSS行内盒模型及文字样式

最新推荐文章于 2022-06-30 21:17:06 发布

Taciturn_Grasp

最新推荐文章于 2022-06-30 21:17:06 发布

阅读量328

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/Taciturn_Grasp/article/details/104288226

版权

本文详细介绍了CSS中的行内盒模型，包括内容区、文本基线和行框的概念，以及行高与行间距的计算。同时，讲解了文字样式的设置，如字体家族、行高、文本对齐和文本装饰等。内容涵盖了字体的分类、行内盒模型在复杂情况下的表现，以及垂直对齐方式等。

摘要由CSDN通过智能技术生成

		行内盒模型（inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则

内容区:由font-size决定大小
文本基线:由字体本身的设计决定
行框:由line-height控制最小行框高度
行间距=(line-height – font-size)
行内模型

2.1行内盒模型内容区

内容区:由font-size（文字大小样式）决定大小

文字大小的值常用有两类：
① px
② em（例：1.5em、2em，含义为该文字的大小是父元素文字大小的1.5倍，2倍）

2.2行内盒模型文本基线（ baseline ）
文本基线的位置由该字体中小写字母的底线决定，往往字母的底线要比汉字的底线要高

css中的单位1ex = 该文字中小写字母x的高度
2.3行内盒模型字体样式详解

font-family：字体样式；
常见汉字字体的英文名称：
黑体 SimHei；宋体 SimSun ࿱

关注