1. 请介绍flex布局？
flex布局也称为弹性布局，是现下最常用的布局方式。要用好flex布局，就必须了解好其主轴、从轴的概念及各种对齐方式。详细介绍及用法请看我写的另一篇文章《重新认识 WEB 开发与 RN 开发中 position、display 样式的用法及差异》中的display部分。
2. css如何实现垂直居中？
这是前端中经典的面试题。css实现垂直居中的方法有很多，这里介绍常用的三种，都可以实现容器垂直居中。
下面例子中的child容器：
（1）使用flex布局实现垂直居中，这种方法不需要知道child容器的确切高度，如从网络下载图片的图片等，无需知道图片宽高，即可实现垂直居中。
<style>
#container {
width: 100%;
height: 100%;
position: absolute;
background-color: darkseagreen;
display: flex; /*flex布局*/
align-items: center; /*垂直居中*/
}
#child {
width: 200px;
height: 200px;
background-color: crimson;
}
</style>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>（2）使用transform实现垂直居中，这种方法不需要知道child容器的确切高度，同上。
<style>
#container {
width: 100%;
height: 100%;
position: absolute;
background-color: darkseagreen;
}
#child {
width: 200px;
height: 200px;
background-color: crimson;
position: absolute; /*设为绝对定位*/
top: 50%; /*设置坐标原点定位在垂直方向的一半*/
transform: translate(0,-50%); /*在垂直方向往上偏移自身高度的一半*/
}
</style>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>（3）使用margin为默认值实现自动垂直居中，这种方法需要知道child容器的具体宽度和高度。
<style>
#container {
width: 100%;
height: 100%;
position: absolute;
background-color: darkseagreen;
}
#child {
width: 200px;
height: 200px;
background-color: crimson;
position: absolute; /*设为绝对定位*/
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto 0;
}
</style>
<body>
<div id="container">
<div id="child"></div>
</div>
</body>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是没有问题的。
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
