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

最新推荐文章于 2022-03-24 15:51:24 发布

Memodeer

最新推荐文章于 2022-03-24 15:51:24 发布

阅读量234

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_44008645/article/details/104244915

版权

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

01.什么是行内盒模型

在这里插入图片描述

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

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

行内盒模型内容区

在这里插入图片描述

文字大小的值常用有两类：

① px

② em（例：1.5em、2em，含义为该文字的大小是父元素文字大小的1.5倍，2倍）

<style>
	body{
		font-size:20px;
	}
	p{
		font-size:1.5em;/*实际字体大小为20*1.5=30px*/
	}
</style>
<body>
	<p></p>
</body>

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

在这里插入图片描述

font-family：字体样式；

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

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

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

在这里插入图片描述

行内盒模型字体样式详解

使用用户操作系统自带的字体来显示网页内容

<style>
	p{
		font-size:16px;
		font-family:Tahoma,Helvetica,Arial,sans-serif;
	}
</style>
<body>
	<p>hello world</p>
</body>

在这里插入图片描述

只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。

这些可以应用所有操作系统的字体，被称为网页安全字体

字体名称	字体类型	注意
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

… …

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face{
			font-family:"font";
			src:url("font/font.ttf");
		}
		p{
			font-family:font;
		}
	</style>
</head>
<body>
	<p>Hello World</p>
</body>
</html>

行内盒模型行间距

在这里插入图片描述

行内盒模型行高line-height

<style>
	p{
		font-size:16px;
		line-height:26px;
	}
</style>
<body>
	<p>hello world</p>
</body>

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

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

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

line-height****取值分两类

1**：px，直接定义固定值**

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

的值就为16*1.5=24px

在这里插入图片描述

复杂情况下的行内盒模型

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

文本垂直对齐

vertical-align垂直对齐

在这里插入图片描述
垂直对齐不影响块级元素中内容的对齐

vertical-align**：**

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

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

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

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

文字样式讲解

文本缩进样式text-indent

在这里插入图片描述

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

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

文本对齐格式text-align

在这里插入图片描述

text-align:justify**; /***两端对齐*****/

文本装饰text-decoration

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

文本对齐格式text-align

[外链图片转存中…(img-h7Wq1qdj-1581302275506)]

text-align:justify**; /***两端对齐*****/

文本装饰text-decoration

在这里插入图片描述

Memodeer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫