定义和用法 overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。 提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。 默认值： visible 继承性： no 版本： CSS3 JavaScript 语法： object.style.overflowX=”scroll”
语法 overflow-x: visible|hidden|scroll|auto|no-display|no-content; 值 描述
1. visible 不裁剪内容，可能会显示在内容框之外。 2. hidden 裁剪内容 - 不提供滚动机制。 3. scroll 裁剪内容 - 提供滚动机制。 4. auto 如果溢出框，则应该提供滚动机制。 5. no-display 如果内容不适合内容框，则删除整个框。 6. no-content 如果内容不适合内容框，则隐藏整个内容。这里特别说一下hidden属性：
<!DOCTYPE html> <html> <head> <style> div { width:110px; height:110px; border:thin solid black; overflow-x:hidden; overflow-y:hidden; } </style> </head> <body> <div><p style="width:140px"> 这是一个段落。这是一个段落。这是一个段落。这是一个段落。 这是一个段落。这是一个段落。这是一个段落。这是一个段落。 这是一个段落。这是一个段落。这是一个段落。这是一个段落。 这是一个段落。这是一个段落。这是一个段落。这是一个段落。 这是一个段落。这是一个段落。这是一个段落。这是一个段落。 </p></div> <p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p> <p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p> </body> </html>这一段代码的显示效果如图
但是如果去掉overflow-y:hidden;这一行代码效果如图
类比如果去掉overflow-x:hidden;效果是一样的，所以结论就是如果这两个属性同时存在的时候，就不会有滚轮出现而且还会裁剪内容。 假如存在x，那么y轴滚轮依然在。
