一些常用css基础
问题一： calc(100vh) 是100%吗
calc(100vh) 和 100% 在很多情况下可以提供相似的结果，但它们并不完全相同，具体取决于你如何使用它们以及它们应用的上下文。
100vh
100vh代表整个视口（viewport）的高度的100%。视口是指浏览器窗口内部的区域，不包括浏览器的UI元素，如工具栏和标签栏。vh是一个相对视口尺寸的单位，其中1vh等于视口高度的1%。100vh通常用于设置元素的高度以填满整个视口，但这不包括浏览器的滚动条（如果存在的话）。
100%
100%是一个相对父元素的尺寸的单位。当你用100%设置一个元素的高度时，它的大小会根据其父元素的高度来伸缩。- 如果你将
100%应用于一个元素的高度，那么这个元素的高度将等于其父元素的高度。
区别
- 上下文依赖性：
100vh总是相对于整个视口，而100%是相对于父元素的。 - 包含的内容：
100vh包括整个视口，但不包括浏览器的UI元素，而100%仅包括父元素的高度。 - 滚动条：如果页面内容超出视口大小，导致出现滚动条，
100vh不会包括滚动条所占的空间，而100%会根据父元素的实际高度（可能包括滚动条）来计算。
使用场景
- 如果你想要一个元素填满整个视口（不考虑滚动条），使用
100vh。 - 如果你想要一个元素的高度与其父元素的高度相匹配，使用
100%。
总结来说，calc(100vh) 和 100% 在特定情况下可以提供相似的视觉效果，但它们的计算基础和应用场景是不同的。选择使用哪一个取决于你的具体需求和布局结构。
问题二： flex: 1 1 100%; 表示什么意思
在CSS中，flex属性是用于定义Flexbox布局中项目（flex items）的行为的。flex属性是一个简写属性，它合并了以下三个属性：
flex-grow：项目的放大比例，默认为0。它决定了项目在容器中剩余空间的分配方式。flex-shrink：项目的缩小比例，默认为1。它决定了当容器空间不足时，项目可以缩小的程度。flex-basis：项目在分配额外空间之前的默认大小，默认为auto。它可以是任何长度值，如600px、50%等，或者是auto（即项目的原始大小）。
当你设置flex: 1 1 100%;时，它的含义如下：
flex-grow: 1;：项目的放大比例为1，这意味着如果容器中有额外的空间，项目将按照它们flex-grow值的比例分配这些空间。flex-shrink: 1;：项目的缩小比例为1，这意味着如果容器空间不足，项目将按照它们flex-shrink值的比例缩小。flex-basis: 100%;：项目在分配额外空间之前的默认大小为100%，即每个项目占据容器宽度的100%。
综上所述，flex: 1 1 100%;表示每个项目首先占据容器的100%宽度，然后如果有额外空间，它们将等比例放大；如果空间不足，它们也将等比例缩小。这通常会导致所有项目平均分配容器的宽度，即使它们的内容不足以填满容器。如果容器宽度不足以容纳所有项目，它们将缩小以适应容器。
