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

女爷i 2023-06-11 03:11 5阅读 0赞

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

#### 方法一：已知元素的高宽 ####

.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 不同，它并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。

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