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是没有问题的。