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

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

1. 请介绍flex布局？

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

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

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

下面例子中的child容器：

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

  1. <style>
  2.     #container {
  3.         width: 100%;
  4.         height: 100%;
  5.         position: absolute;
  6.         background-color: darkseagreen;
  7.         display: flex;  /*flex布局*/
  8.         align-items: center; /*垂直居中*/
  9.     }
  11.     #child {
  12.         width: 200px;
  13.         height: 200px;
  14.         background-color: crimson;
  15.     }
  16. </style>
  18. <body>
  19.     <div id="container">
  20.         <div id="child"></div>
  21.     </div>
  22. </body>

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

  1. <style>
  2.     #container {
  3.         width: 100%;
  4.         height: 100%;
  5.         position: absolute;
  6.         background-color: darkseagreen;
  7.     }
  9.     #child {
  10.         width: 200px;
  11.         height: 200px;
  12.         background-color: crimson;
  13.         position: absolute; /*设为绝对定位*/
  14.         top: 50%; /*设置坐标原点定位在垂直方向的一半*/
  15.         transform: translate(0,-50%); /*在垂直方向往上偏移自身高度的一半*/ 
  16.     }
  17. </style>
  19. <body>
  20.     <div id="container">
  21.         <div id="child"></div>
  22.     </div>
  23. </body>

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

  1. <style>
  2.     #container {
  3.         width: 100%;
  4.         height: 100%;
  5.         position: absolute;
  6.         background-color: darkseagreen;
  7.     }
  9.     #child {
  10.         width: 200px;
  11.         height: 200px;
  12.         background-color: crimson;
  13.         position: absolute; /*设为绝对定位*/
  14.         top: 0px;
  15.         bottom: 0px;
  16.         left: 0px;
  17.         right: 0px;
  18.         margin: auto 0;
  19.     }
  20. </style>
  22. <body>
  23.     <div id="container">
  24.         <div id="child"></div>
  25.     </div>
  26. </body>

3. 介绍css3中position:sticky

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读