# CSS行内盒模型及文字样式详解

CSS行内盒模型及文字样式详解

1.什么是行内盒模型:

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

文本基线:由字体本身的设计决定

行框:由line-height控制最小行框高度

行间距=(line-height – font-size)

内容区:由font-size决定大小

行间距指的是上下两行文字内容区之间的间距
行高指的是上下两行文字的文本基线之间的最小间距
行高与文字区高度之差就是行间距

line-height取值分两类
1：px，直接定义固定值
2：倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高
的值就为16*1.5=24px

---

2.行内盒模型内容区

内容区:由font-size（文字大小样式）决定大小
文字大小的值常用有两类：
① px
② em（例：1.5em、2em，含义为该文字的大小是父元素文字大小的1.5倍，2倍）

---

3.行内盒模型文本基线（ baseline ）

文本基线的位置由该字体中的X的小写字母的底线决定
css中的单位1ex = 该文字中小写字母x的高度
font-family： 字体样式；
目前的字体设计领域，字体大致分为两大类
1：Serif（有衬线），多用于网页正文，内容等大量文字内容区域
2：Sans Serif（无衬线），多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域

---

4.行内盒模型字体样式详解

使用用户操作系统自带的字体来显示网页内容
1:在用户的操作系统中匹配Tahoma（大河马）字体，如果系统中有该字体，则使用该字体显示内容
2:如果系统无Tahoma字体，则在用户的操作系统中匹配Helvetica字体，如果系统中有该字体，则使用该字体显示内容
3:如果系统无Helvetica（赫维提卡体）字体，则在用户的操作系统中匹配Arial字体，如果系统中有该字体，则使用该字体显示内容
4:如果系统无Arial字体，则在用户的操作系统中的sans-serif（非衬线字体，操作系统自带很多非衬线的字体）中匹配一个，然后使用该字体显示文字

只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。
这些可以应用所有操作系统的字体，被称为网页安全字体
常见汉字字体的英文名称：

黑体	SimHei
宋体	SimSun
新宋体	NSimSun
仿宋	FangSong
楷体	KaiTi
华文黑体	STHeiti
华文楷体	STKaiti
华文宋体	STSong
隶书	LiSu
幼圆	YouYuan

使用程序员自定义的字体来显示网页内容:

①:浏览器临时往操作系统中自定义一个字体，名称叫做sherry
②:浏览器从服务器下载该字体文件，并解析该文件内的具体文字信息
③:p元素中的文字按照浏览器临时自定义的一个字体sherry中具体的设计来显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hw5HjQZ1-1581332196671)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200210150802458.png)]

行内盒模型：上下padding无效，上下margin无效 –

基线baseline、中线middle、顶线top、下线bottom

---

复杂情况下的行内盒模型

文本垂直对齐讲解:

vertical-align垂直对齐

vertical-align：
baseline：使元素的基线与父元素的基线对齐
middle：使元素的中部与父元素的中线对齐
top：使元素及其后代元素的顶部与整行的顶部对齐
bottom：使元素及其后代元素的底部与整行的底部对齐。

文本样式讲解:

文本缩进样式text-indent

文本对齐格式text-align
默认情况:text-align：left;左对齐
text-align：center;居中对齐
text-align：right;右对齐
text-align:justify;两端对齐

文本装饰text-decoration
text-decoration:underline;下划线
text-decoration:overline;上划线
text-decoration:line-through;贯穿线

文本装饰text-decoration
text-decoration:underline;下划线
text-decoration:overline;上划线
text-decoration:line-through;贯穿线