字体的分类

在网页中将字体分成5大类：
                serif（衬线字体）
                sans-serif（非衬线字体）
                monospace （等宽字体）
                cursive （草书字体）
                fantasy （虚幻字体）

斜体和粗体

font-style用来指定文本的斜体
  指定斜体：font-style:italic
  指定非斜体：font-style:normal
font-weight 用来指定文本的粗体
  指定粗体：font-weight:bold
  指定非粗体：font-weight:normal

小型大写字母

font-variant属性可以将字母类型设置为小型大写。字母看起来像是稍微缩小了尺寸的大写字母。
-  font-variant:small-caps

字体属性的简写

font可以一次性同时设置对个字体的样式
语法：
-font:加粗 斜体 小型大写 大小/行高 字体
加粗，斜体和小型大写的顺序无所谓，可以不写，无所谓
大小和字体必须写

行间距

line-height 用于设置行高，行高越大则行间距越大
行间距 = line-height  -  font-size

大写化

text-transform样式用于将元素中的字母全变成大写
大写：text-transform：uppercase
小写：text-transform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none

文本的修饰

text-decoration属性，用来给文本添加各种修饰。
通过它可以问文本的上方，下方，或者中间添加线条
可选值：
-Underline 定义文本下的一条线
-Overline  定义文本上的一条线
-line-through  定义穿过文本下的一条线
-none  标准

字母间距和单词间距

letter-spacing  用来设置字符之间的间距
word-spacing 用来设置单词之间的间距
这两个属性都可以直接指定一个长度或百分数作为值。
正数：增加距离
负数：减少距离
Normal 默认。规定字符间没有额外的空间
Length 定义字符间的固定空间（允许使用负数）
lnherit 规定应该从父元素继承letter-spacing属性的值

对齐文本

text-align用于设置文本的对齐方式。
可选值：
-left: 左对齐
-right:右对齐
-justify:两边对齐
-center:居中对齐

首行缩进

text-indent用来设置首行缩进
该样式需要指定一个长度，并且只对第一行生效

常见的文本设置

color 设置文字的颜色，如： color:red;

font-size 设置文字的大小，如：font-size:12px;

font-family 设置文字的字体，如：font-family:'微软雅黑';

font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

line-height 设置文字的行高，如：line-height:24px;

text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

使用 em 来设置字体大小

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
1
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

可以使用下面这个公式将像素转换为 em：pixels/16=em


italic 和 oblique 的区别？

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。


html里面 i 和 em 标签有区别吗？

主要区别：
<em>是基于内容的样式
<i>一个是基于物理的样式。

<em>是单词emphasis(强调)的缩写
<i>是Italic(斜体字)的缩写


html的什么是块元素跟行内元素?

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

如何让相对定位的元素不占原始位置的空间?

相对定位和绝对定位
定位标签:position
包含属性:relative(相对) absolute(绝对)
1. position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。(再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框)
2. 2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。)
3. 3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。
4. 4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

---------------------
【转载，仅作分享，侵删】
作者：YRyr.*
原文：https://blog.csdn.net/weixin_43152725/article/details/85233077

奈斯，感谢分享