css讲解

一、
height: fit-content;

元素会收缩自己的高度，直到刚好能装下所有文字、图片等子元素为止，既不会多出一块空白，也不会把内容挤出去 常见使用场景

常见使用场景
1.配合绝对定位实现居中
当你把一个元素设为绝对定位（position: absolute），又想让它上下左右居中时，通常需要设置 top: 0; bottom: 0; margin: auto;。但前提是这个元素必须有明确的高度。此时加上 height: fit-content，就能让不定高度的元素完美居中。
2.卡片或标签布局
在制作商品卡片、聊天泡泡或标签时，希望背景色或边框只包裹住文字，不多占空间，fit-content 就非常实用。
常见的坑
虽然它很好用，但在实际开发中有两个常见的失效场景：
在 Flex 布局中经常“失效”
如果你在一个 Flex 容器里给子元素设置 height: fit-content，经常会发现它没反应，子元素依然被拉得很长。
原因：Flex 子元素的默认对齐方式是 align-items: stretch（拉伸），这个拉伸的优先级比 fit-content 高，会强制把子元素拉满容器的高度。
解决办法：给这个子元素加上 align-self: flex-start（取消拉伸），它就能正常收缩了。
不支持 CSS 过渡动画（transition）
如果你想实现一个“鼠标悬停时盒子平滑展开”的动画效果，height: fit-content 是做不到的。

二、.左右两边想要实现等宽flex盒子 哪边内容超出哪边显示省略号
通过 flex: 1 和 min-width: 0 实现等宽布局，确保两侧占据相同空间

flex:1和 min-width:0/* 告诉浏览器：允许我比内容还要小！ */

为什么 min-width: 0 能解决问题
设置 min-width: 0 后：
允许 flex 子元素收缩到比内容更窄
两个单元格的 flex: 1 才能真正发挥作用，平分可用空间
内容超出时，配合 overflow: hidden + text-overflow: ellipsis 显示省略号

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width:100%;display: block;

flex布局左侧固定 用如下 保证左侧不会被挤 不会放大也不会缩小

.left{flex:00100px;}