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;}