重要!前言必读!
本章节主要学习的是css的溢出,css溢出(overflow)css溢出有5个值:visible、hidden、scroll、auto、inherit以及控制水平方向和垂直方向的内容溢出时的处理方式(overflow-x 和 overflow-y)。
溢出:overflow
注意!overflow是溢出。是指的是当一个元素的内容超过了其容器的边界时所发生的情况,也就是溢出的部分是否会被裁剪,裁剪后的内容是否可见,裁剪后的内容是否可以通过滚动条来查看剩余的内容,要注意默认的溢出是没有被裁剪的,内容依然在元素框外渲染。
- visible(默认,溢出没有被裁剪,内容在元素框外渲染)
- hidden(溢出被裁剪,裁剪的部分的内容不可见)
- scroll(溢出被裁剪,同时添加滚动条可以查看其余内容)
- auto(与scroll类似,但只在必要时添加滚动条)
overflow:visible
注意!overflow:visible是溢出的一个值,它的效果是溢出没有被裁剪,内容在元素框外渲染,也就是溢出的部分不会被裁剪,剩下的部分依然可以显示在页面上,不隐藏,也不删除。
代码图
效果图
overflow:hidden
注意!overflow:hidden是溢出的一个值,它的效果是溢出被裁剪,裁剪的部分的内容不可见,也就是溢出的部分会裁剪掉,裁剪掉的那一部分不可见,可以理解为裁剪掉的那一部分被隐藏了。
代码图
效果图
overflow:scroll
注意!overflow:scroll是溢出的一个值,它的效果是溢出被裁剪,同时添加滚动条可以查看其余内容,要注意这里的滚动条是必添加的,也就是说你使用此属性值,滚动条即使你不需要,它也添加。
代码图
效果图
overflow:auto
注意!overflow:auto是溢出的一个值,它的效果是与scroll类似,但只在必要时添加滚动条,要注意这里的"只在必要时添加滚动条"的意思是当文本内容足够多的时候容器装不下时才会添加滚动条,也就是容器装不下的时候才会添加滚动条。
代码图
效果图
overflow-x 和 overflow-y
注意!overflow-x 和 overflow-y规定是仅水平还是垂直地(或同时)更改内容的溢出。
- overflow-x (指定如何处理内容的左/右边缘)
- overflow-y (指定如何处理内容的上/下边缘)
代码图
效果图