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

1.什么是行内盒模型

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

2.行内盒模型的概念分析

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

2.1 行内盒模型内容区

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

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

font-family： 字体样式；

目前的字体设计领域，字体大致分为两大类

1：Serif（有衬线），多用于网页正文，内容等大量文字内容区域

2：Sans Serif（无衬线），多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域

2.3 行内盒模型字体样式详解

1:在用户的操作系统中匹配Tahoma（大河马）字体，如果系统中有该字体，则使用该字体显示内容。

2:如果系统无Tahoma字体，则在用户的操作系统中匹配Helvetica字体，如果系统中有该字体，则使用该字体显示内容。

3:如果系统无Helvetica（赫维提卡体）字体，则在用户的操作系统中匹配Arial字体，如果系统中有该字体，则使用该字体显示内容。

4:如果系统无Arial字体，则在用户的操作系统中的sans-serif（非衬线字体，操作系统自带很多非衬线的字体）中匹配一个，然后使用该字体显示文字。

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

字体名称	字体类型	注意
Arial	sans-serif	通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier New	monospace	某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。该类字体常用于代码的显示
Hiragino Sans GB	sans-serif	冬青黑体，为苹果系统的默认字体，有较好的中文显示效果
Times New Roman	sans-serif	某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
SimSun	serif	宋体，中文环境下常用的显示字体，在字体样式代码中可以写字体的汉字名称，但是为了最好的兼容性，建议用字体的英文名字

常见汉字字体的英文名称：

黑体 SimHei
宋体 SimSun
新宋体 NSimSun
仿宋 FangSong
楷体 KaiTi
华文黑体 STHeiti
华文楷体 STKaiti
华文宋体 STSong

隶书 LiSu
幼圆 YouYuan

2.4 行内盒模型行间距

2.5 行内盒模型行高line-height

行间距指的是上下两行文字内容区之间的间距

行高指的是上下两行文字的文本基线之间的最小间距

行高与文字区高度之差就是行间距。

line-height取值分两类

1：px，直接定义固定值

2：倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高

的值就为16*1.5=24px

3.复杂情况下的行内盒模型

3.1替换元素对文本行框高度的影响

非替换元素是指内容可以直接在代码中写出来（如文字）

替换元素是指内容存储在代码文件之外，需要通过文件路径引入（如图片，视频，音频等）

3.2单行不同文字大小、行高对行内盒模型的影响

1：先确定最高的行内盒模型，并算出该行内盒模型的文本基线位置，接着将其他行内盒模型的基线与之对齐。

2：行框的最终高度，由行内最高的那个行内盒模型决定。

4.文本垂直对齐讲解

垂直对齐不影响块级元素中内容的对齐

vertical-align：

​ baseline：使元素的基线与父元素的基线对齐

​ middle：使元素的中部与父元素的中线对齐

​ top：使元素及其后代元素的顶部与整行的顶部对齐

​ bottom：使元素及其后代元素的底部与整行的底部对齐。

5.文字样式讲解

5.1 文本缩进样式text-indent

text-indent：1em；/文本首行缩进一个字符/

text-indent：20px；/文本首行缩进20px/

5.2 文本对齐格式text-align

/* center居中   left左对齐   right右对齐   justify两端对齐 */
text-align: justify;

5.3 文本装饰text-decoration

/* text-decoration: none; */（用于a标签链接网页消除下划线）

/* 鼠标样式 */

/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 贯穿线 */
/*text-decoration: line-through;*/