HTML+CSS 面试题-如何垂直居中一个浮动元素？简述 px em rem 的区别。描述一个重置样式的CSS文件并如何使用它。知道 normalize.css 吗？是否了解他们的不同之处？

本文链接：https://blog.csdn.net/weixin_44486539/article/details/102782944

本文讨论了如何在HTML中垂直居中浮动元素，提供了两种方法，并介绍了px、em和rem的区别。此外，还阐述了重置样式CSS文件的作用，以及它与normalize.css的不同之处，强调了reset清除默认样式，而normalize力求样式统一。

摘要由CSDN通过智能技术生成

如何垂直居中一个浮动元素？

方法一：已知元素的高宽

.box {
	background-color: #6699FF;
	width: 200px;
	height: 200px;
	
	/* 主要代码 */
	/* 居中元素设置绝对定位 */
	position: absolute; /* 父元素需要相对定位 */
	top: 50%;
	left: 50%;
	/* 元素二分之一的 width，height*/
	margin-top: -100px ; 
	margin-left: -100px;
}

方法二:未知元素的高宽

.box {
	width: 200px;
	height: 200px;
	background-color: #6699FF;
	/* 主要代码 */
	margin: auto;
	position: absolute; /* 父元素需要相对定位 */
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

那么问题来了，如何垂直居中一个 <img />

<img />的容器进行如下设置后即可居中

.container {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

简述 px em rem 的区别

px：像素，是一个确定的长度单位，大小为固定的值；
em 和 rem 都是相对单位，em 和 rem 的值都不是固定的；
em 是相对于父级元素的字体大小倍数，例如 2em 表示设置为父级的 2 倍大小；
rem 是相对根元素的大小倍数。

浏览器的默认字体大小为 16px；所以未设置默认大小时: 1em = 16px，12px = 0.75em，10px = 0.625em

描述一个重置样式的 CSS 文件并如何使用它。知道 normalize.css 吗？是否了解他们的不同之处？

reset 样式文件的目的就是清除某些浏览器的默认样式，方便css的书写；

normalize 的理念与 reset 不同，它并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。

以上内容均为网上收集整理，仅供参考