overflow属性我会用，但overflow-x和y不明白啥意思

Posted 2023-03-21

overflow-x 水平溢出
overflow-y 垂直溢出
呈现的效果是怎么样的？

基本语法
overflow-x : visible | auto | hidden | scroll

语法取值
visible :　 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，
对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :　 在必需时对象内容才会被裁切或显示横向滚动条
hidden :　 不显示超过对象尺寸的内容
scroll :　 总是显示横向滚动条

使用说明
检索或设置当对象的内容超过其指定宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。自IE5开始，此属性在MAC平台上可用。自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 overflowX 。

代码示例
div overflow-x: scroll; height: 100px; width: 100px; 参考技术A overflow-x : visible | auto | hidden | scroll

语法取值
visible :? 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，
对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :? 在必需时对象内容才会被裁切或显示横向滚动条
hidden :? 不显示超过对象尺寸的内容
scroll :? 总是显示横向滚动条

使用说明
检索或设置当对象的内容超过其指定宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。自IE5开始，此属性在MAC平台上可用。自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 overflowX 。

代码示例
div overflow-x: scroll; height: 100px; width: 100px;