CSS溢出

溢出

当使用width，height等设置了盒子的大小之后，放到里面的东西太多，可能就会发生溢出。

overflow属性

overflow属性的各种值

• 默认值是visible;
• 如果想在溢出的时候将内容直接隐藏掉，那么就要设置为overflow:hidden；
• 如果想加个滚动条，就要设置为overflow:scroll；无论内容是否溢出，滚动条都会在。
• 也可以在某一个方向上设置滚动条，overflow-x:scroll; overflow-y:scroll;；
• 另外对一个长单词的处理可以参考word-break, overflow-wrap
• 如果想让滚动条只有在内容比较多时才出现，设置为overflow:auto;

text-overflow定义如何向用户表示存在被隐藏的溢出内容。在设置了overflow:hidden的情况下起作用。
text-overflow: clip;:默认值，意思是在内容区域的极限处截断文本。
text-overflow: ellipsis;:用省略号表示被截断的文本。

min-和max-

min-height设置一个最小高度，当文本内容超出，高度会随着增加，避免溢出。
max-width常用于在没有足够的宽度展示图像时，使图像缩小。使图片响应式变大变小。

视口单位

视口，即在浏览器中看到的部分页面。视口宽度：vw；视口高度:vh。1vh等于视口高度的1%。根据视口可调节盒子大小。

object-fit

css中将图像和视频描述为替换元素。也就是说CSS不能影响这些元素的内部布局，只能操作他们在页面上和其他元素之间的位置。使用object-fit，替换元素可以以多种方式被调整到合乎盒子的大小。
object-fit: fill:替换元素的内容正好填充元素的内容框。会被拉伸以填满整个框。不保留宽高比。
object-fit: contain:替换元素保持其宽高比进行缩放。可能存在被添加黑边的情况。
object-fit: cover:替换元素保留宽高比的同时填充整个框。在宽高比与内容框不匹配时，替换元素会被裁减。
object-fit: none:保持原有尺寸。
object-fit: scale-down：与none或者contain中的一个相同，取决于尺寸小的那一个。