文章目录
前言一、行内元素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
例子:
总结
这些水平垂直居中方法,都是前端时间学习的过程中用到的过的方法,现在复习总结一下。