面经篇-CSS篇

xdf 面经

介绍

记录、复习、巩固、拓展、总结
都是随机面经，会持续更新添加......

# 水平垂直居中有几种方式(常用)？

flex布局将父元素设置为flex容器，并通过align-items: center;justify-content: center;属性即可实现子元素的水平垂直居中。

.container {  
  display: flex;  
  align-items: center; # 垂直居中  
  justify-content: center; # 水平居中 
  height: 100vh; # 指定高度
}

1
2
3
4
5
6

CSS 绝对定位 + 负边距

    .container {  
      position: relative; 
      height: 100vh; # 指定高度
    }
    .child {  
      position: absolute;  
      top: 50%;  
      left: 50%; # 果需要水平居中 
      transform: translate(-50%, -50%); # 更优的选择，无需计算负边距
      width: 200px; # 已知宽度  
      height: 100px; # 已知高度 
    }

1
2
3
4
5
6
7
8
9
10
11
12

CSS 绝对定位 + margin: auto

   .container {  
      position: relative;  
      height: 100vh; # 或指定高度  
    }  
    .child {  
      position: absolute;  
      top: 0;  
      bottom: 0;  
      left: 0;  
      right: 0;  
      margin: auto; # 四个方向都是auto，将子元素居中 
    }

1
2
3
4
5
6
7
8
9
10
11
12

CSS 绝对定位 + 减去各自宽高个一半

   .container {  
      position: relative;  
      height: 100vh; # 或指定高度  
    }  
    .child {  
      position: absolute;
      width: 100px;  
      top: 50%;  
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }

1
2
3
4
5
6
7
8
9
10
11
12

Grid布局通过设置place-items: center;属性，可以同时实现水平和垂直居中。

    .container {  
        display: grid;  
        place-items: center; # 水平垂直居中  
        height: 100vh; # 指定高度
    }

1
2
3
4
5

CSS 表格布局

   .container {  
      display: table;  
      height: 100vh; # 指定高度  
      width: 100%;
    }  
    .child {  
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

1
2
3
4
5
6
7
8
9
10

# flex: 2 有用过吗？

flex: 2 是在Flexbox布局中经常使用的一个简写属性，它实际上是flex-grow, flex-shrink, 和 flex-basis 的简写。当你设置 flex: 2 时，你实际上是在说 flex-grow: 2; —— 表示这个flex项目（子元素）有能力放大，并且它的放大比例是2。如果有额外的空间，这个元素将会比其他flex-grow值较小的元素占据更多的空间。
flex-shrink: 1; —— 默认情况下，如果flex-shrink没有被明确指定，那么它的值是1。这意味着如果容器空间不足，这个元素将会缩小，但是因为你只指定了flex: 2，所以flex-shrink的1是隐式的。其值表示当空间不足时，该元素的缩小比例。
flex-basis: auto; —— 默认情况下，flex-basis是auto，意味着项目占据的主轴空间（在默认情况下是水平方向）是其原来的大小。但是，如果你明确设置了flex-basis的值（比如百分比、长度值等），那么这个值将决定元素在分配多余空间之前的默认大小。然而，在flex: 2这样的简写中，flex-basis并没有明确指定，所以它默认为auto。

xdf_blog

Choose mode