文章目录
前言一、行内元素1.行内元素特征2.行内水平垂直居中 二、块状元素1.块状元素特征2.块状元素水平垂直居中 总结前言
一篇学习回顾，知识总结的博客。
一、行内元素
行内元素最常使用的就是<span>，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
1.行内元素特征
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
2.行内水平垂直居中
/*给父元素设置*/水平居中 text-align: center;
/* 1.子元素 line-height 值为父元素 height 值 *//* 2.单行文本 */垂直居中 line-height 等于 height
例子：
二、块状元素
块状元素代表性的就是<div>，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
1.块状元素特征
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
2.块状元素水平垂直居中
方法1：
父元素：display: table-cell;vertical-align: middle;子元素：margin-left: （父元素宽度-子元素宽度）/2;
例子：
方法2：
绝对定位 position: absolute;注意：子绝父相
给子元素添加position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
优点：无论绝对定位元素的尺寸是多少，它都是水平垂直居中显示的。 缺点：就是兼容性问题。
例子：
方法3：
/* 注意：子绝父相 */给子元素添加position: absolute;width: 宽度;height: 高度;left: 50%;top: 50%;margin-left: -0.5*宽度;margin-top: -0.5高度;
缺点：需要提前知道元素的尺寸。
例子：
方法4：
给父元素添加flex弹性盒子display: flex;align-items: center;justify-content: center;
例子：
方法5：
给子元素添加position: absolute及margin：auto
例子：
总结
这些水平垂直居中方法，都是前端时间学习的过程中用到的过的方法，现在复习总结一下。
