行内盒模型／字体详解

行内盒模型

什么是行内盒模型

1、行内盒模型内容区由font-size（文字大小样式）决定大小。

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

2、文本基线的位置由该字体中的X的小写字母的底线决定

​ css中的单位1ex = 该文字中小写字母x的高度

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

4、行高=(line-height + font-size)

​ line-height取值分两类:
​ ①：px，直接定义固定值
​ ②：倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高的值就为16✖1.5=24px %, 字体按百分比取值，比如line-height， 那么实际行高值为150%;16✖150%=24px

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

字体样式

​ 直接定义类:

​ font-family: Tahoma, “宋体”, SansSerif;

​ 引入类:

​ @font-face {
​ font-family: “Sherry”;
​ src: url(sherry.ttf);
​ }

​ span {
​ font-family: Sherry;
​ }

​ 目前的字体设计领域，字体大致分为两大类
​ 1：Serif（有衬线），多用于网页正文，内容等大量文字内容区域
​ 2：Sans Serif（无衬线），多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域

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

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

​ vertical-align垂直对齐

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

文字样式

​ 文本缩进样式text-indent

​ ext-indent：2em；/文本首行缩进2个字符/
​ text-indent：20px；/文本首行缩进20px/

​ 文本对齐格式text-align

​ text-align：left;/左对齐/ (默认对齐方式) 　 text-align：center;/居中对齐/ 　　 text-align：right;/右对齐/　　　 text-align:justify; /两端对齐/

​ 文本装饰text-decoration

​ text-decoration:underline;/下划线/ text-decoration:line-through;/贯穿线/

​ text-decoration:overline;/上划线/