2022-03-17 705
在77ISP学技术
每日笔记,CSS overflow 属性,div区域设置。
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值:
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁,其余内容将不可见
scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
auto - 与 scroll 类似,但仅在必要时添加滚动条
注释:overflow 属性仅适用于具有指定高度的块元素。
注释:在 OS X Lion(在 Mac 上)中,滚动条默认情况下是隐藏的,并且仅在使用时显示(即使设置了 "overflow:scroll")。
默认情况下,溢出是可见的(visible),这意味着它不会被裁剪,而是在元素框外渲染:
实例
div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }
如果使用 hidden 值,溢出会被裁剪,其余内容被隐藏:
实例
#overflow-hidden { overflow: hidden; }
若使用 hidden 值,会剪裁溢出,并隐藏内容的其余部分:
尝试删除 overflow 属性以了解其工作原理。
如果将值设置为 scroll,溢出将被裁剪,并添加滚动条以便在框内滚动。请注意,这将在水平和垂直方向上添加一个滚动条(即使您不需要它):
实例
div { overflow: scroll; }
将溢出值设置为 scroll,溢出将被裁剪,并添加滚动条以在框内滚动。请注意,这将在水平和垂直方向上添加滚动条(即使您不需要它):
auto 值类似于 scroll,但是它仅在必要时添加滚动条:
实例
div { overflow: auto; }
值 auto 类似 scroll,只是在必要时添加滚动条:
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地(或同时)更改内容的溢出:
overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。
div { overflow-x: hidden; /* 隐藏水平滚动栏 */ overflow-y: scroll; /* 添加垂直滚动栏 */ }
您还可以水平或垂直地改变内容的溢出(方式)。
overflow-x 规定如何处理内容的左/右边缘。
overflow-y 规定如何处理内容的上/下边缘。
属性 |
描述 |
overflow | 规定如果内容溢出元素框会发生什么情况。 |
overflow-x | 规定在元素的内容区域溢出时如何处理内容的左/右边缘。 |
overflow-y | 指定在元素的内容区域溢出时如何处理内容的上/下边缘。 |
原文链接:https://77isp.com/post/716.html
=========================================
https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2023-01-07
网站技术 2022-11-26
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态