1. 请解释一下CSS reset和normalize.css的作用和区别。
CSS reset是指用一组CSS规则将浏览器提供的默认样式全部重置,使得所有元素的默认样式完全一致。而normalize.css则是对默认的HTML元素样式进行一些良好的初始化和规范化,只保留有用的默认样式,使得所有浏览器的默认样式都是一致的,同时处理了许多其他浏览器兼容性问题,而且保留了有意义的默认样式。
2. 请解释一下Em和Rem的区别。
Em和Rem都是相对于父元素字体大小的单位。但Em是相对于父元素的字体大小,而Rem是相对于根元素(即html元素)的字体大小。Rem相对的是文档流,页面上的任何一个元素的Rem值相同,不会像Em随层级的深入而变化。
3. 如何清除浮动?
可以使用clearfix技巧,即在浮动元素末尾添加一个空标签并清除它的浮动,如下所示: .clearfix::after { content: ""; display: block; clear: both; }
4. 请解释一下BFC的概念和作用。
BFC(块级格式化上下文)是一个独立的渲染区域,具有自己的布局规则。通过创建BFC,可以隔离部分盒模型,使得它们不会影响到外面的元素。常见的创建BFC的方法有float、position、display为table-cell和inline-block等。BFC还可以解决外边距重叠问题等布局问题。
5. 如何实现垂直居中?
通常有三种方法来实现垂直居中: (1) 使用display:flex和align-items:center使父元素居中对齐子元素。 (2) 使用relative+absolute的方案,取父元素的高度,在子元素上下padding相同高度,在子元素内使用absolute+top:50%;margin-top:-子元素高度/2。 (3) 使用table实现,将父元素设置为display: table-cell; vertical-align: middle; 子元素为display:inline-block;
以上是一些经典的CSS面试问题,希望能对有需求的人提供帮助。