溢出
当使用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中的一个相同,取决于尺寸小的那一个。