高级前端软件工程师知识整理之样式篇

川长思鸟来 2021-09-18 20:10 349阅读 0赞

### 1. 请介绍flex布局？ ###

flex布局也称为弹性布局，是现下最常用的布局方式。要用好flex布局，就必须了解好其主轴、从轴的概念及各种对齐方式。详细介绍及用法请看我写的另一篇文章[《重新认识 WEB 开发与 RN 开发中 position、display 样式的用法及差异》][WEB _ RN _ position_display]中的display部分。

### 2. css如何实现垂直居中？ ###

这是前端中经典的面试题。css实现垂直居中的方法有很多，这里介绍常用的三种，都可以实现容器垂直居中。

下面例子中的child容器：

（1）使用flex布局实现垂直居中，这种方法不需要知道child容器的确切高度，如从网络下载图片的图片等，无需知道图片宽高，即可实现垂直居中。

（2）使用transform实现垂直居中，这种方法不需要知道child容器的确切高度，同上。

（3）使用margin为默认值实现自动垂直居中，这种方法需要知道child容器的具体宽度和高度。

### 3. 介绍css3中position:sticky ###

position: sticky 定位是指元素在屏幕范围（viewport）时位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。举个例子，有些网站的导航栏，当整个页面往上拖动时，导航栏跟着移动，但当导航栏将要移除浏览器时，它将固定在最顶部不再移动，实现导航栏永远无法移出浏览器界面的效果。

要检查是否支持sticky定位，可以使用：

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
        // 支持 sticky
    }

另外要注意，这个定位在浏览器的兼容上还是有一定的问题，但可以确定的是，在ios系统中Safari是没有问题的。

[WEB _ RN _ position_display]: https://xiaozhuanlan.com/topic/8259714360